Skip to content

Instantly share code, notes, and snippets.

@natedsaint

natedsaint/3d395ab9.main.css

Created June 2, 2015 15:29
Show Gist options
  • Save natedsaint/f0d45369f8e7e16b5759 to your computer and use it in GitHub Desktop.
Save natedsaint/f0d45369f8e7e16b5759 to your computer and use it in GitHub Desktop.
Download ZIP
Unminified CSS from fallout 4 preview site
Raw
3d395ab9.main.css
@import url("//hello.myfonts.net/count/2dc302");
@import url("//hello.myfonts.net/count/2dc302");
@import url("//hello.myfonts.net/count/2dc302");
@import url("//hello.myfonts.net/count/2dc302");
@font-face{font-family:'schoolbook-web', serif;
font-weight:normal;
font-style:normal
}
@font-face{font-family:'FilmotypeGlenlake';src:url("/assets/fonts/filmotype-glenlake.otf");font-weight:normal;font-style:normal}@font-face{font-family:'SouthernAire';src:url("/assets/fonts/2DC302_1_0.eot");src:url("/assets/fonts/2DC302_1_0.eot?#iefix") format("embedded-opentype"),
url("/assets/fonts/2DC302_1_0.woff2") format("woff2"),
url("/assets/fonts/2DC302_1_0.woff") format("woff"),
url("/assets/fonts/2DC302_1_0.ttf") format("truetype")
}
@font-face{font-family:'schoolbook-web', serif;
font-weight:normal;
font-style:normal
}
@font-face{font-family:'FilmotypeGlenlake';src:url("/assets/fonts/filmotype-glenlake.otf");font-weight:normal;font-style:normal}@font-face{font-family:'SouthernAire';src:url("/assets/fonts/2DC302_1_0.eot");src:url("/assets/fonts/2DC302_1_0.eot?#iefix") format("embedded-opentype"),
url("/assets/fonts/2DC302_1_0.woff2") format("woff2"),
url("/assets/fonts/2DC302_1_0.woff") format("woff"),
url("/assets/fonts/2DC302_1_0.ttf") format("truetype")
}
.pl-section {
padding:2em
}
.pl-square-block {
width:5em;
height:5em;
margin-bottom:10px;
border:3px solid #000;
color:#fff;
font-size:10px
}
.pl-padded-container {
padding:1em
}
.flex-item.pl-square-block {
flex:initial
}
.pl-square-block.pl-dark-text {
color:#000
}
.pl-denote-text {
color:#000;
font-size:1rem;
font-family:"schoolbook-web",
serif;
margin:1.25rem 0
}
.pl-section-spike .spike {
width:220px;
height:375px
}
@font-face{font-family:'schoolbook-web', serif;
font-weight:normal;
font-style:normal
}
@font-face{font-family:'FilmotypeGlenlake';src:url("/assets/fonts/filmotype-glenlake.otf");font-weight:normal;font-style:normal}@font-face{font-family:'SouthernAire';src:url("/assets/fonts/2DC302_1_0.eot");src:url("/assets/fonts/2DC302_1_0.eot?#iefix") format("embedded-opentype"),
url("/assets/fonts/2DC302_1_0.woff2") format("woff2"),
url("/assets/fonts/2DC302_1_0.woff") format("woff"),
url("/assets/fonts/2DC302_1_0.ttf") format("truetype")
}
@font-face{font-family:'schoolbook-web', serif;
font-weight:normal;
font-style:normal
}
@font-face{font-family:'FilmotypeGlenlake';src:url("/assets/fonts/filmotype-glenlake.otf");font-weight:normal;font-style:normal}@font-face{font-family:'SouthernAire';src:url("/assets/fonts/2DC302_1_0.eot");src:url("/assets/fonts/2DC302_1_0.eot?#iefix") format("embedded-opentype"),
url("/assets/fonts/2DC302_1_0.woff2") format("woff2"),
url("/assets/fonts/2DC302_1_0.woff") format("woff"),
url("/assets/fonts/2DC302_1_0.ttf") format("truetype")
}
html,
body {
background-color:#000;
height:100%;
margin:0;
padding:0;
position:relative;
width:100%
}
button {
background-color:transparent;
border:0;
cursor:pointer;
margin:0;
outline:none;
padding:0
}
section {
margin:0;
padding:0
}
p {
color:#333;
font-family:"schoolbook-web",
serif
}
h1,
h2,
h3,
h4,
h5 {
text-transform:uppercase;
font-family:"futura-pt",
sans-serif;
letter-spacing:0.1875rem
}
.accent-text {
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
font-style:normal;
font-size:0.5rem;
display:block
}
@-moz-keyframes featuredVideoPan {
0% {
-moz-transform:translateX(0%) translateZ(0);
transform:translateX(0%) translateZ(0)
}
50% {
-moz-transform:translateX(-50%) translateZ(0);
transform:translateX(-50%) translateZ(0)
}
100% {
-moz-transform:translateX(0%) translateZ(0);
transform:translateX(0%) translateZ(0)
}
}
@-webkit-keyframes featuredVideoPan {
0% {
-webkit-transform:translateX(0%) translateZ(0);
transform:translateX(0%) translateZ(0)
}
50% {
-webkit-transform:translateX(-50%) translateZ(0);
transform:translateX(-50%) translateZ(0)
}
100% {
-webkit-transform:translateX(0%) translateZ(0);
transform:translateX(0%) translateZ(0)
}
}
@keyframes featuredVideoPan {
0% {
-moz-transform:translateX(0%) translateZ(0);
-ms-transform:translateX(0%) translateZ(0);
-webkit-transform:translateX(0%) translateZ(0);
transform:translateX(0%) translateZ(0)
}
50% {
-moz-transform:translateX(-50%) translateZ(0);
-ms-transform:translateX(-50%) translateZ(0);
-webkit-transform:translateX(-50%) translateZ(0);
transform:translateX(-50%) translateZ(0)
}
100% {
-moz-transform:translateX(0%) translateZ(0);
-ms-transform:translateX(0%) translateZ(0);
-webkit-transform:translateX(0%) translateZ(0);
transform:translateX(0%) translateZ(0)
}
}
@-moz-keyframes shake {
0% {
-moz-transform:translate3d(-10px,
0,
0);
transform:translate3d(-10px,
0,
0)
}
25% {
-moz-transform:translate3d(10px,
0,
0);
transform:translate3d(10px,
0,
0)
}
50% {
-moz-transform:translate3d(-10px,
0,
0);
transform:translate3d(-10px,
0,
0)
}
75% {
-moz-transform:translate3d(10px,
0,
0);
transform:translate3d(10px,
0,
0)
}
100% {
-moz-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@-webkit-keyframes shake {
0% {
-webkit-transform:translate3d(-10px,
0,
0);
transform:translate3d(-10px,
0,
0)
}
25% {
-webkit-transform:translate3d(10px,
0,
0);
transform:translate3d(10px,
0,
0)
}
50% {
-webkit-transform:translate3d(-10px,
0,
0);
transform:translate3d(-10px,
0,
0)
}
75% {
-webkit-transform:translate3d(10px,
0,
0);
transform:translate3d(10px,
0,
0)
}
100% {
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@keyframes shake {
0% {
-moz-transform:translate3d(-10px,
0,
0);
-ms-transform:translate3d(-10px,
0,
0);
-webkit-transform:translate3d(-10px,
0,
0);
transform:translate3d(-10px,
0,
0)
}
25% {
-moz-transform:translate3d(10px,
0,
0);
-ms-transform:translate3d(10px,
0,
0);
-webkit-transform:translate3d(10px,
0,
0);
transform:translate3d(10px,
0,
0)
}
50% {
-moz-transform:translate3d(-10px,
0,
0);
-ms-transform:translate3d(-10px,
0,
0);
-webkit-transform:translate3d(-10px,
0,
0);
transform:translate3d(-10px,
0,
0)
}
75% {
-moz-transform:translate3d(10px,
0,
0);
-ms-transform:translate3d(10px,
0,
0);
-webkit-transform:translate3d(10px,
0,
0);
transform:translate3d(10px,
0,
0)
}
100% {
-moz-transform:translate3d(0,
0,
0);
-ms-transform:translate3d(0,
0,
0);
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@-moz-keyframes slowShake {
0% {
-moz-transform:translate3d(-1px,
0,
0);
transform:translate3d(-1px,
0,
0)
}
6% {
-moz-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
12% {
-moz-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
18% {
-moz-transform:translate3d(0,
1px,
0);
transform:translate3d(0,
1px,
0)
}
24% {
-moz-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
30% {
-moz-transform:translate3d(-1px,
-1px,
0);
transform:translate3d(-1px,
-1px,
0)
}
36% {
-moz-transform:translate3d(-1px,
0,
0);
transform:translate3d(-1px,
0,
0)
}
42% {
-moz-transform:translate3d(0,
1px,
0);
transform:translate3d(0,
1px,
0)
}
48% {
-moz-transform:translate3d(1px,
1px,
0);
transform:translate3d(1px,
1px,
0)
}
54% {
-moz-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
60% {
-moz-transform:translate3d(-1px,
-1px,
0);
transform:translate3d(-1px,
-1px,
0)
}
66% {
-moz-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
72% {
-moz-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
78% {
-moz-transform:translate3d(1px,
0,
0);
transform:translate3d(1px,
0,
0)
}
90% {
-moz-transform:translate3d(1px,
1px,
0);
transform:translate3d(1px,
1px,
0)
}
100% {
-moz-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@-webkit-keyframes slowShake {
0% {
-webkit-transform:translate3d(-1px,
0,
0);
transform:translate3d(-1px,
0,
0)
}
6% {
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
12% {
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
18% {
-webkit-transform:translate3d(0,
1px,
0);
transform:translate3d(0,
1px,
0)
}
24% {
-webkit-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
30% {
-webkit-transform:translate3d(-1px,
-1px,
0);
transform:translate3d(-1px,
-1px,
0)
}
36% {
-webkit-transform:translate3d(-1px,
0,
0);
transform:translate3d(-1px,
0,
0)
}
42% {
-webkit-transform:translate3d(0,
1px,
0);
transform:translate3d(0,
1px,
0)
}
48% {
-webkit-transform:translate3d(1px,
1px,
0);
transform:translate3d(1px,
1px,
0)
}
54% {
-webkit-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
60% {
-webkit-transform:translate3d(-1px,
-1px,
0);
transform:translate3d(-1px,
-1px,
0)
}
66% {
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
72% {
-webkit-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
78% {
-webkit-transform:translate3d(1px,
0,
0);
transform:translate3d(1px,
0,
0)
}
90% {
-webkit-transform:translate3d(1px,
1px,
0);
transform:translate3d(1px,
1px,
0)
}
100% {
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@keyframes slowShake {
0% {
-moz-transform:translate3d(-1px,
0,
0);
-ms-transform:translate3d(-1px,
0,
0);
-webkit-transform:translate3d(-1px,
0,
0);
transform:translate3d(-1px,
0,
0)
}
6% {
-moz-transform:translate3d(0,
0,
0);
-ms-transform:translate3d(0,
0,
0);
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
12% {
-moz-transform:translate3d(0,
0,
0);
-ms-transform:translate3d(0,
0,
0);
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
18% {
-moz-transform:translate3d(0,
1px,
0);
-ms-transform:translate3d(0,
1px,
0);
-webkit-transform:translate3d(0,
1px,
0);
transform:translate3d(0,
1px,
0)
}
24% {
-moz-transform:translate3d(0,
-1px,
0);
-ms-transform:translate3d(0,
-1px,
0);
-webkit-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
30% {
-moz-transform:translate3d(-1px,
-1px,
0);
-ms-transform:translate3d(-1px,
-1px,
0);
-webkit-transform:translate3d(-1px,
-1px,
0);
transform:translate3d(-1px,
-1px,
0)
}
36% {
-moz-transform:translate3d(-1px,
0,
0);
-ms-transform:translate3d(-1px,
0,
0);
-webkit-transform:translate3d(-1px,
0,
0);
transform:translate3d(-1px,
0,
0)
}
42% {
-moz-transform:translate3d(0,
1px,
0);
-ms-transform:translate3d(0,
1px,
0);
-webkit-transform:translate3d(0,
1px,
0);
transform:translate3d(0,
1px,
0)
}
48% {
-moz-transform:translate3d(1px,
1px,
0);
-ms-transform:translate3d(1px,
1px,
0);
-webkit-transform:translate3d(1px,
1px,
0);
transform:translate3d(1px,
1px,
0)
}
54% {
-moz-transform:translate3d(0,
-1px,
0);
-ms-transform:translate3d(0,
-1px,
0);
-webkit-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
60% {
-moz-transform:translate3d(-1px,
-1px,
0);
-ms-transform:translate3d(-1px,
-1px,
0);
-webkit-transform:translate3d(-1px,
-1px,
0);
transform:translate3d(-1px,
-1px,
0)
}
66% {
-moz-transform:translate3d(0,
0,
0);
-ms-transform:translate3d(0,
0,
0);
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
72% {
-moz-transform:translate3d(0,
-1px,
0);
-ms-transform:translate3d(0,
-1px,
0);
-webkit-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
78% {
-moz-transform:translate3d(1px,
0,
0);
-ms-transform:translate3d(1px,
0,
0);
-webkit-transform:translate3d(1px,
0,
0);
transform:translate3d(1px,
0,
0)
}
90% {
-moz-transform:translate3d(1px,
1px,
0);
-ms-transform:translate3d(1px,
1px,
0);
-webkit-transform:translate3d(1px,
1px,
0);
transform:translate3d(1px,
1px,
0)
}
100% {
-moz-transform:translate3d(0,
0,
0);
-ms-transform:translate3d(0,
0,
0);
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@-moz-keyframes pageShake {
0% {
-moz-transform:translate3d(-1px,
-1px,
0);
transform:translate3d(-1px,
-1px,
0)
}
20% {
-moz-transform:translate3d(0,
2px,
0);
transform:translate3d(0,
2px,
0)
}
40% {
-moz-transform:translate3d(-2px,
0,
0);
transform:translate3d(-2px,
0,
0)
}
60% {
-moz-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
80% {
-moz-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
100% {
-moz-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@-webkit-keyframes pageShake {
0% {
-webkit-transform:translate3d(-1px,
-1px,
0);
transform:translate3d(-1px,
-1px,
0)
}
20% {
-webkit-transform:translate3d(0,
2px,
0);
transform:translate3d(0,
2px,
0)
}
40% {
-webkit-transform:translate3d(-2px,
0,
0);
transform:translate3d(-2px,
0,
0)
}
60% {
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
80% {
-webkit-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
100% {
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@keyframes pageShake {
0% {
-moz-transform:translate3d(-1px,
-1px,
0);
-ms-transform:translate3d(-1px,
-1px,
0);
-webkit-transform:translate3d(-1px,
-1px,
0);
transform:translate3d(-1px,
-1px,
0)
}
20% {
-moz-transform:translate3d(0,
2px,
0);
-ms-transform:translate3d(0,
2px,
0);
-webkit-transform:translate3d(0,
2px,
0);
transform:translate3d(0,
2px,
0)
}
40% {
-moz-transform:translate3d(-2px,
0,
0);
-ms-transform:translate3d(-2px,
0,
0);
-webkit-transform:translate3d(-2px,
0,
0);
transform:translate3d(-2px,
0,
0)
}
60% {
-moz-transform:translate3d(0,
0,
0);
-ms-transform:translate3d(0,
0,
0);
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
80% {
-moz-transform:translate3d(0,
-1px,
0);
-ms-transform:translate3d(0,
-1px,
0);
-webkit-transform:translate3d(0,
-1px,
0);
transform:translate3d(0,
-1px,
0)
}
100% {
-moz-transform:translate3d(0,
0,
0);
-ms-transform:translate3d(0,
0,
0);
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@-moz-keyframes buttonMouseOn {
0% {
-moz-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
50% {
-moz-transform:translateY(-120%) translateZ(0);
transform:translateY(-120%) translateZ(0);
opacity:0
}
51% {
-moz-transform:translateY(120%) translateZ(0);
transform:translateY(120%) translateZ(0);
opacity:1
}
100% {
-moz-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
}
@-webkit-keyframes buttonMouseOn {
0% {
-webkit-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
50% {
-webkit-transform:translateY(-120%) translateZ(0);
transform:translateY(-120%) translateZ(0);
opacity:0
}
51% {
-webkit-transform:translateY(120%) translateZ(0);
transform:translateY(120%) translateZ(0);
opacity:1
}
100% {
-webkit-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
}
@keyframes buttonMouseOn {
0% {
-moz-transform:translateY(0%) translateZ(0);
-ms-transform:translateY(0%) translateZ(0);
-webkit-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
50% {
-moz-transform:translateY(-120%) translateZ(0);
-ms-transform:translateY(-120%) translateZ(0);
-webkit-transform:translateY(-120%) translateZ(0);
transform:translateY(-120%) translateZ(0);
opacity:0
}
51% {
-moz-transform:translateY(120%) translateZ(0);
-ms-transform:translateY(120%) translateZ(0);
-webkit-transform:translateY(120%) translateZ(0);
transform:translateY(120%) translateZ(0);
opacity:1
}
100% {
-moz-transform:translateY(0%) translateZ(0);
-ms-transform:translateY(0%) translateZ(0);
-webkit-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
}
@-moz-keyframes buttonMouseOff {
0% {
-moz-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
50% {
-moz-transform:translateY(120%) translateZ(0);
transform:translateY(120%) translateZ(0);
opacity:0
}
51% {
-moz-transform:translateY(-120%) translateZ(0);
transform:translateY(-120%) translateZ(0);
opacity:1
}
100% {
-moz-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
}
@-webkit-keyframes buttonMouseOff {
0% {
-webkit-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
50% {
-webkit-transform:translateY(120%) translateZ(0);
transform:translateY(120%) translateZ(0);
opacity:0
}
51% {
-webkit-transform:translateY(-120%) translateZ(0);
transform:translateY(-120%) translateZ(0);
opacity:1
}
100% {
-webkit-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
}
@keyframes buttonMouseOff {
0% {
-moz-transform:translateY(0%) translateZ(0);
-ms-transform:translateY(0%) translateZ(0);
-webkit-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
50% {
-moz-transform:translateY(120%) translateZ(0);
-ms-transform:translateY(120%) translateZ(0);
-webkit-transform:translateY(120%) translateZ(0);
transform:translateY(120%) translateZ(0);
opacity:0
}
51% {
-moz-transform:translateY(-120%) translateZ(0);
-ms-transform:translateY(-120%) translateZ(0);
-webkit-transform:translateY(-120%) translateZ(0);
transform:translateY(-120%) translateZ(0);
opacity:1
}
100% {
-moz-transform:translateY(0%) translateZ(0);
-ms-transform:translateY(0%) translateZ(0);
-webkit-transform:translateY(0%) translateZ(0);
transform:translateY(0%) translateZ(0)
}
}
.hidden {
display:none
}
.form {
margin:0
}
.form .form-field {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
display:inline-block;
border:none;
padding:0
}
.form .form-input {
padding:.65em 3em;
border:none
}
.form .form-label {
font-family:"schoolbook-web",
serif;
font-size:0.75rem;
padding:.5em;
position:absolute;
background-color:#fff
}
.form .standard-btn {
font-family:"futura-pt",
sans-serif;
margin-left:-5px;
height:auto;
width:auto;
padding:6px 22px 7px;
top:-2px;
font-size:8px;
letter-spacing:.3em;
border-color:#fff
}
.form-field {
position:relative
}
.form-field-label {
font-family:"futura-pt",
sans-serif;
font-weight:bold;
font-size:12px;
text-transform:uppercase;
display:block;
padding-bottom:.25rem
}
.form-field-error .form-field-label {
color:#bd0100
}
.form-field-error .form-field-label:-moz-placeholder {
color:#bd0100
}
.form-field-error .form-field-label::-moz-placeholder {
color:#bd0100
}
.form-field-error .form-field-label:-ms-input-placeholder {
color:#bd0100
}
.form-field-error .form-field-label::-webkit-input-placeholder {
color:#bd0100
}
.form-radio-label,
.form-checkbox-label {
display:inline-block;
position:relative;
margin-right:2em
}
.form-radio-label .form-checkbox-input,
.form-radio-label .form-radio-input,
.form-checkbox-label .form-checkbox-input,
.form-checkbox-label .form-radio-input {
opacity:0;
margin:0 .5em 0 0
}
.form-radio-label .form-radio-input:checked+.form-radio-input-span,
.form-checkbox-label .form-radio-input:checked+.form-radio-input-span {
background:#000
}
.form-checkbox-label {
cursor:pointer;
padding:0 1.5em 0 3em;
margin:0 0 1em;
font-family:"futura-pt",
sans-serif;
font-weight:bold;
font-size:0.75rem;
min-height:2em;
text-transform:uppercase;
display:-webkit-flex;
display:flex;
-webkit-align-items:center;
align-items:center
}
.form-checkbox-label:before {
border:3px solid #000;
content:"";
display:inline-block;
height:1.5em;
left:0;
pointer-events:none;
position:absolute;
top:0;
width:1.5em
}
.form-checkbox-label.form-field-error {
color:#bd0100
}
.form-field-error.form-checkbox-label:before {
border-color:#bd0100
}
.form-checkbox-input {
cursor:pointer;
width:1.5em;
height:1.5em;
padding-left:0;
position:absolute;
left:0;
top:0;
z-index:1
}
.form-checkbox-checked:after {
background-image:url(../assets/icons/icons.png);
background-position:-39px -213px;
width:39px;
height:34px;
position:absolute;
content:'';
display:block;
bottom:0;
-moz-transform:scale(0.75,
0.75);
-ms-transform:scale(0.75,
0.75);
-webkit-transform:scale(0.75,
0.75);
transform:scale(0.75,
0.75);
left:-.25em;
z-index:0
}
.form-text-field-input {
display:block;
width:100%;
height:2.5rem;
border:none;
font-family:"schoolbook-web",
serif;
padding-left:.75em;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0
}
.form-field-error .form-text-field-input {
border:3px solid #bd0100
}
.form-field-error .form-text-field-input:-moz-placeholder {
color:#bd0100
}
.form-field-error .form-text-field-input::-moz-placeholder {
color:#bd0100
}
.form-field-error .form-text-field-input:-ms-input-placeholder {
color:#bd0100
}
.form-field-error .form-text-field-input::-webkit-input-placeholder {
color:#bd0100
}
.form-field-number-input {
-moz-appearance:textfield
}
.form-field-number-input::-webkit-inner-spin-button,
.form-field-number-input::-webkit-outer-spin-button {
-webkit-appearance:none;
margin:0
}
.form-radio-input-span {
border-radius:50%;
display:inline-block;
height:1em;
width:1em;
border:3px solid #000;
position:absolute;
top:0;
pointer-events:none;
left:0
}
.form-field-required .form-field-label:after {
content:"*"
}
.form-dropdown {
position:relative;
display:block
}
.form-dropdown-container {
background:#fff url("../assets/[email protected]") repeat;
box-sizing:border-box;
padding-right:48px;
height:2.5em;
overflow:hidden;
position:relative;
width:100%
}
.form-dropdown-container:before {
background:#fff;
content:'';
display:block;
position:absolute;
height:0;
width:0;
border-style:solid;
border-width:7px 6px 0;
border-color:#000 transparent transparent;
right:.9em;
top:1em;
z-index:2;
pointer-events:none
}
@media all and (min-width: 901px) {
.form-dropdown-container.form-dropdown-container.form-dropdown-options-container-active {
overflow:visible
}
}
.form-dropdown-option {
box-sizing:border-box;
cursor:pointer;
font-family:"schoolbook-web",
serif;
font-size:11px;
min-height:3em;
border-bottom:#000 1px solid;
color:#000;
padding:.9em 0;
margin:0 .9em
}
.form-dropdown-option:last-child {
border-bottom:none
}
.form-dropdown-option-selected {
border-bottom:#000 3px solid;
padding-top:1.2em
}
.form-dropdown-option-highlighted {
background-color:#ebeae5
}
.form-dropdown-select {
border:1em solid transparent;
height:100%;
left:0;
position:absolute;
top:0;
opacity:0;
z-index:3;
width:100%
}
@media all and (min-width: 901px) {
.form-dropdown-select {
display:none
}
}
.form-dropdown-value-container {
cursor:pointer;
color:#000;
box-sizing:border-box;
font-family:"schoolbook-web",
serif;
font-size:11px;
height:100%;
left:0;
padding:1.2em 0.9em;
position:absolute;
top:0;
width:100%;
z-index:1
}
.form-dropdown-options-container-active .form-dropdown-value-container {
z-index:0
}
.form-dropdown-options-container {
background:#fff url("../assets/[email protected]") repeat;
left:0;
height:100%;
overflow:hidden;
position:absolute;
top:0;
visibility:hidden;
width:100%;
z-index:0
}
.form-dropdown-options-container-active .form-dropdown-options-container {
overflow-y:auto;
height:auto;
max-height:300px;
visibility:visible;
z-index:3
}
.form-dropdown-options-container-active:before {
z-index:4
}
.form-dropdown-value {
background-color:#000;
color:#fff;
font-family:"futura-pt",
sans-serif;
font-size:0.75rem;
font-weight:bold;
line-height:0.75rem;
padding:1em;
text-transform:uppercase;
margin-right:.25em
}
.form-dropdown-value::after {
content:'';
display:block;
border-left:0.5em solid transparent;
border-top:0.5em solid #fff;
border-right:0.5em solid transparent;
margin-left:-.5em;
margin-top:-.2em;
position:absolute;
right:18px;
top:50%;
z-index:2
}
.standard-btn {
background-image:url("../assets/[email protected]");
border-color:#000;
border-width:2px;
border-style:solid;
box-sizing:border-box;
height:auto;
display:block;
font-family:"futura-pt",
sans-serif;
font-size:0.625rem;
font-weight:bold;
letter-spacing:0.1875rem;
padding:11px 15px;
position:relative;
text-align:center;
text-transform:uppercase;
text-decoration:none;
width:auto
}
.standard-btn.standard-btn-light {
background-color:#fff;
border-color:#fff;
color:#000
}
.standard-btn.standard-btn-dark {
background-color:#000;
border-color:#000;
color:#fff
}
.standard-btn-rollover-text {
position:relative;
display:block;
-moz-animation:buttonMouseOff 500ms ease-out;
-webkit-animation:buttonMouseOff 500ms ease-out;
animation:buttonMouseOff 500ms ease-out
}
.standard-btn:hover .standard-btn-rollover-text {
-moz-animation:buttonMouseOn 200ms ease-in-out;
-webkit-animation:buttonMouseOn 200ms ease-in-out;
animation:buttonMouseOn 200ms ease-in-out
}
.play-btn {
background:url("/assets/play-button-light.png") no-repeat;
-moz-background-size:contain;
-o-background-size:contain;
-webkit-background-size:contain;
background-size:contain;
height:77px;
overflow:hidden;
padding-left:77px;
width:0
}
.icon {
clip:auto;
color:transparent;
display:block;
height:0;
margin:0;
overflow:hidden;
padding:0;
text-indent:100%;
white-space:nowrap;
width:0;
background-repeat:no-repeat;
background-size:100% 100%
}
.download-btn-icon {
left:-1em;
top:.5em;
display:inline-block;
position:relative;
margin-top:-1.2em;
margin-left:-3em;
-moz-transform:scale(0.7,
0.7);
-ms-transform:scale(0.7,
0.7);
-webkit-transform:scale(0.7,
0.7);
transform:scale(0.7,
0.7)
}
.android-download-btn .download-btn-icon {
margin-left:-5.5em
}
.download-btn-text {
position:absolute;
top:1em;
left:6em;
-moz-animation:buttonMouseOff 500ms ease-out;
-webkit-animation:buttonMouseOff 500ms ease-out;
animation:buttonMouseOff 500ms ease-out
}
.android-download-btn .download-btn-text {
left:5em
}
.download-button:hover .download-btn-text {
-moz-animation:buttonMouseOn 200ms ease-in-out;
-webkit-animation:buttonMouseOn 200ms ease-in-out;
animation:buttonMouseOn 200ms ease-in-out
}
.text-icon {
width:100%;
height:100%;
position:relative
}
.vt-icon {
background-image:url("/assets/vault-tec-icon-black.svg");
background-position:center -22px;
background-size:80px auto;
background-repeat:no-repeat;
height:30px;
width:50px
}
.vt-icon-white {
width:72px;
height:30px;
background:url("../assets/icons/icons.png") -286px -129px
}
.apple-icon-sm {
width:17px;
height:23px;
background:url("../assets/icons/icons.png") -362px -161px
}
.android-icon-sm {
width:20px;
height:23px;
background:url("../assets/icons/icons.png") -358px -129px
}
.callout-arrow-icon {
background-image:url(../assets/icons/icons.png);
background-position:-160px -122px;
width:39px;
height:36px
}
.preorder-arrow-small {
background:url("../assets/icons/icons.png") 0px -161px;
width:70px;
height:52px;
display:inline-block;
position:absolute;
left:0;
top:3px
}
.esrb-privacy-icon {
background:url("../assets/icons/icons.png") -214px 0px;
height:64px;
width:172px
}
.esrb-rating-icon {
background:url("../assets/icons/icons.png") -214px -64px;
height:65px;
width:128px
}
.esrb-privacy-icon-large {
background:url("/assets/icons/esrb-privacy-icon-large.png")
}
.esrb-rating-icon-large {
background:url("/assets/icons/esrb-rating-icon-large.png")
}
.franchise-icon {
background-image:url("/assets/icons/franchise-icon.svg");
width:93px;
height:40px
}
.beth-soft-icon {
background-image:url("/assets/icons/bethesda-icon-black.svg");
width:323px;
height:46px
}
.beth-soft-icon-white {
background-image:url("/assets/icons/bethesda-icon-white.svg");
width:323px;
height:46px
}
.beth-studios-icon-white {
background-image:url("/assets/icons/bethesda-studios-icon-white.svg");
width:309px;
height:145px
}
.beth-studios-icon {
background-image:url("/assets/icons/bethesda-studios-icon-black.svg");
width:309px;
height:145px
}
.xbox-360-icon {
background-image:url("/assets/icons/xbox-360-icon.svg");
width:96px;
height:18px
}
.xbox-360-icon-black {
background-image:url("/assets/icons/xbox-360-icon-black.svg");
width:96px;
height:20px
}
.xbox-one-icon {
background-image:url("/assets/icons/xbox-one-icon.svg");
width:96px;
height:18px
}
.xbox-one-icon-black {
background-image:url("/assets/icons/xbox-one-icon-black.svg");
width:96px;
height:20px
}
.ps4-icon {
background-image:url("/assets/icons/ps4-icon.svg");
width:96px;
height:18px
}
.ps4-icon-black {
background-image:url("/assets/icons/ps4-icon-black.svg");
width:96px;
height:21px
}
.ps3-icon {
background-image:url("/assets/icons/ps3-icon.svg");
width:128px;
height:24px
}
.ps3-icon-black {
background-image:url("/assets/icons/ps3-icon-black.svg");
width:128px;
height:24px
}
.pc-icon {
background-image:url("/assets/icons/pc-icon.svg");
width:30px;
height:30px
}
.pc-icon-black {
background-image:url("/assets/icons/pc-icon-black.svg");
width:30px;
height:30px
}
.mac-icon {
background-image:url("/assets/icons/mac-icon.svg");
width:30px;
height:30px
}
.mac-icon-black {
background-image:url("/assets/icons/mac-icon-black.svg");
width:30px;
height:30px
}
.steam-icon {
background-image:url("/assets/icons/steam-icon.svg");
width:60px;
height:30px
}
.steam-icon-black {
background-image:url("/assets/icons/steam-icon-black.svg");
width:60px;
height:30px
}
.rating-pt-br_pegi-18-provisional {
background-image:url("/assets/ratings/pt-br_pegi-18-provisional.svg");
width:104px;
height:60px
}
.rating-de-de_pegi-18-provisional {
background-image:url("/assets/ratings/de-de_pegi-18-provisional.svg");
width:45px;
height:60px
}
.rating-icon.rating-en-gb_check-classification {
background-image:url("/assets/ratings/en-gb_check-classification.svg");
width:150px;
height:60px
}
.rating-en-us_esrb-rp {
background-image:url("/assets/ratings/en-us_esrb-rp.svg");
width:110px;
height:60px
}
.rating-en-us_esrb-rp-m {
background-image:url("/assets/ratings/en-us_esrb-rp-m.svg");
width:70px;
height:60px
}
.rating-en-gb_pegi-18-provisional,
.rating-es-es_pegi-18-provisional {
background-image:url("/assets/ratings/es-es_pegi-18-provisional.svg");
width:42px;
height:60px;
background-size:contain
}
.rating-fr-fr_pegi-18-provisional {
background-image:url("/assets/ratings/fr-fr_pegi-18-provisional.svg");
width:50px;
height:60px
}
.rating-it-it_pegi-18-provisional {
background-image:url("/assets/ratings/it-it_pegi-18-provisional.svg");
width:50px;
height:60px
}
.rating-ja_cero-rp {
background-image:url("/assets/ratings/ja_cero-rp.svg");
width:55px;
height:60px
}
.rating-pl_pegi-18-provisional {
background-image:url("/assets/ratings/pl_pegi-18-provisional.svg");
width:50px;
height:60px
}
.rating-ru_pegi-18-provisional {
background-image:url("/assets/ratings/ru_pegi-18-provisional.svg");
width:140px;
height:60px
}
.rating-de-de_usk-rp-lrg {
background-image:url("/assets/ratings/de-de_usk-rp-lrg.svg");
height:60px;
width:50px
}
.social-network-icon.youtube-icon {
background:url("/assets/icons/youtube-white-circle.svg");
width:2.5rem;
height:2.5rem;
background-size:100%;
background-repeat:no-repeat
}
@media (orientation: landscape) {
.social-network-icon.youtube-icon {
height:2.875rem;
width:2.875rem
}
}
.social-network-icon.twitter-icon {
background:url("/assets/icons/twitter-white-circle.svg");
width:2.5rem;
height:2.5rem;
background-size:100%;
background-repeat:no-repeat
}
@media (orientation: landscape) {
.social-network-icon.twitter-icon {
height:2.875rem;
width:2.875rem
}
}
.social-network-icon.facebook-icon {
background:url("/assets/icons/facebook-white-circle.svg");
width:2.5rem;
height:2.5rem;
background-size:100%;
background-repeat:no-repeat
}
@media (orientation: landscape) {
.social-network-icon.facebook-icon {
height:2.875rem;
width:2.875rem
}
}
.social-network-icon.tumblr-icon {
background:url("/assets/icons/tumbler-white-circle.svg");
width:2.5rem;
height:2.5rem;
background-size:100%;
background-repeat:no-repeat
}
@media (orientation: landscape) {
.social-network-icon.tumblr-icon {
height:2.875rem;
width:2.875rem
}
}
.social-network-icon.vine-icon {
background:url("/assets/icons/vine-white-circle.svg");
width:2.5rem;
height:2.5rem;
background-size:100%;
background-repeat:no-repeat
}
@media (orientation: landscape) {
.social-network-icon.vine-icon {
height:2.875rem;
width:2.875rem
}
}
.social-network-icon.instagram-icon {
background:url("/assets/icons/instagram-white-circle.svg");
width:2.5rem;
height:2.5rem;
background-size:100%;
background-repeat:no-repeat
}
@media (orientation: landscape) {
.social-network-icon.instagram-icon {
height:2.875rem;
width:2.875rem
}
}
.app {
background-color:#000;
height:100%;
left:0;
overflow:hidden;
opacity:0;
position:absolute;
transition:opacity 500ms ease-in-out 285ms,
visibility 500ms ease-in-out 285ms,
z-index 501ms linear 285ms;
-webkit-backface-visibility:hidden;
visibility:hidden;
top:0;
width:100%;
z-index:1
}
.page-active .app {
transition:opacity 500ms ease-in-out 285ms,
visibility 500ms ease-in-out 285ms;
overflow:visible;
visibility:visible;
opacity:1;
z-index:2
}
.page-loading.page-active .app {
transition-delay:0ms
}
.modal-container-active.page-active .app {
overflow:visible;
position:fixed;
top:0;
left:0;
z-index:1
}
.page-error-active .app {
overflow:hidden;
z-index:1
}
.pages {
position:relative
}
.page {
background:#ecebe8 url("../assets/[email protected]") repeat;
box-sizing:border-box;
height:100%;
left:0;
overflow:hidden;
padding-top:69px;
position:absolute;
top:0;
width:100%;
z-index:0
}
.page:before {
background-color:#000;
content:"";
display:block;
height:69px;
left:0;
position:absolute;
top:0;
width:100%
}
.page.page-active {
overflow:visible;
height:auto;
position:relative;
z-index:1
}
.page-sub-nav-module.module {
min-height:0
}
.page-sub-nav-module-wrapper {
margin:0 auto;
max-width:1100px;
padding:0 1rem
}
.page-sub-nav.section-heading {
display:none;
text-align:center;
align-content:space-between;
padding:0;
margin:0
}
.page-sub-nav-item {
margin:0 2em;
padding:0;
font-size:12px;
display:-webkit-inline-flex;
display:inline-flex;
position:relative
}
.page-sub-nav-item .page-sub-nav-item-heading {
font-family:"futura-pt",
sans-serif;
font-weight:bold;
text-transform:uppercase;
letter-spacing:0.1em;
padding:1.2em 0;
font-size:1.17em
}
.page-sub-nav-item:first-of-type {
position:initial
}
.page-sub-nav-item:before {
position:absolute;
content:'';
display:block;
left:-2.25em;
top:2.15em;
height:.45em;
width:.45em;
background:#000;
border-radius:1em
}
@media all and (min-width: 901px) {
.page-sub-nav.section-heading {
display:block;
margin-bottom:0
}
}
@-moz-keyframes rotatePageLoadCog {
0% {
-moz-transform:translateX(0%) translateZ(0);
transform:translateX(0%) translateZ(0);
-moz-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-moz-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes rotatePageLoadCog {
0% {
-webkit-transform:translateX(0%) translateZ(0);
transform:translateX(0%) translateZ(0);
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes rotatePageLoadCog {
0% {
-moz-transform:translateX(0%) translateZ(0);
-ms-transform:translateX(0%) translateZ(0);
-webkit-transform:translateX(0%) translateZ(0);
transform:translateX(0%) translateZ(0);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
.page-loader {
background-color:#000;
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:center;
justify-content:center;
-webkit-align-items:center;
align-items:center;
transition:opacity 275ms ease-in-out,
visibility 275ms ease-in-out,
z-index 276ms linear;
-webkit-backface-visibility:hidden;
opacity:0;
visibility:hidden;
z-index:0
}
.page-loader:after {
background-image:url("/assets/cog.svg");
background-repeat:no-repeat;
background-size:contain;
transition:opacity 200ms ease-in-out,
visibility 200ms ease-in-out;
content:"";
display:block;
height:63px;
width:63px;
-moz-animation:rotatePageLoadCog 4.5s linear infinite;
-webkit-animation:rotatePageLoadCog 4.5s linear infinite;
animation:rotatePageLoadCog 4.5s linear infinite;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
opacity:0;
visibility:hidden
}
@media all and (min-width: 901px) {
.page-loader {
-webkit-flex-flow:row wrap;
flex-flow:row wrap
}
}
.page-loading .page-loader,
.page-loading.page-active .page-loader {
opacity:1;
transition:opacity 275ms ease-in-out,
visibility 275ms ease-in-out;
visibility:visible;
z-index:10
}
.page-loading .page-loader:after,
.page-loading.page-active .page-loader:after {
-moz-animation-play-state:running;
-webkit-animation-play-state:running;
animation-play-state:running;
opacity:1;
visibility:visible
}
.page-active .page-loader,
.page-error-active .page-loader {
opacity:0;
visibility:hidden;
z-index:0
}
.page-active .page-loader:after,
.page-error-active .page-loader:after {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
opacity:0;
visibility:hidden
}
.page-error {
background:#000 repeat url("/assets/[email protected]");
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:center;
justify-content:center;
-webkit-align-items:center;
align-items:center;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
opacity:0;
transition:opacity 300ms ease-in-out,
visibility 300ms ease-in-out;
visibility:hidden;
z-index:auto
}
.page-error-active .page-error {
opacity:1;
transition:opacity 300ms ease-in-out,
visibility 300ms ease-in-out,
height 400ms ease;
visibility:visible;
z-index:3
}
.page-error-heading,
.page-error-text {
box-sizing:border-box;
display:block;
margin:0 auto;
max-width:510px;
text-align:center;
width:100%;
padding:0 1em
}
.page-error-heading {
color:#eae9e4;
font-family:"futura-pt",
sans-serif;
font-size:1.875rem;
font-weight:bold;
margin-bottom:1em;
position:relative;
text-transform:uppercase;
padding-top:50px
}
.page-error-heading:before {
content:"";
display:block;
left:50%;
margin-left:-36px;
position:absolute;
top:0;
background-image:url(../assets/icons/icons.png);
background-position:-286px -129px;
width:72px;
height:30px
}
.page-error-text {
font-family:"schoolbook-web",
serif;
color:#eae9e4;
font-size:0.875rem
}
.module {
box-sizing:border-box;
list-style:none;
margin:0 auto;
overflow:hidden;
padding:0;
width:100%;
position:relative;
min-height:95px
}
.module:before {
background:#ecebe8 url("../assets/[email protected]") repeat;
box-sizing:border-box;
color:#000;
content:"Accessing Data\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0Please Stand By";
font-size:0.875rem;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
display:block;
height:100%;
left:0;
padding-top:36px;
position:absolute;
text-align:center;
text-transform:uppercase;
top:0;
white-space:pre;
width:100%;
z-index:10
}
.module:after {
background:url("/assets/texture-cog-dark.png") no-repeat center center;
content:"";
display:block;
height:92px;
left:50%;
margin-left:-45px;
position:absolute;
top:0;
width:92px;
-moz-animation:rotatePageLoadCog 4.5s linear infinite;
-webkit-animation:rotatePageLoadCog 4.5s linear infinite;
animation:rotatePageLoadCog 4.5s linear infinite;
z-index:10
}
.module-loaded {
display:block;
background:none
}
.module-loaded:before {
display:none
}
.module-loaded:after {
display:none;
-moz-animation:none;
-webkit-animation:none;
animation:none
}
.module-error {
text-align:center;
background:none;
min-height:50%;
margin-bottom:3em;
margin-top:3em;
z-index:0
}
.module-error:before {
content:"Access Error";
background:url("/assets/icons/vt-icon.png") no-repeat top center;
padding-top:40px;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
font-size:0.9375rem;
color:#000;
margin-bottom:2em;
position:absolute;
width:390px;
top:50px;
left:50%;
margin-left:-195px;
z-index:11
}
.module-error:after {
box-sizing:border-box;
content:"A system failure has occured. Shutdown of the Masterbrain has been authorized and \a all sensitive materials have been removed for security purposes. \a Please attempt re-access. Have a pleasant day.";
font:0.875rem"schoolbook-web",
serif;
color:#000;
background:#ecebe8 url("../assets/[email protected]") repeat;
-moz-animation:none;
-webkit-animation:none;
animation:none;
position:absolute;
left:0;
top:0;
padding-top:130px;
text-align:center;
width:100%;
white-space:pre;
height:100%;
margin:0;
z-index:10
}
.four-oh-four-page.page {
-moz-transition:opacity 500ms linear,
visibility 500ms linear,
z-index 501ms linear;
-o-transition:opacity 500ms linear,
visibility 500ms linear,
z-index 501ms linear;
-webkit-transition:opacity 500ms linear,
visibility 500ms linear,
z-index 501ms linear;
transition:opacity 500ms linear,
visibility 500ms linear,
z-index 501ms linear;
height:100%;
opacity:0;
visibility:hidden;
z-index:0
}
.four-oh-four-page-active .four-oh-four-page.page {
opacity:1;
visibility:visible;
z-index:2
}
.four-oh-four-image {
box-sizing:border-box;
display:block;
height:auto;
margin:100px auto 0;
max-width:1100px;
width:100%;
padding:0 1rem
}
@-moz-keyframes glitch {
0% {
-moz-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
12% {
-moz-transform:translate3d(0,
-6%,
0);
transform:translate3d(0,
-6%,
0)
}
24% {
-moz-transform:translate3d(0,
-12%,
0);
transform:translate3d(0,
-12%,
0)
}
36% {
-moz-transform:translate3d(0,
-24%,
0);
transform:translate3d(0,
-24%,
0)
}
48% {
-moz-transform:translate3d(0,
-36%,
0);
transform:translate3d(0,
-36%,
0)
}
60% {
-moz-transform:translate3d(0,
-48%,
0);
transform:translate3d(0,
-48%,
0)
}
72% {
-moz-transform:translate3d(0,
-60%,
0);
transform:translate3d(0,
-60%,
0)
}
96% {
-moz-transform:translate3d(0,
-72%,
0);
transform:translate3d(0,
-72%,
0)
}
100% {
-moz-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@-webkit-keyframes glitch {
0% {
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
12% {
-webkit-transform:translate3d(0,
-6%,
0);
transform:translate3d(0,
-6%,
0)
}
24% {
-webkit-transform:translate3d(0,
-12%,
0);
transform:translate3d(0,
-12%,
0)
}
36% {
-webkit-transform:translate3d(0,
-24%,
0);
transform:translate3d(0,
-24%,
0)
}
48% {
-webkit-transform:translate3d(0,
-36%,
0);
transform:translate3d(0,
-36%,
0)
}
60% {
-webkit-transform:translate3d(0,
-48%,
0);
transform:translate3d(0,
-48%,
0)
}
72% {
-webkit-transform:translate3d(0,
-60%,
0);
transform:translate3d(0,
-60%,
0)
}
96% {
-webkit-transform:translate3d(0,
-72%,
0);
transform:translate3d(0,
-72%,
0)
}
100% {
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@keyframes glitch {
0% {
-moz-transform:translate3d(0,
0,
0);
-ms-transform:translate3d(0,
0,
0);
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
12% {
-moz-transform:translate3d(0,
-6%,
0);
-ms-transform:translate3d(0,
-6%,
0);
-webkit-transform:translate3d(0,
-6%,
0);
transform:translate3d(0,
-6%,
0)
}
24% {
-moz-transform:translate3d(0,
-12%,
0);
-ms-transform:translate3d(0,
-12%,
0);
-webkit-transform:translate3d(0,
-12%,
0);
transform:translate3d(0,
-12%,
0)
}
36% {
-moz-transform:translate3d(0,
-24%,
0);
-ms-transform:translate3d(0,
-24%,
0);
-webkit-transform:translate3d(0,
-24%,
0);
transform:translate3d(0,
-24%,
0)
}
48% {
-moz-transform:translate3d(0,
-36%,
0);
-ms-transform:translate3d(0,
-36%,
0);
-webkit-transform:translate3d(0,
-36%,
0);
transform:translate3d(0,
-36%,
0)
}
60% {
-moz-transform:translate3d(0,
-48%,
0);
-ms-transform:translate3d(0,
-48%,
0);
-webkit-transform:translate3d(0,
-48%,
0);
transform:translate3d(0,
-48%,
0)
}
72% {
-moz-transform:translate3d(0,
-60%,
0);
-ms-transform:translate3d(0,
-60%,
0);
-webkit-transform:translate3d(0,
-60%,
0);
transform:translate3d(0,
-60%,
0)
}
96% {
-moz-transform:translate3d(0,
-72%,
0);
-ms-transform:translate3d(0,
-72%,
0);
-webkit-transform:translate3d(0,
-72%,
0);
transform:translate3d(0,
-72%,
0)
}
100% {
-moz-transform:translate3d(0,
0,
0);
-ms-transform:translate3d(0,
0,
0);
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
}
@-moz-keyframes film {
0% {
-moz-transform:translate3d(0,
-6%,
0);
transform:translate3d(0,
-6%,
0)
}
5.5% {
-moz-transform:translate3d(0,
-5.5%,
0);
transform:translate3d(0,
-5.5%,
0)
}
11% {
-moz-transform:translate3d(0,
-11%,
0);
transform:translate3d(0,
-11%,
0)
}
16.5% {
-moz-transform:translate3d(0,
-16.5%,
0);
transform:translate3d(0,
-16.5%,
0)
}
22% {
-moz-transform:translate3d(0,
-22%,
0);
transform:translate3d(0,
-22%,
0)
}
27.5% {
-moz-transform:translate3d(0,
-27.5%,
0);
transform:translate3d(0,
-27.5%,
0)
}
33% {
-moz-transform:translate3d(0,
-33%,
0);
transform:translate3d(0,
-33%,
0)
}
38.5% {
-moz-transform:translate3d(0,
-38.5%,
0);
transform:translate3d(0,
-38.5%,
0)
}
44% {
-moz-transform:translate3d(0,
-44%,
0);
transform:translate3d(0,
-44%,
0)
}
49.5% {
-moz-transform:translate3d(0,
-49.5%,
0);
transform:translate3d(0,
-49.5%,
0)
}
55% {
-moz-transform:translate3d(0,
-55%,
0);
transform:translate3d(0,
-55%,
0)
}
60.5% {
-moz-transform:translate3d(0,
-60.5%,
0);
transform:translate3d(0,
-60.5%,
0)
}
66% {
-moz-transform:translate3d(0,
-66%,
0);
transform:translate3d(0,
-66%,
0)
}
71.5% {
-moz-transform:translate3d(0,
-71.5%,
0);
transform:translate3d(0,
-71.5%,
0)
}
77% {
-moz-transform:translate3d(0,
-77%,
0);
transform:translate3d(0,
-77%,
0)
}
82.5% {
-moz-transform:translate3d(0,
-82.5%,
0);
transform:translate3d(0,
-82.5%,
0)
}
88% {
-moz-transform:translate3d(0,
-88%,
0);
transform:translate3d(0,
-88%,
0)
}
93.5% {
-moz-transform:translate3d(0,
-90.5%,
0);
transform:translate3d(0,
-90.5%,
0)
}
}
@-webkit-keyframes film {
0% {
-webkit-transform:translate3d(0,
-6%,
0);
transform:translate3d(0,
-6%,
0)
}
5.5% {
-webkit-transform:translate3d(0,
-5.5%,
0);
transform:translate3d(0,
-5.5%,
0)
}
11% {
-webkit-transform:translate3d(0,
-11%,
0);
transform:translate3d(0,
-11%,
0)
}
16.5% {
-webkit-transform:translate3d(0,
-16.5%,
0);
transform:translate3d(0,
-16.5%,
0)
}
22% {
-webkit-transform:translate3d(0,
-22%,
0);
transform:translate3d(0,
-22%,
0)
}
27.5% {
-webkit-transform:translate3d(0,
-27.5%,
0);
transform:translate3d(0,
-27.5%,
0)
}
33% {
-webkit-transform:translate3d(0,
-33%,
0);
transform:translate3d(0,
-33%,
0)
}
38.5% {
-webkit-transform:translate3d(0,
-38.5%,
0);
transform:translate3d(0,
-38.5%,
0)
}
44% {
-webkit-transform:translate3d(0,
-44%,
0);
transform:translate3d(0,
-44%,
0)
}
49.5% {
-webkit-transform:translate3d(0,
-49.5%,
0);
transform:translate3d(0,
-49.5%,
0)
}
55% {
-webkit-transform:translate3d(0,
-55%,
0);
transform:translate3d(0,
-55%,
0)
}
60.5% {
-webkit-transform:translate3d(0,
-60.5%,
0);
transform:translate3d(0,
-60.5%,
0)
}
66% {
-webkit-transform:translate3d(0,
-66%,
0);
transform:translate3d(0,
-66%,
0)
}
71.5% {
-webkit-transform:translate3d(0,
-71.5%,
0);
transform:translate3d(0,
-71.5%,
0)
}
77% {
-webkit-transform:translate3d(0,
-77%,
0);
transform:translate3d(0,
-77%,
0)
}
82.5% {
-webkit-transform:translate3d(0,
-82.5%,
0);
transform:translate3d(0,
-82.5%,
0)
}
88% {
-webkit-transform:translate3d(0,
-88%,
0);
transform:translate3d(0,
-88%,
0)
}
93.5% {
-webkit-transform:translate3d(0,
-90.5%,
0);
transform:translate3d(0,
-90.5%,
0)
}
}
@keyframes film {
0% {
-moz-transform:translate3d(0,
-6%,
0);
-ms-transform:translate3d(0,
-6%,
0);
-webkit-transform:translate3d(0,
-6%,
0);
transform:translate3d(0,
-6%,
0)
}
5.5% {
-moz-transform:translate3d(0,
-5.5%,
0);
-ms-transform:translate3d(0,
-5.5%,
0);
-webkit-transform:translate3d(0,
-5.5%,
0);
transform:translate3d(0,
-5.5%,
0)
}
11% {
-moz-transform:translate3d(0,
-11%,
0);
-ms-transform:translate3d(0,
-11%,
0);
-webkit-transform:translate3d(0,
-11%,
0);
transform:translate3d(0,
-11%,
0)
}
16.5% {
-moz-transform:translate3d(0,
-16.5%,
0);
-ms-transform:translate3d(0,
-16.5%,
0);
-webkit-transform:translate3d(0,
-16.5%,
0);
transform:translate3d(0,
-16.5%,
0)
}
22% {
-moz-transform:translate3d(0,
-22%,
0);
-ms-transform:translate3d(0,
-22%,
0);
-webkit-transform:translate3d(0,
-22%,
0);
transform:translate3d(0,
-22%,
0)
}
27.5% {
-moz-transform:translate3d(0,
-27.5%,
0);
-ms-transform:translate3d(0,
-27.5%,
0);
-webkit-transform:translate3d(0,
-27.5%,
0);
transform:translate3d(0,
-27.5%,
0)
}
33% {
-moz-transform:translate3d(0,
-33%,
0);
-ms-transform:translate3d(0,
-33%,
0);
-webkit-transform:translate3d(0,
-33%,
0);
transform:translate3d(0,
-33%,
0)
}
38.5% {
-moz-transform:translate3d(0,
-38.5%,
0);
-ms-transform:translate3d(0,
-38.5%,
0);
-webkit-transform:translate3d(0,
-38.5%,
0);
transform:translate3d(0,
-38.5%,
0)
}
44% {
-moz-transform:translate3d(0,
-44%,
0);
-ms-transform:translate3d(0,
-44%,
0);
-webkit-transform:translate3d(0,
-44%,
0);
transform:translate3d(0,
-44%,
0)
}
49.5% {
-moz-transform:translate3d(0,
-49.5%,
0);
-ms-transform:translate3d(0,
-49.5%,
0);
-webkit-transform:translate3d(0,
-49.5%,
0);
transform:translate3d(0,
-49.5%,
0)
}
55% {
-moz-transform:translate3d(0,
-55%,
0);
-ms-transform:translate3d(0,
-55%,
0);
-webkit-transform:translate3d(0,
-55%,
0);
transform:translate3d(0,
-55%,
0)
}
60.5% {
-moz-transform:translate3d(0,
-60.5%,
0);
-ms-transform:translate3d(0,
-60.5%,
0);
-webkit-transform:translate3d(0,
-60.5%,
0);
transform:translate3d(0,
-60.5%,
0)
}
66% {
-moz-transform:translate3d(0,
-66%,
0);
-ms-transform:translate3d(0,
-66%,
0);
-webkit-transform:translate3d(0,
-66%,
0);
transform:translate3d(0,
-66%,
0)
}
71.5% {
-moz-transform:translate3d(0,
-71.5%,
0);
-ms-transform:translate3d(0,
-71.5%,
0);
-webkit-transform:translate3d(0,
-71.5%,
0);
transform:translate3d(0,
-71.5%,
0)
}
77% {
-moz-transform:translate3d(0,
-77%,
0);
-ms-transform:translate3d(0,
-77%,
0);
-webkit-transform:translate3d(0,
-77%,
0);
transform:translate3d(0,
-77%,
0)
}
82.5% {
-moz-transform:translate3d(0,
-82.5%,
0);
-ms-transform:translate3d(0,
-82.5%,
0);
-webkit-transform:translate3d(0,
-82.5%,
0);
transform:translate3d(0,
-82.5%,
0)
}
88% {
-moz-transform:translate3d(0,
-88%,
0);
-ms-transform:translate3d(0,
-88%,
0);
-webkit-transform:translate3d(0,
-88%,
0);
transform:translate3d(0,
-88%,
0)
}
93.5% {
-moz-transform:translate3d(0,
-90.5%,
0);
-ms-transform:translate3d(0,
-90.5%,
0);
-webkit-transform:translate3d(0,
-90.5%,
0);
transform:translate3d(0,
-90.5%,
0)
}
}
@-moz-keyframes grain {
0%,
100% {
-moz-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
10% {
-moz-transform:translate3d(-5%,
-10%,
0);
transform:translate3d(-5%,
-10%,
0)
}
20% {
-moz-transform:translate3d(-15%,
5%,
0);
transform:translate3d(-15%,
5%,
0)
}
30% {
-moz-transform:translate3d(7%,
-25%,
0);
transform:translate3d(7%,
-25%,
0)
}
40% {
-moz-transform:translate3d(-5%,
25%,
0);
transform:translate3d(-5%,
25%,
0)
}
50% {
-moz-transform:translate3d(-15%,
10%,
0);
transform:translate3d(-15%,
10%,
0)
}
60% {
-moz-transform:translate3d(15%,
0%,
0);
transform:translate3d(15%,
0%,
0)
}
70% {
-moz-transform:translate3d(0%,
15%,
0);
transform:translate3d(0%,
15%,
0)
}
80% {
-moz-transform:translate3d(3%,
35%,
0);
transform:translate3d(3%,
35%,
0)
}
90% {
-moz-transform:translate3d(-10%,
10%,
0);
transform:translate3d(-10%,
10%,
0)
}
}
@-webkit-keyframes grain {
0%,
100% {
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
10% {
-webkit-transform:translate3d(-5%,
-10%,
0);
transform:translate3d(-5%,
-10%,
0)
}
20% {
-webkit-transform:translate3d(-15%,
5%,
0);
transform:translate3d(-15%,
5%,
0)
}
30% {
-webkit-transform:translate3d(7%,
-25%,
0);
transform:translate3d(7%,
-25%,
0)
}
40% {
-webkit-transform:translate3d(-5%,
25%,
0);
transform:translate3d(-5%,
25%,
0)
}
50% {
-webkit-transform:translate3d(-15%,
10%,
0);
transform:translate3d(-15%,
10%,
0)
}
60% {
-webkit-transform:translate3d(15%,
0%,
0);
transform:translate3d(15%,
0%,
0)
}
70% {
-webkit-transform:translate3d(0%,
15%,
0);
transform:translate3d(0%,
15%,
0)
}
80% {
-webkit-transform:translate3d(3%,
35%,
0);
transform:translate3d(3%,
35%,
0)
}
90% {
-webkit-transform:translate3d(-10%,
10%,
0);
transform:translate3d(-10%,
10%,
0)
}
}
@keyframes grain {
0%,
100% {
-moz-transform:translate3d(0,
0,
0);
-ms-transform:translate3d(0,
0,
0);
-webkit-transform:translate3d(0,
0,
0);
transform:translate3d(0,
0,
0)
}
10% {
-moz-transform:translate3d(-5%,
-10%,
0);
-ms-transform:translate3d(-5%,
-10%,
0);
-webkit-transform:translate3d(-5%,
-10%,
0);
transform:translate3d(-5%,
-10%,
0)
}
20% {
-moz-transform:translate3d(-15%,
5%,
0);
-ms-transform:translate3d(-15%,
5%,
0);
-webkit-transform:translate3d(-15%,
5%,
0);
transform:translate3d(-15%,
5%,
0)
}
30% {
-moz-transform:translate3d(7%,
-25%,
0);
-ms-transform:translate3d(7%,
-25%,
0);
-webkit-transform:translate3d(7%,
-25%,
0);
transform:translate3d(7%,
-25%,
0)
}
40% {
-moz-transform:translate3d(-5%,
25%,
0);
-ms-transform:translate3d(-5%,
25%,
0);
-webkit-transform:translate3d(-5%,
25%,
0);
transform:translate3d(-5%,
25%,
0)
}
50% {
-moz-transform:translate3d(-15%,
10%,
0);
-ms-transform:translate3d(-15%,
10%,
0);
-webkit-transform:translate3d(-15%,
10%,
0);
transform:translate3d(-15%,
10%,
0)
}
60% {
-moz-transform:translate3d(15%,
0%,
0);
-ms-transform:translate3d(15%,
0%,
0);
-webkit-transform:translate3d(15%,
0%,
0);
transform:translate3d(15%,
0%,
0)
}
70% {
-moz-transform:translate3d(0%,
15%,
0);
-ms-transform:translate3d(0%,
15%,
0);
-webkit-transform:translate3d(0%,
15%,
0);
transform:translate3d(0%,
15%,
0)
}
80% {
-moz-transform:translate3d(3%,
35%,
0);
-ms-transform:translate3d(3%,
35%,
0);
-webkit-transform:translate3d(3%,
35%,
0);
transform:translate3d(3%,
35%,
0)
}
90% {
-moz-transform:translate3d(-10%,
10%,
0);
-ms-transform:translate3d(-10%,
10%,
0);
-webkit-transform:translate3d(-10%,
10%,
0);
transform:translate3d(-10%,
10%,
0)
}
}
@-moz-keyframes glow {
0% {
opacity:1
}
15% {
opacity:0
}
30% {
opacity:.5
}
45% {
opacity:.1
}
60% {
opacity:0
}
75% {
opacity:.4
}
90% {
opacity:.8
}
100% {
opacity:0
}
}
@-webkit-keyframes glow {
0% {
opacity:1
}
15% {
opacity:0
}
30% {
opacity:.5
}
45% {
opacity:.1
}
60% {
opacity:0
}
75% {
opacity:.4
}
90% {
opacity:.8
}
100% {
opacity:0
}
}
@keyframes glow {
0% {
opacity:1
}
15% {
opacity:0
}
30% {
opacity:.5
}
45% {
opacity:.1
}
60% {
opacity:0
}
75% {
opacity:.4
}
90% {
opacity:.8
}
100% {
opacity:0
}
}
@-moz-keyframes blur {
0% {
filter:blur(0)
}
4% {
filter:blur(1px)
}
8% {
filter:blur(3px)
}
12% {
filter:blur(0)
}
16% {
filter:blur(3px)
}
20% {
filter:blur(0)
}
100% {
filter:blur(0)
}
}
@-webkit-keyframes blur {
0% {
-webkit-filter:blur(0);
filter:blur(0)
}
4% {
-webkit-filter:blur(1px);
filter:blur(1px)
}
8% {
-webkit-filter:blur(3px);
filter:blur(3px)
}
12% {
-webkit-filter:blur(0);
filter:blur(0)
}
16% {
-webkit-filter:blur(3px);
filter:blur(3px)
}
20% {
-webkit-filter:blur(0);
filter:blur(0)
}
100% {
-webkit-filter:blur(0);
filter:blur(0)
}
}
@keyframes blur {
0% {
-webkit-filter:blur(0);
filter:blur(0)
}
4% {
-webkit-filter:blur(1px);
filter:blur(1px)
}
8% {
-webkit-filter:blur(3px);
filter:blur(3px)
}
12% {
-webkit-filter:blur(0);
filter:blur(0)
}
16% {
-webkit-filter:blur(3px);
filter:blur(3px)
}
20% {
-webkit-filter:blur(0);
filter:blur(0)
}
100% {
-webkit-filter:blur(0);
filter:blur(0)
}
}
.glitch-active {
overflow:hidden
}
.glitch-image {
-moz-transform:translate3d(0,
1em,
1em);
-webkit-transform:translate3d(0,
1em,
1em);
transform:translate3d(0,
1em,
1em);
display:block;
position:absolute;
top:0;
left:0;
z-index:11;
pointer-events:none;
height:1px;
width:1px;
overflow:hidden;
visibility:hidden
}
.glitch-active .glitch-image {
-moz-animation:glitch 0.75s steps(7) infinite;
-webkit-animation:glitch 0.75s steps(7) infinite;
animation:glitch 0.75s steps(7) infinite;
height:auto;
overflow:visible;
width:100%;
visibility:visible
}
.grain-active {
overflow:hidden
}
.grain-active:before {
-moz-transform:translate3d(0,
1em,
1em);
-webkit-transform:translate3d(0,
1em,
1em);
transform:translate3d(0,
1em,
1em);
-moz-animation:grain 3s steps(10) infinite;
-webkit-animation:grain 3s steps(10) infinite;
animation:grain 3s steps(10) infinite;
background:url("/assets/countdown/noise.png");
content:"";
display:block;
height:300%;
left:-100%;
position:absolute;
top:-100%;
width:300%;
z-index:11;
pointer-events:none
}
.film-active {
overflow:hidden
}
@media all and (min-width: 901px) {
.film-active:after {
-moz-transform:translate3d(0,
1em,
1em);
-webkit-transform:translate3d(0,
1em,
1em);
transform:translate3d(0,
1em,
1em);
-moz-animation:film 1.25s steps(18) infinite;
-webkit-animation:film 1.25s steps(18) infinite;
animation:film 1.25s steps(18) infinite;
background:url("/assets/countdown/film-scratches.png");
background-size:100% 1350%;
background-repeat:no-repeat;
content:"";
display:block;
height:1350%;
width:100%;
position:absolute;
top:0;
left:0;
z-index:11;
pointer-events:none
}
}
.glow-active:before {
-moz-transform:translate3d(0,
1em,
1em);
-webkit-transform:translate3d(0,
1em,
1em);
transform:translate3d(0,
1em,
1em);
-moz-animation:glow 4s steps(8) infinite;
-webkit-animation:glow 4s steps(8) infinite;
animation:glow 4s steps(8) infinite;
background:url("/assets/countdown/glow-flicker.png");
background-size:100%;
content:"";
display:block;
position:absolute;
height:100%;
width:100%;
left:0;
top:0;
z-index:3;
opacity:0;
pointer-events:none
}
@media all and (min-width: 901px) {
.blur-active {
-moz-animation:blur 20s linear infinite;
-webkit-animation:blur 20s linear infinite;
animation:blur 20s linear infinite
}
}
@media all and (min-width: 901px) {
.slow-shake-active {
-moz-animation:slowShake 3s linear infinite;
-webkit-animation:slowShake 3s linear infinite;
animation:slowShake 3s linear infinite
}
}
.modals {
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:0;
overflow:hidden
}
.modals.modal-container-active {
visibility:visible;
z-index:2
}
.modal {
background-color:#000;
position:absolute;
top:0;
left:0;
width:100%;
max-width:100%;
min-width:100%;
height:100%;
visibility:hidden;
opacity:0;
overflow:hidden;
-moz-transition:opacity 500ms linear,
visibility 500ms linear,
z-index 501ms linear;
-o-transition:opacity 500ms linear,
visibility 500ms linear,
z-index 501ms linear;
-webkit-transition:opacity 500ms linear,
visibility 500ms linear,
z-index 501ms linear;
transition:opacity 500ms linear,
visibility 500ms linear,
z-index 501ms linear;
z-index:1
}
.modal.modal-active {
opacity:1;
-webkit-overflow-scrolling:touch;
overflow:auto;
top:0;
left:0;
visibility:visible;
z-index:3
}
@media all and (min-width: 901px) {
.modal {
background-color:rgba(0,
0,
0,
0.9)
}
.modal .modal-btn {
top:0
}
.modal .modal-previous-btn {
top:8.9em
}
.modal .modal-next-btn {
top:4.4em
}
}
.modal-btn {
position:absolute;
top:1.5em;
right:1.5em;
width:3.3125rem;
height:3.25rem;
text-indent:-9999px
}
.modal-close-btn {
background:url("/assets/modal-youtube-close.svg")
}
.modal-previous-btn {
background:url("/assets/modal-youtube-backward.svg");
top:8.9em
}
.modal-next-btn {
background:url("/assets/modal-youtube-forward.svg");
top:4.4em
}
.modal-close-btn-animated {
border-style:solid;
border-width:4px;
background:none;
position:absolute;
width:3.3125rem;
height:3.25rem;
overflow-y:hidden;
z-index:1
}
.modal-close-btn-animated:hover .modal-close-btn-animated-text {
-moz-animation:buttonMouseOn 200ms ease-in-out;
-webkit-animation:buttonMouseOn 200ms ease-in-out;
animation:buttonMouseOn 200ms ease-in-out;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused
}
.modal-close-btn-animated-text {
background-position:center;
clip:auto;
color:transparent;
display:block;
height:0;
margin:0;
overflow:hidden;
padding:0;
text-indent:100%;
white-space:nowrap;
width:0;
width:100%;
height:100%;
text-indent:-9999px;
display:block;
position:relative;
-moz-animation:buttonMouseOff 500ms ease-out;
-webkit-animation:buttonMouseOff 500ms ease-out;
animation:buttonMouseOff 500ms ease-out;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused
}
@media all and (min-width: 901px) {
.modal-active .modal-close-btn-animated:hover .modal-close-btn-animated-text,
.modal-active .modal-close-btn-animated-text {
-moz-animation-play-state:running;
-webkit-animation-play-state:running;
animation-play-state:running
}
}
.app-header {
background-image:url("../assets/[email protected]");
-moz-backface-visibility:hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-moz-transform:translateY(70px);
-ms-transform:translateY(70px);
-webkit-transform:translateY(70px);
transform:translateY(70px);
-moz-transition:height 400ms ease,
-moz-transform 400ms ease,
opacity 1200ms ease;
-o-transition:height 400ms ease,
-o-transform 400ms ease,
opacity 1200ms ease;
-webkit-transition:height 400ms ease,
-webkit-transform 400ms ease,
opacity 1200ms ease;
transition:height 400ms ease,
transform 400ms ease,
opacity 1200ms ease;
background-color:#000;
height:69px;
left:0;
overflow:hidden;
opacity:1;
position:absolute;
top:-70px;
visibility:visible;
width:100%;
z-index:3
}
.app-header.app-header-active {
z-index:11
}
.app-header.app-header-top {
-moz-transition:height 200ms ease,
-moz-transform linear,
opacity 1200ms ease;
-o-transition:height 200ms ease,
-o-transform linear,
opacity 1200ms ease;
-webkit-transition:height 200ms ease,
-webkit-transform linear,
opacity 1200ms ease;
transition:height 200ms ease,
transform linear,
opacity 1200ms ease
}
.app-header-nav-peek .app-header {
position:fixed;
top:-140px;
-moz-transition:-moz-transform 400ms ease,
height 100ms ease,
opacity 1200ms ease;
-o-transition:-o-transform 400ms ease,
height 100ms ease,
opacity 1200ms ease;
-webkit-transition:-webkit-transform 400ms ease,
height 100ms ease,
opacity 1200ms ease;
transition:transform 400ms ease,
height 100ms ease,
opacity 1200ms ease
}
.modal-container-active.app-header-nav-peek .app-header {
visibility:hidden
}
.app-header-nav-peek-active.app-header-nav-peek .app-header {
-moz-transform:translateY(140px);
-ms-transform:translateY(140px);
-webkit-transform:translateY(140px);
transform:translateY(140px)
}
.app-header-wrapper {
box-sizing:border-box;
margin:0 auto;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
position:relative;
padding-top:70px;
overflow:hidden;
width:100%
}
@media all and (min-width: 901px) {
.app-header-wrapper {
display:-ms-flexbox;
height:auto;
-ms-flex-pack:justify;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
max-width:68.6875rem;
padding-top:0
}
}
.app-header-home-link {
display:block;
clip:auto;
color:transparent;
display:block;
height:0;
margin:0;
overflow:hidden;
padding:0;
text-indent:100%;
white-space:nowrap;
width:0;
left:0;
margin:1em;
-webkit-order:1;
order:1;
position:absolute;
padding-left:93px;
padding-bottom:40px;
top:0;
z-index:1
}
@media all and (min-width: 901px) {
.app-header-home-link {
position:relative
}
}
.app-header-presents-heading {
-webkit-order:2;
order:2;
color:#eae9e4;
display:block;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
font-size:0.875rem;
letter-spacing:.025rem;
margin-top:2em;
margin-bottom:2em;
text-align:center;
text-transform:uppercase;
opacity:0;
-moz-transition:opacity 300ms ease;
-o-transition:opacity 300ms ease;
-webkit-transition:opacity 300ms ease;
transition:opacity 300ms ease
}
@media all and (min-width: 901px) {
.app-header-presents-heading {
display:none
}
}
@media all and (max-width: 901px) {
.app-header-presents-heading {
margin-top:1em;
margin-bottom:1em
}
}
.app-header-nav {
display:-ms-flexbox;
-ms-flex:3;
-ms-flex-order:3;
-ms-flex-flow:column wrap;
display:-webkit-flex;
display:flex;
-webkit-flex:3;
flex:3;
height:auto;
margin:0;
-webkit-order:3;
order:3;
padding:0;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
width:100%;
opacity:0;
overflow:hidden;
-moz-transition:opacity 300ms ease;
-o-transition:opacity 300ms ease;
-webkit-transition:opacity 300ms ease;
transition:opacity 300ms ease
}
@media all and (min-width: 901px) {
.app-header-nav {
opacity:1
}
}
.app-header-nav-list {
list-style:none;
margin:0;
padding:0;
width:100%
}
@media all and (min-width: 901px) {
.app-header-nav-list {
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:start;
-ms-flex-align:center;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-align-items:center;
align-items:center;
height:69px;
width:auto
}
}
.app-header-subnav {
list-style:none;
margin:0;
padding:0
}
.mobile-nav-icon {
cursor:pointer;
height:0.8125rem;
width:1.875rem;
margin:0;
right:1em;
top:1.5em;
border-bottom:3px solid #fff;
border-top:3px solid #fff;
z-index:1;
position:absolute
}
.mobile-nav-icon::after {
position:absolute;
display:block;
width:100%;
border-bottom:3px solid #fff;
content:'';
top:0.3125rem
}
.app-header-nav-open .mobile-nav-icon {
border:none;
background:url("/assets/close-sm.svg");
height:1.25em;
width:1.25em;
margin-right:.25em
}
@media all and (min-width: 901px) {
.mobile-nav-icon {
display:none
}
}
.app-header-nav-item {
box-sizing:border-box;
font-family:"futura-pt",
sans-serif;
font-weight:bold;
font-size:0.75rem;
letter-spacing:0.1875rem;
list-style:none;
margin:0;
padding:0 1.0625rem;
overflow:hidden;
text-transform:uppercase;
width:100%
}
@media all and (min-width: 901px) {
.app-header-nav-item {
display:-ms-inline-flexbox;
display:-webkit-inline-flex;
display:inline-flex;
padding:0;
position:relative;
overflow:visible;
width:auto
}
}
.app-header-nav-item-section-link {
border-top:2px solid #eae9e4;
box-sizing:border-box;
color:#fff;
display:block;
margin:0;
padding:1em 2em;
position:relative;
font-size:0.875rem;
text-align:center;
text-decoration:none;
transition:color .75s;
width:100%;
z-index:1
}
.app-header-nav-item:nth-last-child(2) .app-header-nav-item-section-link {
border-bottom:5px solid #eae9e4
}
.app-header-nav-item:first-child .app-header-nav-item-section-link {
border-width:5px
}
.app-header-nav-item-games .app-header-nav-item-section-link {
border-width:5px
}
@media all and (max-width: 901px) {
.app-header-nav-item-announcement-pre-order .app-header-nav-item-section-link {
clip:auto;
color:transparent;
display:block;
height:0;
margin:0;
overflow:hidden;
padding:0;
text-indent:100%;
white-space:nowrap;
width:0;
width:100%;
border-top:0
}
}
@media all and (min-width: 901px) {
.app-header-nav-item-section-link {
padding:1em 1.25em .75em;
font-size:0.75rem;
width:auto;
border:none
}
.app-header-nav-item-section-link:after {
content:' ';
display:block;
margin-top:0.25rem;
height:2px;
width:0;
-moz-transition:width 300ms ease-in,
background-color 300ms ease-in;
-o-transition:width 300ms ease-in,
background-color 300ms ease-in;
-webkit-transition:width 300ms ease-in,
background-color 300ms ease-in;
transition:width 300ms ease-in,
background-color 300ms ease-in
}
.app-header-nav-item-section-link:hover:after {
background-color:#fff;
width:100%
}
.app-header-nav-item:nth-last-child(2) .app-header-nav-item-section-link {
border:none
}
}
.app-header-nav-item-section-link:active {
color:#faed7b
}
@media all and (min-width: 901px) {
.app-header-nav-item-pre-order.app-header-nav-item {
display:none
}
}
@media all and (min-width: 901px) {
.app-header-nav-item-active .app-header-nav-item-section-link:after {
content:"";
background-color:#fff;
display:block;
height:2px;
position:relative;
width:100%
}
}
.nav-heading {
color:#eae9e4;
display:block;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
font-size:1em;
letter-spacing:0.1875rem;
margin-bottom:1em;
text-align:center;
text-transform:uppercase
}
.app-header-nav-open .page,
.app-header-nav-open .app-footer,
.app-header-nav-open .vt-footer {
position:absolute;
top:0;
left:0;
display:none;
height:100%;
overflow:hidden
}
.app-header-nav-open .app,
.app-header-nav-open .app-header {
height:100%;
overflow:auto
}
.app-header-nav-open .app-header-nav,
.app-header-nav-open .app-header-presents-heading {
opacity:1
}
.app-header-nav-open .mobile-nav-icon:after {
display:none
}
.app-header-subnav-social {
box-sizing:border-box;
display:block;
list-style:none;
left:0;
margin:0 auto;
padding:2em 1em;
max-width:400px;
overflow:hidden
}
@media all and (min-width: 901px) {
.app-header-subnav-social {
background-color:#ecebe8;
background-image:url("../assets/[email protected]");
margin:0;
max-width:none;
bottom:auto;
left:auto;
padding:1em 0 0
}
}
.app-header-subnav-social-links {
display:-webkit-flex;
display:flex;
-webkit-justify-content:space-between;
justify-content:space-between
}
@media all and (min-width: 901px) {
.app-header-subnav-social-links {
width:350px;
margin:0 auto;
padding-bottom:1em
}
}
.app-header-subnav-social-network {
display:inline-block;
margin:0;
text-align:center
}
.app-header-subnav-social-network:first-of-type {
margin-left:0
}
.app-header-subnav-social-copy-text {
color:#333;
display:block;
font-family:"schoolbook-web",
serif;
font-size:0.75rem;
margin-top:4px;
letter-spacing:0.25px;
text-align:center;
width:100%;
visibility:hidden
}
.app-header-subnav-social-copy-text:first-child {
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
text-transform:uppercase;
font-size:0.875rem;
letter-spacing:normal;
margin-top:0;
margin-bottom:4px;
visibility:visible
}
@media all and (max-width: 901px) {
.app-header-subnav-social-copy-text:first-child {
color:#eae9e4;
letter-spacing:.025rem;
margin-top:0
}
}
@media all and (min-width: 901px) {
.app-header-subnav-social-copy-text {
visibility:visible
}
}
.app-header-nav-item-social.app-header-nav-item .app-header-nav-item-section-link {
border-top:none;
display:none
}
@media all and (min-width: 901px) {
.app-header-nav-item-social-active.app-header {
height:197px;
border-bottom:3px solid #000
}
.app-header-nav-item-social.app-header-nav-item .app-header-nav-item-section-link {
display:block
}
.app-header-subnav-social {
visibility:visible
}
}
.app-header-subnav-social-network-link {
display:inline-block;
opacity:1;
overflow:visible;
-moz-transition:opacity 300ms ease;
-o-transition:opacity 300ms ease;
-webkit-transition:opacity 300ms ease;
transition:opacity 300ms ease
}
.app-header-subnav-social-network-link:hover {
opacity:0.8
}
@media all and (min-width: 901px) {
.app-header-subnav-social-network-link.youtube-icon {
background:url("/assets/icons/youtube-black-circle.svg");
width:45px;
height:45px;
background-size:100%
}
.app-header-subnav-social-network-link.twitter-icon {
background:url("/assets/icons/twitter-black-circle.svg");
width:45px;
height:45px;
background-size:100%
}
.app-header-subnav-social-network-link.facebook-icon {
background:url("/assets/icons/facebook-black-circle.svg");
width:45px;
height:45px;
background-size:100%
}
.app-header-subnav-social-network-link.tumblr-icon {
background:url("/assets/icons/tumbler-black-circle.svg");
width:45px;
height:45px;
background-size:100%
}
.app-header-subnav-social-network-link.vine-icon {
background:url("/assets/icons/vine-black-circle.svg");
width:45px;
height:45px;
background-size:100%
}
.app-header-subnav-social-network-link.instagram-icon {
background:url("/assets/icons/instagram-black-circle.svg");
width:45px;
height:45px;
background-size:100%
}
}
.app-header-preorder-btn {
-webkit-order:3;
order:3;
border-color:#faed7b;
color:#faed7b;
display:none;
font-size:11px;
letter-spacing:.28em;
padding-left:5em;
padding-top:1em;
padding-bottom:1em;
position:absolute;
right:0;
top:1.4em;
width:auto;
overflow-y:hidden;
z-index:2
}
.app-header-preorder-btn:before {
background:url("/assets/gold-arrow.png") no-repeat 0 0;
content:"";
display:block;
height:25px;
left:1em;
position:absolute;
top:6px;
width:37px
}
@media all and (min-width: 901px) {
.app-header-preorder-btn {
display:block;
margin-right:1rem
}
}
@media all and (min-width: 1116px) {
.app-header-preorder-btn {
margin:0
}
}
.app-header-preorder-btn-text {
display:block;
position:relative;
-moz-animation:buttonMouseOff 500ms ease-out;
-webkit-animation:buttonMouseOff 500ms ease-out;
animation:buttonMouseOff 500ms ease-out
}
.app-header-preorder-btn:hover .app-header-preorder-btn-text {
-moz-animation:buttonMouseOn 200ms ease-in-out;
-webkit-animation:buttonMouseOn 200ms ease-in-out;
animation:buttonMouseOn 200ms ease-in-out
}
.app-header-announcement-text {
position:absolute;
right:0;
color:#faed7b;
font-family:"FilmotypeGlenlake",
serif;
top:1.3em;
font-size:20px;
text-transform:uppercase;
letter-spacing:.2em;
display:none
}
.app-header-locale-en-us .app-header-announcement-text,
.app-header-locale-en-gb .app-header-announcement-text {
margin-right:18.75rem;
color:#fff
}
@media all and (min-width: 901px) {
.app-header-announcement-text {
display:block;
margin-right:1rem
}
}
@media all and (min-width: 1116px) {
.app-header-announcement-text {
margin:0
}
}
.snippet {
padding:2em;
border:1px dashed #333;
position:relative
}
@media all and (min-width: 901px) {
.snippet {
padding:1em
}
}
.snippet-separator {
border-bottom:1px dashed #333;
position:relative
}
.snippet:before,
.snippet-separator:before {
content:'';
background:url("/assets/icons/scissor.svg") no-repeat;
width:64px;
height:23px;
display:inline-block;
position:absolute;
right:0;
top:-1.25em
}
.snippet-separator:before {
top:auto;
bottom:-0.6em;
-moz-transform:scale(1,
1);
-ms-transform:scale(1,
1);
-webkit-transform:scale(1,
1);
transform:scale(1,
1)
}
.tab-panel-container {
position:relative
}
.tab-panel {
left:0;
opacity:0;
position:absolute;
top:0;
transition:opacity 300ms ease-in-out,
visibility 300ms ease-in-out;
visibility:hidden;
z-index:0
}
.tab-panel.tab-panel-active {
opacity:1;
position:relative;
visibility:visible;
z-index:1
}
.simulation-platforms {
box-sizing:border-box;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:center;
justify-content:center;
-webkit-align-items:center;
align-items:center;
list-style:none;
margin:0;
padding:0 1em;
width:100%
}
.simulation-platforms-item.icon {
display:block;
margin:0 10px 10px
}
.simulation-platforms-item.icon:first-of-type {
margin-left:0
}
@media all and (max-width: 601px),
all and (min-width: 901px) and (max-width: 1099px) {
.previous-simulations-platforms .simulation-platforms-item.icon {
max-height:20px;
max-width:45px
}
}
.simulation-platforms-item-link {
display:block;
height:18px;
clip:auto;
color:transparent;
display:block;
height:0;
margin:0;
overflow:hidden;
padding:0;
text-indent:100%;
white-space:nowrap;
width:0;
width:auto
}
.spike {
background:#000 url("../assets/[email protected]");
box-sizing:border-box;
color:#fff;
text-align:center;
padding:2rem;
position:relative;
outline:2px solid #fff;
outline-offset:-1rem
}
.spike:before {
content:'';
display:block;
width:4.5em;
height:2em;
background:url("../assets/vault-tec-icon.svg") no-repeat 0;
position:absolute;
top:1.5em;
left:50%;
text-align:center;
margin-left:-2.25em
}
.spike .spike-tagline {
font-size:0.75rem;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
margin-top:3em;
letter-spacing:initial
}
.spike .spike-heading {
font-family:"futura-pt",
sans-serif;
font-size:2.2em;
line-height:1em;
margin:0 auto .5em
}
@media all and (min-width: 901px) {
.spike .spike-heading {
font-size:1.7em
}
}
.spike .spike-copy {
color:#ebeae5;
font-size:1rem;
line-height:1.25rem
}
.spike.promo-spike {
padding:0;
outline-offset:0
}
.featured-media {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
overflow:hidden;
position:relative;
width:100%
}
.featured-media.announcement-featured-media {
height:auto
}
@media all and (min-width: 800px) {
.featured-media.announcement-featured-media {
max-height:none
}
}
@media all and (min-width: 901px) {
.featured-media {
margin-bottom:3rem
}
.featured-media.module-active {
-moz-animation-play-state:running;
-webkit-animation-play-state:running;
animation-play-state:running
}
}
.featured-media.module-disabled {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused
}
.featured-media-asset-container {
overflow:hidden;
position:relative;
height:auto;
width:100%
}
.featured-media-asset-image-container {
overflow:hidden;
width:100%
}
.featured-media-asset-background-image {
position:relative;
height:auto;
width:100%
}
.featured-media-asset-text {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
-moz-transform:translate(-50%,
-50%);
-ms-transform:translate(-50%,
-50%);
-webkit-transform:translate(-50%,
-50%);
transform:translate(-50%,
-50%);
opacity:0;
left:50%;
top:50%;
height:100%;
position:absolute;
width:100%;
max-width:375px;
z-index:2;
cursor:pointer
}
@media all and (min-width: 767px) and (max-width: 1099px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
.featured-media-asset-text {
max-width:575px
}
}
@media all and (min-device-width: 901px) and (max-width: 901px) {
.featured-media-asset-text {
opacity:1;
width:50%;
height:auto
}
}
@media all and (min-width: 901px) {
.featured-media-asset-text {
opacity:1;
-webkit-filter:blur(1px);
filter:blur(1px);
height:auto;
width:75%;
max-width:450px
}
.module-active .featured-media-asset-text {
-moz-animation-play-state:running;
-webkit-animation-play-state:running;
animation-play-state:running
}
.featured-media-asset-text.slow-shake-active {
margin-left:-225px;
top:25%
}
}
@media all and (min-width: 1280px) {
.featured-media-asset-text {
max-width:705px;
max-height:600px
}
.featured-media-asset-text.slow-shake-active {
margin-left:-352px
}
}
@media all and (min-width: 1099px) and (max-height: 780px) {
.featured-media-asset-text {
max-width:620px;
max-height:572px
}
.featured-media-asset-text.slow-shake-active {
margin-left:-310px
}
}
.featured-media-asset-btn-container {
display:-webkit-flex;
display:flex;
position:absolute;
height:66px;
top:1rem;
right:1rem
}
@media all and (min-width: 1100px) {
.featured-media-asset-btn-container {
right:50%;
margin-right:-550px
}
}
.featured-media-download-asset-btn {
box-sizing:border-box;
position:relative;
display:block;
overflow:hidden;
text-indent:-9999px;
height:30px;
width:32px;
z-index:2;
-moz-box-shadow:inset 1px 1px 1px #000;
-webkit-box-shadow:inset 1px 1px 1px #000;
box-shadow:inset 1px 1px 1px #000;
border-top:1px solid #fff;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:2px solid #fff
}
@media all and (min-width: 321px) {
.featured-media-download-asset-btn:before {
background-size:percentage 0.94286
}
}
.featured-media-download-asset-btn:before {
background-image:url("/assets/icons/download-asset-button.svg");
background-repeat:no-repeat;
background-position:center;
background-size:60%;
content:'';
display:block;
position:relative;
-moz-animation:buttonMouseOff 600ms ease-out;
-webkit-animation:buttonMouseOff 600ms ease-out;
animation:buttonMouseOff 600ms ease-out;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
height:100%;
width:100%
}
.featured-media-download-asset-btn:after {
display:block;
content:'';
position:absolute;
width:100%;
height:100%;
top:0;
border-bottom:1px solid #000;
-moz-box-shadow:inset -2px -1px 1px #fff;
-webkit-box-shadow:inset -2px -1px 1px #fff;
box-shadow:inset -2px -1px 1px #fff
}
.featured-media-download-asset-btn:hover:before {
-moz-animation:buttonMouseOn 250ms ease-in-out;
-webkit-animation:buttonMouseOn 250ms ease-in-out;
animation:buttonMouseOn 250ms ease-in-out
}
@media all and (min-width: 901px) {
.featured-media-download-asset-btn {
height:66px;
width:70px
}
}
.featured-media-full-screen-btn {
box-sizing:border-box;
position:relative;
display:none;
overflow:hidden;
text-indent:-9999px;
height:66px;
width:70px;
z-index:2;
-moz-box-shadow:inset 1px 1px 1px #000;
-webkit-box-shadow:inset 1px 1px 1px #000;
box-shadow:inset 1px 1px 1px #000;
border-top:1px solid #fff;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:2px solid #fff;
margin-left:1rem
}
.featured-media-full-screen-btn:before {
background-image:url("/assets/icons/magnifying-glass.svg");
content:'';
display:block;
position:relative;
-moz-animation:buttonMouseOff 600ms ease-out;
-webkit-animation:buttonMouseOff 600ms ease-out;
animation:buttonMouseOff 600ms ease-out;
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
height:62px;
width:62px
}
.featured-media-full-screen-btn:after {
display:block;
content:'';
position:absolute;
width:100%;
height:100%;
top:0;
border-bottom:1px solid #000;
-moz-box-shadow:inset -2px -1px 1px #fff;
-webkit-box-shadow:inset -2px -1px 1px #fff;
box-shadow:inset -2px -1px 1px #fff
}
.featured-media-full-screen-btn:hover:before {
-moz-animation:buttonMouseOn 250ms ease-in-out;
-webkit-animation:buttonMouseOn 250ms ease-in-out;
animation:buttonMouseOn 250ms ease-in-out
}
@media all and (min-width: 1100px) {
.module-active .featured-media-download-asset-btn:before {
-moz-animation-play-state:running;
-webkit-animation-play-state:running;
animation-play-state:running
}
}
@media all and (min-width: 901px) {
.featured-media-full-screen-btn-active.featured-media-full-screen-btn {
display:block
}
}
.featured-media-full-screen-btn-active.featured-media-full-screen-btn:before {
-moz-animation-play-state:running;
-webkit-animation-play-state:running;
animation-play-state:running
}
.announcement-featured-media .featured-media-full-screen-btn.featured-media-full-screen-btn-active {
display:none
}
.featured-media-asset-video-container {
display:block;
height:100%;
left:0;
position:absolute;
top:0;
width:100%
}
.featured-media-asset-video-container::after {
content:"";
display:block;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1
}
.featured-media-asset-video-container iframe {
width:100%;
height:100%;
position:relative;
z-index:0
}
.featured-media-asset-image {
-moz-animation:none;
-webkit-animation:none;
animation:none
}
@media all and (min-width: 901px) {
.featured-media-asset-image {
-moz-animation:featuredVideoPan 400s infinite;
-webkit-animation:featuredVideoPan 400s infinite;
animation:featuredVideoPan 400s infinite;
height:auto;
width:auto;
z-index:1
}
.modal-container-active .featured-media-asset-image {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused
}
}
.featured-media-asset-video-modal {
height:100%;
width:100%
}
.featured-media-asset-video-modal.modal-active {
background-color:#000;
-moz-transform:translateX(0) translateY(0) scale(1);
-ms-transform:translateX(0) translateY(0) scale(1);
-webkit-transform:translateX(0) translateY(0) scale(1);
transform:translateX(0) translateY(0) scale(1)
}
@media all and (min-width: 901px) {
.featured-media-asset-video-modal.modal-active {
background-color:rgba(0,
0,
0,
0.9)
}
}
.featured-media-asset-video-modal .featured-media-asset-video-container {
display:table;
height:auto;
max-width:56.25rem;
margin:auto;
left:0;
position:absolute;
top:50%;
right:0;
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
vertical-align:middle;
width:100%
}
@media all and (min-width: 901px) {
.featured-media-asset-video-modal .featured-media-asset-video-container {
width:80%
}
}
.featured-media-asset-video-modal .featured-media-asset-video-container:after {
content:none
}
.featured-media-asset-video-modal .video-wrapper {
position:relative;
width:100%
}
.featured-media-asset-video-modal .video-wrapper:after {
content:'';
display:block;
padding-top:56.25%
}
.featured-media-asset-video-modal iframe {
bottom:0;
height:100%;
left:0;
position:absolute;
right:0;
top:0;
width:100%;
z-index:2
}
.featured-media-asset-video-modal .modal-btn.modal-close-btn-animated {
border-color:#fff;
top:-52px;
right:0
}
@media all and (min-width: 901px) {
.featured-media-asset-video-modal .modal-btn.modal-close-btn-animated {
top:0;
right:-75px
}
}
.featured-media-asset-video-modal .modal-close-btn-animated-text {
background-image:url("/assets/icons/close-white.svg");
background-repeat:no-repeat
}
.spotlight-split-item:first-child {
margin-right:1.875rem;
padding-right:1.875rem;
border-right:3px solid #000
}
.section-heading {
border-top:3px solid transparent;
border-bottom:3px solid transparent;
box-sizing:border-box;
display:block;
font-size:0.75rem;
padding:1.0625rem;
width:100%;
max-width:1100px;
text-transform:uppercase
}
.section-heading.section-heading-dark {
border-color:#000
}
.section-heading.section-heading-light {
border-color:#fff;
color:#fff
}
.section-heading-inline-nav-wrap {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around
}
.section-heading-inline-nav-wrap .section-heading {
-webkit-flex:4;
flex:4
}
.section-heading-inline-nav {
list-style:none;
display:-webkit-flex;
display:flex;
padding:.75em 0;
margin:0
}
.section-heading-inline-nav-item {
padding:0
}
.section-heading-inline-nav-item:last-child {
border-right:3px solid #000
}
.section-heading-inline-nav-item-btn.standard-btn {
border-width:3px;
border-right:0;
padding:1.5em 2em;
color:inherit;
font-size:0.75rem
}
.tab-button-active .section-heading-inline-nav-item-btn.standard-btn {
background:#000 url("../assets/[email protected]");
color:#fff;
border-color:inherit
}
.media-view {
text-align:center;
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d
}
.media-view iframe {
position:relative;
display:inline-block;
width:100%;
height:500px;
max-width:100%
}
.media-view-wrapper {
left:0;
height:auto;
max-width:56.25rem;
margin:auto;
position:absolute;
right:0;
top:50%;
text-align:center;
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
vertical-align:middle;
width:100%
}
.media-view-panels {
height:auto;
position:relative;
width:100%
}
@media all and (min-width: 901px) {
.media-view-panels {
height:auto
}
}
.media-view-btn-container {
position:absolute;
height:10em;
width:5em;
right:0;
top:-3.25rem;
z-index:2
}
.media-view-close-btn {
right:0;
top:0
}
@media all and (min-width: 901px) {
.media-view-close-btn {
right:1.5em
}
}
.media-view-next-btn,
.media-view-prev-btn {
display:none
}
@media all and (min-width: 901px) {
.media-view-next-btn,
.media-view-prev-btn {
display:block
}
}
@media all and (min-width: 901px) {
.media-view-download .modal-btn.media-view-next-btn,
.media-view-download .modal-btn.media-view-prev-btn {
display:none
}
}
.media-view-download .media-view-caption-text-copy {
display:none
}
.media-view-panel {
height:0;
left:0;
opacity:0;
overflow:hidden;
top:-32px;
-moz-transition:all 300ms ease;
-o-transition:all 300ms ease;
-webkit-transition:all 300ms ease;
transition:all 300ms ease;
width:100%;
z-index:0
}
.media-view-panel.media-view-panel-active {
height:100%;
opacity:1;
overflow:auto;
z-index:1
}
.media-view-asset-image {
width:100%;
max-width:900px;
position:relative
}
.media-view-caption {
height:4em;
display:-webkit-flex;
display:flex;
margin-top:-0.5em;
width:100%;
z-index:2
}
.media-view-asset-container-video .media-view-caption {
display:none
}
.media-view-caption-text {
padding:0 0 0 1em;
-webkit-flex:3;
flex:3;
color:#fff;
text-align:left;
background-color:#000
}
.media-view-caption-text-title {
display:inline-block;
text-transform:uppercase;
font-family:"futura-pt",
sans-serif;
letter-spacing:0.1875rem;
margin-bottom:.25em;
font-size:0.75rem;
padding-top:1.5em
}
.media-view-caption-text-copy {
color:#fff;
margin:0;
font-size:12px
}
.media-view-social-links {
-webkit-flex:1;
flex:1;
-webkit-order:2;
order:2;
height:auto;
padding:1em 0 0;
background-color:#000
}
.media-view-subnav-social-network-link {
background:none;
color:#fff;
display:inline-block;
font-family:"futura-pt",
sans-serif;
letter-spacing:0.1875rem;
text-transform:uppercase;
text-indent:-9999px;
width:100%;
margin:0
}
.media-view-subnav-social-network-link.twitter-icon {
background:url("../assets/icons/icons.png") -35px -247px;
width:35px;
height:35px
}
.media-view-subnav-social-network-link.facebook-icon {
background:url("../assets/icons/icons.png") -175px -247px;
width:35px;
height:35px
}
@media all and (min-width: 901px) {
.media-view-btn-container {
top:0;
right:-5em
}
.media-view-btn-container .modal-btn {
display:block
}
.media-view-subnav-social-network-link {
margin:0 .5em
}
.media-view-wrapper {
width:56.25rem;
max-width:80%;
margin:0 auto;
height:auto
}
.media-view-panel {
height:0
}
.media-view-panel.media-view-panel-active {
height:auto
}
.media-view-asset-image {
transform:none
}
}
.media-view-download-link {
background-image:url("/assets/modal-download.svg");
background-position:50%;
background-repeat:no-repeat;
background-size:30%;
background-color:#000;
display:none;
height:100%;
width:4.375rem;
margin-left:.25em;
-webkit-order:3;
order:3
}
@media all and (min-width: 901px) {
.media-view-download-link {
display:block
}
}
.media-view-download-dropdown-list {
background:#000;
display:none;
position:absolute;
list-style:none;
margin:0;
right:0;
width:12em;
padding:1em;
z-index:-1;
overflow-y:hidden;
opacity:0;
height:0;
bottom:4.25em;
-moz-transition:all 200ms ease;
-o-transition:all 200ms ease;
-webkit-transition:all 200ms ease;
transition:all 200ms ease
}
@media all and (min-width: 901px) {
.media-view-download-dropdown-list {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
height:69px
}
}
.media-view-download-dropdown-list.media-view-download-dropdown-list-active {
height:16em;
opacity:1
}
.media-view-download-dropdown-list-item {
border-top:0.0625rem solid #eae9e4;
color:#fff;
font-family:"futura-pt",
sans-serif;
letter-spacing:0.1875rem;
text-align:center;
text-transform:uppercase;
width:100%
}
.media-view-download-dropdown-list-item .media-view-download-dropdown-list-item-section-link {
color:#fff;
display:block;
position:relative;
text-decoration:none;
transition:color .75s;
width:100%;
z-index:1;
margin:0;
line-height:normal;
padding:1em 0;
border-width:0.0625rem;
font-size:0.75rem
}
.media-view-download-dropdown-list-item:first-child {
border-width:0.1875rem
}
.media-view-download-dropdown-list-item:last-child {
border-bottom:0.1875rem solid #eae9e4
}
.announcement-preorder {
max-width:1100px;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
padding:1rem
}
@media all and (min-width: 1099px) {
.announcement-preorder {
padding:2rem 0 0;
margin:2rem auto 4em;
overflow:visible
}
}
.announcement-preorder-content {
padding-top:2em
}
@media all and (min-width: 901px) {
.announcement-preorder-content {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
padding-top:3em
}
}
.announcement-preorder-summary {
-webkit-flex:2;
flex:2;
position:relative
}
.announcement-preorder-summary .announcement-preorder-summary-image {
width:100%;
z-index:1;
position:relative;
top:-5em
}
@media all and (min-width: 901px) {
.announcement-preorder-summary .announcement-preorder-summary-image {
top:10em;
width:55%;
left:14em
}
}
.announcement-preorder-summary .announcement-preorder-copy-wrapper {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
position:absolute;
bottom:1em;
z-index:2
}
@media all and (min-width: 901px) {
.announcement-preorder-summary .announcement-preorder-copy-wrapper {
bottom:-2em
}
}
.announcement-preorder-summary .announcement-preorder-copy {
-webkit-flex:4 30%;
flex:4 30%;
margin:0
}
.announcement-preorder-summary .announcement-preorder-title-image {
width:100%
}
@media all and (min-width: 901px) {
.announcement-preorder-summary .announcement-preorder-title-image {
margin-left:1em;
position:absolute;
z-index:2;
width:70%
}
}
.announcement-preorder-summary .preorder-form {
position:relative;
top:-2em
}
@media all and (min-width: 901px) {
.announcement-preorder-summary .preorder-form {
position:absolute;
top:auto;
bottom:-1em
}
}
@media all and (min-width: 901px) {
.announcement-preorder-summary {
padding:0 0 1.5em
}
}
.announcement-preorder-aside {
width:100%;
height:0;
padding-bottom:162%;
position:relative;
background-image:url("/assets/announcement-preorder/announcement-preorder-aside-banner.jpg");
background-repeat:no-repeat;
background-size:100%;
margin:auto
}
.announcement-preorder-aside .youtube-icon {
background:url("/assets/announcement-preorder/announcement-preorder-aside-youtube-logo.png") 50% 50% no-repeat;
background-size:50%
}
.announcement-preorder-aside .twitch-icon {
background:url("/assets/announcement-preorder/announcement-preorder-aside-twitch-logo.png") 50% 50% no-repeat;
background-size:50%
}
@media all and (min-width: 901px) {
.announcement-preorder-aside {
max-width:310px;
height:500px;
padding:0
}
}
.announcement-preorder-aside-links {
position:absolute;
bottom:0;
height:16%;
width:100%;
display:-webkit-flex;
display:flex
}
.announcement-preorder-aside-link {
clip:auto;
color:transparent;
display:block;
height:0;
margin:0;
overflow:hidden;
padding:0;
text-indent:100%;
white-space:nowrap;
width:0;
-webkit-flex:1;
flex:1;
height:auto;
-moz-transition:opacity 300ms ease;
-o-transition:opacity 300ms ease;
-webkit-transition:opacity 300ms ease;
transition:opacity 300ms ease
}
.announcement-preorder-aside-link:hover {
opacity:0.5
}
.preorder-blimp-btn {
color:#000;
margin:1rem auto 0;
width:18em;
border-width:2px;
letter-spacing:0.09375rem;
font-size:0.7em;
font-weight:600;
padding-top:12px
}
.preorder-blimp-btn .preorder-blimp-icon {
width:70px;
height:52px;
left:-6.5em;
top:-.5em;
-moz-transform:scale(0.7,
0.7);
-ms-transform:scale(0.7,
0.7);
-webkit-transform:scale(0.7,
0.7);
transform:scale(0.7,
0.7)
}
@media all and (min-width: 901px) {
.preorder-blimp-btn {
display:none
}
}
.newsletter-promo-module {
display:-ms-flexbox;
-ms-flex-flow:column wrap;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
max-width:1100px;
padding:1rem
}
@media all and (min-width: 1099px) {
.newsletter-promo-module {
padding:0 0 0.25rem
}
}
.newsletter-promo-module-header {
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:start;
-ms-flex-align:center;
-ms-flex:4;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
-webkit-flex:4;
flex:4;
margin:1.5625rem 0 0.5rem
}
.newsletter-promo-module-header:before,
.newsletter-promo-module-header:after {
border:0;
border-bottom:3px solid #000;
width:100%;
position:relative;
padding:0;
margin:auto;
display:-ms-flexbox;
-ms-flex:4;
-webkit-flex:4;
flex:4;
content:''
}
.newsletter-promo-module-header-text {
display:block;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
font-size:0.875rem;
margin:0 1em;
text-transform:uppercase
}
@media all and (min-width: 901px) {
.newsletter-promo-module-header-text {
margin-right:2em;
margin-left:2em
}
}
.newsletter-promo-module-content {
padding:1rem;
margin-bottom:0.5rem;
background:#000 url("/assets/[email protected]");
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:start;
-ms-flex-align:center;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
position:relative
}
@media all and (min-width: 901px) {
.newsletter-promo-module-content {
padding-left:2em;
padding-right:2em
}
}
.newsletter-promo-module-content:before {
background-image:url("/assets/newsletter-sign-up-tower.svg");
background-repeat:no-repeat;
width:100%;
height:100%;
content:"";
display:block;
position:absolute;
margin:auto;
right:1em;
background-position:100% 0;
max-width:50px;
background-size:90%
}
@media all and (min-width: 901px) {
.newsletter-promo-module-content:before {
top:0;
background-position:50%;
background-size:inherit;
right:0;
width:100%;
max-width:none
}
}
.newsletter-promo-module-text {
box-sizing:border-box;
color:#eae9e4;
display:block;
font-family:"schoolbook-web",
serif;
font-size:14px;
line-height:1.3em;
margin:0 0 1em;
min-height:2.25rem;
padding-right:5rem;
width:100%
}
@media all and (min-width: 901px) {
.newsletter-promo-module-text {
min-height:0;
margin:.4rem 0 0;
width:50%
}
}
.newsletter-promo-module-form {
box-sizing:border-box;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
position:relative;
text-align:right;
padding-right:100px;
width:100%
}
@media all and (min-width: 901px) {
.newsletter-promo-module-form {
padding-left:5rem;
padding-right:130px;
width:50%
}
}
.newsletter-promo-module-form-field-input {
border:none;
border-radius:0;
display:inline-block;
font-family:"schoolbook-web",
serif;
font-size:12px;
height:30px;
line-height:29px;
padding:0 10px;
width:100%
}
.newsletter-promo-module-form-field-input:-moz-placeholder {
color:#000
}
.newsletter-promo-module-form-field-input::-moz-placeholder {
color:#000
}
.newsletter-promo-module-form-field-input:-ms-input-placeholder {
color:#000
}
.newsletter-promo-module-form-field-input::-webkit-input-placeholder {
color:#000
}
.newsletter-promo-module-form-label.form-label {
clip:auto;
color:transparent;
display:block;
height:0;
margin:0;
overflow:hidden;
padding:0;
text-indent:100%;
white-space:nowrap;
width:0
}
.newsletter-promo-module-form-signup-btn.standard-btn {
box-sizing:content-box;
border-color:#fff;
cursor:pointer;
font-size:10px;
height:10px;
line-height:10px;
padding:8px 0;
position:absolute;
right:0;
top:0;
width:100px;
overflow-y:hidden
}
.newsletter-promo-locale-ru .newsletter-promo-module-form-signup-btn.standard-btn {
padding:8px;
font-size:7px
}
@media all and (min-width: 901px) {
.newsletter-promo-module-form-signup-btn.standard-btn {
width:130px
}
}
.newsletter-promo-module-form-signup-btn-text {
display:block;
position:relative;
-moz-animation:buttonMouseOff 600ms ease-out;
-webkit-animation:buttonMouseOff 600ms ease-out;
animation:buttonMouseOff 600ms ease-out
}
.newsletter-promo-module-form-signup-btn:hover .newsletter-promo-module-form-signup-btn-text {
-moz-animation:buttonMouseOn 200ms ease-in-out;
-webkit-animation:buttonMouseOn 200ms ease-in-out;
animation:buttonMouseOn 200ms ease-in-out
}
.promo-feature {
max-width:1100px;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
padding:1rem
}
@media all and (min-width: 1099px) {
.promo-feature {
padding:2rem 0 0;
margin:2rem auto 4em;
overflow:visible
}
}
@media all and (min-width: 901px) {
.promo-feature-content {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
margin-bottom:3em
}
}
.promo-feature-summary {
-webkit-flex:2;
flex:2;
position:relative
}
.promo-feature-summary .promo-feature-summary-image {
width:100%;
z-index:1;
position:relative;
top:-9em
}
@media all and (min-width: 901px) {
.promo-feature-summary .promo-feature-summary-image {
top:2em;
width:90%;
left:3em
}
}
.promo-feature-summary .promo-feature-copy-wrapper {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
position:absolute;
bottom:1em;
z-index:2
}
@media all and (min-width: 901px) {
.promo-feature-summary .promo-feature-copy-wrapper {
bottom:-2em
}
}
.promo-feature-summary .promo-feature-copy {
-webkit-flex:4 30%;
flex:4 30%;
margin:0
}
.promo-feature-summary .promo-feature-title-image {
margin-left:-1em;
width:100%
}
@media all and (min-width: 901px) {
.promo-feature-summary .promo-feature-title-image {
position:absolute;
z-index:2;
width:50%
}
}
.promo-feature-summary .standard-btn {
-webkit-flex:1 20%;
flex:1 20%;
margin:0 13em;
background:none;
color:#000
}
@media all and (min-width: 901px) {
.promo-feature-summary .standard-btn {
display:table
}
}
@media all and (max-width: 901px) {
.promo-feature-summary .promo-feature-copy {
-webkit-flex:1 100%;
flex:1 100%;
margin:3em 0 1em;
line-height:1.5rem
}
.promo-feature-summary .standard-btn {
-webkit-flex:4 100%;
flex:4 100%;
margin:0 6em;
min-width:11.0625rem
}
}
@media all and (min-width: 901px) {
.promo-feature-summary {
padding:0 0 1.5em
}
}
.promo-feature-merchandise {
max-width:278px;
max-height:500px;
position:relative;
top:2rem;
outline-offset:-1rem
}
.promo-feature-merchandise .promo-feature-merchandise-heading {
font-size:1.5625rem;
font-family:"futura-pt",
sans-serif;
margin:0 1em 1em
}
.promo-feature-merchandise .promo-feature-merchandise-image {
display:block;
height:auto;
position:relative;
width:100%
}
@media all and (min-width: 901px) {
.promo-feature-merchandise .promo-feature-merchandise-image {
width:75%;
margin:0 auto
}
}
.promo-feature-merchandise .standard-btn {
margin:0 6em 1em;
background:none;
color:#fff;
min-width:11.0625rem
}
@media all and (min-width: 901px) {
.promo-feature-merchandise .standard-btn {
margin:auto;
-webkit-justify-content:center;
justify-content:center;
max-width:105px
}
}
.promo-feature-merchandise:before {
content:'';
display:block;
width:5.5em;
height:2em;
background:url("../assets/vault-tec-icon.svg") no-repeat 0;
background-size:100%;
position:absolute;
top:2em;
left:50%;
text-align:center;
margin-left:-2.75em
}
@media all and (max-width: 901px) {
.promo-feature-merchandise {
-webkit-flex:1 100%;
flex:1 100%;
max-width:none;
max-height:none;
margin-bottom:1em
}
.promo-feature-merchandise .promo-copy {
-webkit-flex:1 100%;
flex:1 100%;
margin:3em 0 1em
}
}
.simulation-hero {
height:570px;
padding:1rem;
position:relative;
margin-top:2.5rem;
margin-bottom:1rem;
width:100%
}
@media all and (min-width: 901px) {
.simulation-hero {
margin-top:3rem;
padding-top:3rem;
margin-bottom:3rem
}
}
@media all and (min-width: 1099px) {
.simulation-hero {
height:660px
}
}
.simulation-hero-heading {
display:block;
position:relative;
width:100%;
z-index:3;
margin:1rem auto
}
.simulation-hero-background-image {
background:#000;
display:block;
height:auto;
min-height:570px;
left:0;
position:absolute;
top:0;
width:100%;
max-width:100%;
z-index:0
}
@media all and (min-width: 901px) {
.simulation-hero-background-image {
min-width:1280px
}
}
.simulation-hero-content {
left:0;
position:absolute;
text-align:center;
top:50%;
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
width:100%;
z-index:2
}
.simulation-hero-game-logo {
width:250px;
margin-top:5rem
}
@media all and (min-width: 901px) {
.simulation-hero-game-logo {
width:auto;
margin-top:10rem
}
}
.simulation-hero-title {
color:#fff;
font-family:"futura-pt",
sans-serif;
font-weight:bold;
font-size:60px;
text-shadow:4px 3px 4px #000;
text-transform:uppercase;
display:block;
margin:0 auto
}
@media all and (min-width: 901px) {
.simulation-hero-title {
font-size:70px;
margin:1rem 0 0
}
}
.simulation-hero-copy {
color:#fff;
margin:0 2em;
font-size:15px;
line-height:1.5em
}
@media all and (min-width: 370px) {
.simulation-hero-copy {
margin:2em 2em 1em
}
}
@media all and (min-width: 901px) {
.simulation-hero-copy {
width:28em;
margin:2rem auto 1rem
}
}
.simulation-hero-more-link {
color:#faed7b;
display:block;
font-family:"futura-pt",
sans-serif;
font-size:0.75rem;
font-weight:bold;
margin-bottom:20px;
text-transform:uppercase
}
.simulation-hero-preorder-btn {
display:inline-block;
border-color:#fff;
color:#fff;
min-width:11.0625rem
}
.simulation-platforms-heading {
clip:auto;
color:transparent;
display:block;
height:0;
margin:0;
overflow:hidden;
padding:0;
text-indent:100%;
white-space:nowrap;
width:0
}
.simulation-hero-platforms {
margin:1em 0;
padding:0 2em
}
@media all and (min-width: 901px) {
.simulation-hero-platforms {
margin:3em auto;
width:30em;
position:relative
}
}
.simulation-hero-badge-image {
display:block;
margin:6rem auto 0;
width:70px
}
@media all and (min-width: 901px) {
.simulation-hero-badge-image {
width:auto;
margin:10rem auto 0
}
}
.promo-spike-module {
max-width:1100px;
padding:1rem;
position:relative
}
@media all and (min-width: 1099px) {
.promo-spike-module {
padding:0;
margin-bottom:2rem
}
}
.promo-spike:before {
display:none
}
.promo-spike-feature-image {
width:100%
}
.promo-spike-preorder-btn.standard-btn {
border-color:#fff;
font-size:8px;
padding:1em;
position:absolute;
right:2em;
bottom:50%;
-moz-transform:translateY(50%);
-ms-transform:translateY(50%);
-webkit-transform:translateY(50%);
transform:translateY(50%)
}
@media all and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1099px) {
.promo-spike-preorder-btn.standard-btn {
-moz-transform:none;
-ms-transform:none;
-webkit-transform:none;
transform:none;
bottom:20%
}
}
@media all and (min-width: 321px) {
.promo-spike-preorder-btn.standard-btn {
font-size:10px
}
}
@media all and (min-width: 901px) {
.promo-spike-preorder-btn.standard-btn {
padding:1.5em 5em;
right:4em
}
}
@media all and (min-width: 1099px) {
.promo-spike-preorder-btn.standard-btn {
right:7em
}
}
.lead-in-module {
display:-ms-flexbox;
-ms-flex-wrap:wrap;
-ms-flex-direction:column;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
max-width:1100px;
-webkit-justify-content:space-between;
justify-content:space-between;
padding:2rem 1rem 0
}
@media all and (min-width: 1099px) {
.lead-in-module {
padding:2rem 0 0
}
}
.lead-in-copy {
margin-left:1.25em;
padding-left:1.25em;
line-height:1.5em;
font-size:15px;
border-left:2px solid #333;
-ms-flex:1 1 auto;
-ms-flex-direction:row
}
.lead-in-heading {
font-size:1.375rem;
line-height:1em;
letter-spacing:.01em;
margin-top:0;
-ms-flex:0 1 auto;
-ms-flex-direction:row
}
@media all and (min-width: 901px) {
.lead-in-heading {
font-size:3rem;
margin:0 0 .5em
}
}
.lead-in-heading-subtext {
display:block;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
font-size:12px
}
@media all and (min-width: 901px) {
.lead-in-intro {
display:-ms-flexbox;
-ms-flex-direction:column;
-ms-flex:6;
text-align:left;
-webkit-flex:6;
flex:6;
-webkit-align-self:center;
align-self:center;
padding-right:2rem
}
}
.lead-in-aside {
text-align:center
}
@media all and (min-width: 901px) {
.lead-in-aside {
display:-ms-flexbox;
-ms-flex-direction:row;
-ms-flex:3;
-webkit-flex:3;
flex:3;
max-width:100%;
margin:0 0 0 1em
}
}
.lead-in-aside .lead-in-aside-image {
width:100%
}
.lead-in-aside.big-lead-in-aside {
display:-ms-flexbox;
-ms-flex-direction:row;
-ms-flex:2;
-webkit-flex:2;
flex:2;
margin:0 0.5em
}
.big-lead-in-module-wrapper {
padding:1rem 1.0625rem;
max-width:1100px;
margin:auto
}
@media all and (max-width: 901px) {
.preorder-lead-in-module .big-lead-in-module-wrapper {
padding:2rem 0.5rem
}
}
.big-lead-in-module {
padding:1rem 0
}
.big-lead-in-heading-title {
display:block;
font-family:"SouthernAire",
serif;
text-transform:none;
font-weight:normal;
line-height:.5em
}
.big-lead-in-pack-art {
width:100%
}
.big-lead-in-preorder-btn {
color:#000;
display:inline-block;
margin:0 auto;
border-width:3px
}
@media all and (min-width: 901px) {
.big-lead-in-preorder-btn {
display:block;
font-size:13px
}
}
.big-lead-in-preorder-icon {
width:70px;
height:52px;
left:-7em;
top:-5px;
-moz-transform:scale(0.7,
0.7);
-ms-transform:scale(0.7,
0.7);
-webkit-transform:scale(0.7,
0.7);
transform:scale(0.7,
0.7)
}
@media all and (min-width: 901px) {
.big-lead-in-preorder-icon {
visibility:hidden
}
}
.big-lead-in-snippet {
margin:2em 0
}
.big-lead-in-snippet:before {
top:-0.8em
}
@media all and (min-width: 901px) {
.big-lead-in-snippet {
margin-top:2em;
margin-bottom:1em;
padding-bottom:1.1em
}
}
.big-lead-in-preorder-platform-logos {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
list-style:none;
margin:2em 0 0;
padding:0;
vertical-align:middle
}
@media all and (min-width: 901px) {
.big-lead-in-preorder-platform-logos {
-webkit-justify-content:space-between;
justify-content:space-between;
margin:1.5em 0 0
}
}
.big-lead-in-preorder-platform-logo {
margin:0.5em 0.5em 0
}
.big-lead-in-preorder-platform-logo .icon {
display:inline-block
}
@media all and (min-width: 901px) {
.big-lead-in-preorder-platform-logo .icon.ps4-icon-black,
.big-lead-in-preorder-platform-logo .icon.xbox-one-icon-black {
width:80px;
height:15px
}
.big-lead-in-preorder-platform-logo .icon.pc-icon-black {
width:22px;
height:22px
}
}
@media all and (min-width: 901px) {
.big-lead-in-module-wrapper {
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:start;
-ms-flex-align:start;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
width:100%
}
}
.carousel-module {
background-color:#000;
background-image:url("../assets/[email protected]");
padding:2.5rem 1rem 1rem;
text-align:center;
width:100%
}
.carousel-module-wrapper {
margin:0 auto;
max-width:1100px;
overflow:hidden;
position:relative
}
.carousel-heading {
color:#fff;
display:inline-block;
margin:0 auto 2em;
position:relative;
text-align:center;
width:auto;
min-width:150px
}
@media all and (min-width: 901px) {
.carousel-heading {
margin-bottom:3em
}
}
.carousel-panels-wrapper {
position:relative;
margin:0 auto;
width:100%
}
.carousel-panels {
-moz-transition:-moz-transform 0.6s ease-in-out;
-o-transition:-o-transform 0.6s ease-in-out;
-webkit-transition:-webkit-transform 0.6s ease-in-out;
transition:transform 0.6s ease-in-out;
width:9999px
}
.carousel-panels:after {
clear:both;
content:'';
display:block
}
.carousel-panel {
max-width:1100px;
float:left;
opacity:0;
max-height:1px;
-moz-transition:opacity 1.4s ease,
max-height 3s ease;
-o-transition:opacity 1.4s ease,
max-height 3s ease;
-webkit-transition:opacity 1.4s ease,
max-height 3s ease;
transition:opacity 1.4s ease,
max-height 3s ease
}
.carousel-panel-active {
max-height:initial;
opacity:1
}
.carousel-panel-heading,
.carousel-panel-description {
color:#fff
}
.carousel-panel-heading {
margin:1.5em 0 0
}
.carousel-panel-description {
max-width:570px;
margin:0.5em auto 0
}
.carousel-panel-image-wrapper {
overflow:hidden;
height:280px;
width:100%;
position:relative
}
.carousel-panel-image {
width:auto;
max-width:100%;
height:auto
}
@media all and (min-width: 901px) {
.carousel-panel-image {
max-width:880px;
min-height:328px;
padding:0 60px
}
}
.carousel-arrow {
background-image:url("/assets/icons/carousel-arrow.svg");
background-repeat:no-repeat;
display:none;
color:#fff;
cursor:pointer;
height:42px;
position:absolute;
text-indent:-9999px;
opacity:1;
top:240px;
width:30px;
-moz-transition:opacity 0.6s ease;
-o-transition:opacity 0.6s ease;
-webkit-transition:opacity 0.6s ease;
transition:opacity 0.6s ease
}
@media all and (min-width: 901px) {
.carousel-arrow {
display:block
}
.carousel-arrow:hover {
opacity:0.8
}
}
.carousel-arrow-left {
left:50px
}
.carousel-arrow-right {
right:50px;
-moz-transform:rotate(180deg);
-ms-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform:rotate(180deg)
}
.carousel-arrow-disabled {
opacity:0.2;
cursor:default
}
.carousel-nav {
margin:0;
padding:1.5em 0 1em;
position:relative;
text-align:center
}
@media all and (min-width: 901px) {
.carousel-nav {
padding-top:2em;
padding-bottom:2em
}
}
.carousel-nav-item {
cursor:pointer;
display:inline-block;
padding:5px;
vertical-align:middle
}
.carousel-nav-item:before {
border-radius:50%;
border:1px solid #fff;
content:'';
display:block;
height:6px;
width:6px
}
.carousel-nav-item-active:before {
background-color:#fff;
height:10px;
width:10px
}
.more-simulations-module {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
max-width:1100px;
-webkit-justify-content:space-between;
justify-content:space-between
}
@media all and (max-width: 1099px) {
.more-simulations-module {
padding:1rem
}
}
@media all and (min-width: 901px) {
.more-simulations-module {
margin-bottom:2em
}
}
.more-simulations-feature {
position:relative;
width:100%;
text-align:center
}
@media all and (max-width: 901px) {
.more-simulations-feature:first-of-type {
border-bottom:2px solid #000;
padding-bottom:2em;
margin-bottom:1em
}
}
@media all and (min-width: 901px) {
.more-simulations-feature {
text-align:right;
width:45%
}
.more-simulations-feature:first-of-type::after {
background:#000 url("../assets/[email protected]");
height:90%;
width:3px;
content:'';
display:block;
position:absolute;
bottom:2.5em;
right:-1em
}
}
.more-simulations-feature-image {
max-width:100%
}
@media all and (min-width: 901px) {
.more-simulations-feature-image {
max-width:none;
max-height:360px
}
}
.more-simulations-copy-wrapper {
text-align:left;
top:-1em;
position:relative
}
@media all and (min-width: 901px) {
.more-simulations-copy-wrapper {
top:-2em
}
}
.more-simulations-copy-text {
width:100%
}
@media all and (min-width: 901px) {
.more-simulations-copy-text {
width:85%
}
}
.more-simulations-feature-heading {
font-size:2.25rem;
letter-spacing:normal;
line-height:2.5625rem;
margin:0
}
@media all and (min-width: 901px) {
.more-simulations-feature-heading {
font-size:2.5625rem
}
}
.more-simulations-feature-series-title {
font-family:"SouthernAire",
serif;
font-size:1em;
font-weight:normal;
line-height:0.45em;
letter-spacing:normal;
text-transform:none;
display:block
}
.more-simulations-buttons {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:flex-start;
justify-content:flex-start
}
@media all and (min-width: 901px) {
.more-simulations-buttons {
width:70%
}
}
.more-simulations-btn {
display:block;
width:49%;
max-width:15em;
position:relative
}
.more-simulations-btn:first-of-type {
margin-right:.5em
}
@media all and (min-width: 901px) {
.more-simulations-btn {
width:43%;
margin:0 1rem 0 0
}
}
.app-footer {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
display:none;
background:#ecebe8 url("../assets/[email protected]") repeat
}
@media all and (min-width: 901px) {
.app-footer {
padding:0
}
}
.app-footer.app-footer-active {
display:block
}
.app-footer-header {
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:start;
-ms-flex-align:center;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
max-width:1100px;
text-align:center;
font-size:0.875rem;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
text-transform:uppercase;
padding:1rem;
-webkit-flex:4;
flex:4;
width:100%;
box-sizing:border-box
}
@media all and (min-width: 901px) {
.app-footer-header {
margin:1.5625rem auto 0.5rem
}
}
@media all and (min-width: 1099px) {
.app-footer-header {
padding:0
}
}
.app-footer-header .vt-icon {
display:block;
margin:0 2em
}
@media all and (max-width: 420px) {
.app-footer-header .vt-icon {
-moz-transform:scale(0.75,
0.75);
-ms-transform:scale(0.75,
0.75);
-webkit-transform:scale(0.75,
0.75);
transform:scale(0.75,
0.75)
}
}
.app-footer-header:before,
.app-footer-header:after {
border:0;
border-bottom:3px solid #000;
width:100%;
position:relative;
padding:0;
margin:auto;
display:-ms-flexbox;
-ms-flex:4;
-webkit-flex:4;
flex:4;
content:''
}
.app-footer-list-wrapper {
box-sizing:border-box;
margin:-0.5em auto auto;
list-style:none;
display:-ms-flexbox;
-ms-flex-direction:row;
-ms-flex-wrap:nowrap;
-ms-flex-pack:justify;
-ms-flex-align:start;
-webkit-justify-content:space-between;
justify-content:space-between;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
max-width:1100px;
padding:0 1em;
width:100%;
-webkit-align-items:flex-start;
align-items:flex-start
}
@media all and (min-width: 901px) {
.app-footer-list-wrapper {
-webkit-flex-direction:row;
flex-direction:row;
margin:0 auto
}
}
@media all and (min-width: 1099px) {
.app-footer-list-wrapper {
padding:0 0 1em
}
}
.app-footer-list {
font-family:"futura-pt",
sans-serif;
list-style:none;
text-transform:uppercase;
line-height:1.3em;
border-bottom:2px solid #000;
width:100%;
padding:0;
text-align:center
}
.app-footer-list:first-of-type {
margin-top:-.5em
}
.app-footer-list:nth-last-of-type(2) {
border-bottom-width:3px
}
.app-footer-list:last-of-type {
border:none
}
@media all and (min-width: 901px) {
.app-footer-list {
border:none;
width:auto;
padding:0.4rem;
text-align:left;
display:-ms-flexbox;
-ms-flex-item-align:baseline;
-ms-flex:1;
-webkit-flex:1;
flex:1
}
.app-footer-list:first-of-type {
margin-top:0
}
}
@media all and (min-width: 901px) {
.app-footer-list-goods,
.app-footer-list-social,
.app-footer-list-other {
display:block
}
}
.app-footer-list-goods .app-footer-list-item-link,
.app-footer-list-social .app-footer-list-item-link,
.app-footer-list-other .app-footer-list-item-link {
font-weight:bold
}
.app-footer-list-other .app-footer-split-list {
display:block;
margin-top:.75em
}
@media all and (min-width: 901px) {
.app-footer-list-other .app-footer-split-list {
margin-top:0
}
}
.app-footer-list-other .app-footer-list-item {
display:inline;
position:relative;
font-size:.5rem;
padding-left:1.25em
}
@media all and (max-width: 420px) {
.app-footer-list-other .app-footer-list-item {
padding-left:.75em
}
}
@media all and (min-width: 901px) {
.app-footer-list-other .app-footer-list-item {
display:block;
padding:0;
font-size:0.75rem
}
}
.app-footer-list-other .app-footer-list-item:before {
position:relative;
content:'';
display:inline-block;
height:.3em;
width:.3em;
background:#000;
border-radius:100%;
left:-.4em;
top:-.25em
}
@media all and (min-width: 420px) {
.app-footer-list-other .app-footer-list-item:before {
left:-.65em
}
}
@media all and (min-width: 901px) {
.app-footer-list-other .app-footer-list-item:before {
visibility:hidden;
display:none
}
}
.app-footer-list-item:first-of-type:before {
display:none
}
.app-footer-list-social {
border:none
}
.app-footer-list-social .app-footer-list-subhead:first-child {
display:none
}
.app-footer-list-support.app-footer-list {
display:block
}
@media all and (min-width: 901px) {
.app-footer-list-support.app-footer-list {
display:none
}
}
.app-footer-split-list {
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:start;
-ms-flex-align:center;
align-content:flex-start;
-webkit-flex-flow:column;
flex-flow:column;
justify-content:space-around;
line-height:1.375rem;
list-style:none;
margin:0;
padding:0;
display:none
}
@media all and (min-width: 901px) {
.app-footer-split-list {
display:-ms-flexbox;
display:-webkit-inline-flex;
display:inline-flex;
justify-content:flex-start
}
}
.app-footer-list-subhead,
.app-footer-list-item {
width:100%;
font-size:0.75rem
}
.app-footer-list-subhead,
.app-footer-list-subhead-link {
color:#000;
font-family:"futura-pt",
sans-serif;
font-size:0.75rem;
font-weight:bold;
text-transform:uppercase;
text-decoration:none
}
.app-footer-list-subhead-link {
box-sizing:border-box;
display:block;
padding:1em;
width:100%
}
@media all and (min-width: 901px) {
.app-footer-list-subhead-link {
padding:0;
display:inline;
position:relative
}
.app-footer-list-subhead-link:after {
content:' ';
display:block;
margin-top:0.25rem;
height:2px;
width:0;
-moz-transition:width 300ms ease-in,
background-color 300ms ease-in;
-o-transition:width 300ms ease-in,
background-color 300ms ease-in;
-webkit-transition:width 300ms ease-in,
background-color 300ms ease-in;
transition:width 300ms ease-in,
background-color 300ms ease-in
}
.app-footer-list-subhead-link:hover:after {
background-color:#000;
width:100%
}
.app-footer-list-subhead-link:after {
position:absolute;
bottom:-2px;
left:0
}
}
.app-footer-list-item.app-footer-list-subhead {
height:1.375rem
}
.app-footer-list-item-link {
font-family:"futura-pt",
sans-serif;
text-decoration:none;
color:inherit;
position:relative
}
@media all and (min-width: 901px) {
.app-footer-list-item-link:after {
content:' ';
display:block;
margin-top:0.25rem;
height:2px;
width:0;
-moz-transition:width 300ms ease-in,
background-color 300ms ease-in;
-o-transition:width 300ms ease-in,
background-color 300ms ease-in;
-webkit-transition:width 300ms ease-in,
background-color 300ms ease-in;
transition:width 300ms ease-in,
background-color 300ms ease-in
}
.app-footer-list-item-link:hover:after {
background-color:#000;
width:100%
}
.app-footer-list-item-link:after {
position:absolute;
bottom:-2px;
left:0
}
}
.app-footer-copyright {
box-sizing:border-box;
margin:0 auto;
list-style:none;
max-width:1100px;
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:start;
-ms-flex-align:center;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
text-transform:uppercase;
padding:1em;
-webkit-align-items:center;
align-items:center;
width:100%
}
@media all and (min-width: 1099px) {
.app-footer-copyright {
padding:0
}
}
.app-footer-copyright:before,
.app-footer-copyright:after {
border:0;
border-bottom:3px solid #000;
width:100%;
border-style:dotted;
border-bottom-width:2px;
position:relative;
content:'';
display:block
}
@media all and (min-width: 901px) {
.app-footer-copyright:before,
.app-footer-copyright:after {
border-style:solid;
border-bottom-width:3px
}
}
.app-footer-copyright-item {
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:start;
-ms-flex-align:center;
-ms-flex:3;
-webkit-flex:3 100%;
flex:3 100%;
padding:.5em 0 0;
display:-webkit-flex;
display:flex;
-webkit-align-items:center;
align-items:center
}
.app-footer-copyright-item:first-of-type {
margin:.5em 0
}
@media all and (min-width: 901px) {
.app-footer-copyright-item {
margin:.25em 0;
padding:.5em;
display:-ms-flexbox;
-ms-flex:1;
-webkit-flex:1;
flex:1
}
.app-footer-copyright-item:first-of-type {
margin:0
}
.app-footer-copyright-item:last-of-type {
padding:0 0 0 1.5em;
border-left:2px dotted #000;
display:-ms-flexbox;
-ms-flex:4;
-webkit-flex:4;
flex:4
}
}
.app-footer-copyright-icon {
display:inline-block
}
.app-footer-copyright-icon.icon.esrb-privacy-icon-large {
width:107px;
height:40px;
margin:0 .5em 0 0;
background-size:100%
}
@media all and (min-width: 901px) {
.app-footer-copyright-icon.icon.esrb-privacy-icon-large {
width:160px;
height:60px;
margin:0 1em 0 0
}
}
.app-footer-copyright-icon.icon.esrb-rating-icon-large {
width:80px;
height:40px;
margin:0 .5em 0 0;
background-size:100%
}
@media all and (min-width: 901px) {
.app-footer-copyright-icon.icon.esrb-rating-icon-large {
width:120px;
height:60px;
margin:0 1em 0 0
}
}
.app-footer-copyright-icon.icon.beth-soft-icon {
width:110px;
height:1.0625rem;
margin:0 .5em 0 0
}
.app-footer-copyright-icon.icon.beth-studios-icon {
width:74px;
height:35px;
margin:0 1em 0 0
}
.app-footer-copyright-text {
font-family:"futura-pt",
sans-serif;
font-size:0.625rem;
padding:0;
-ms-flex-direction:row;
-ms-flex:0 1 auto
}
@media all and (min-width: 901px) {
.app-footer-copyright-text {
line-height:1em;
padding:0;
margin:.9em 0;
font-weight:600
}
}
.app-footer-copyright-logos {
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:start;
-ms-flex-align:center;
-ms-flex-direction:row;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:initial;
justify-content:initial;
box-sizing:border-box;
list-style:none;
margin:0 auto 1em;
max-width:1100px;
padding:1rem;
vertical-align:middle;
width:100%
}
@media all and (min-width: 901px) {
.app-footer-copyright-logos {
margin-top:1.5em;
margin-bottom:2em
}
}
@media all and (min-width: 1099px) {
.app-footer-copyright-logos {
padding:0
}
}
.app-footer-copyright-logo {
display:-ms-inline-flexbox;
-ms-flex:0 1 auto;
-ms-flex-align:center;
display:-webkit-inline-flex;
display:inline-flex
}
.app-footer-copyright-logo:first-of-type {
-ms-flex:47%;
-webkit-flex:1 47%;
flex:1 47%;
margin-bottom:1.5em;
max-width:150px;
margin-left:.25em;
margin-right:.25em
}
@media all and (min-width: 480px) {
.app-footer-copyright-logo:first-of-type {
margin-bottom:0
}
}
.app-footer-copyright-logo:nth-of-type(2) {
-webkit-justify-content:flex-start;
justify-content:flex-start;
margin-bottom:1.5em
}
@media all and (max-width: 480px) {
.app-footer-copyright-logo:nth-of-type(2) {
-webkit-flex:1 45%;
flex:1 45%
}
}
@media all and (min-width: 480px) {
.app-footer-copyright-logo:nth-of-type(2) {
margin-bottom:0
}
}
.app-footer-copyright-logo .rating-2-icon {
padding-bottom:1.5em
}
@media all and (max-width: 480px) {
.app-footer-copyright-logo .rating-2-icon {
-webkit-flex:none;
flex:none
}
}
@media all and (min-width: 480px) {
.app-footer-copyright-logo .rating-2-icon {
padding:0
}
}
.app-footer-copyright-logo .icon {
display:inline-block;
margin:0 .25em;
-ms-flex-pack:center;
-ms-flex-align:center;
-webkit-align-self:center;
align-self:center
}
.app-footer-copyright-logo .rating-icon {
max-height:46px;
background-size:contain
}
@media all and (min-width: 768px) {
.app-footer-copyright-logo:first-of-type,
.app-footer-copyright-logo:nth-of-type(2) {
margin:0
}
}
@media all and (min-width: 901px) {
.app-footer-copyright-logo {
margin:0 .5em;
-ms-flex:0 1 auto;
-webkit-flex:initial;
flex:initial;
max-width:none
}
.app-footer-copyright-logo:first-of-type,
.app-footer-copyright-logo:nth-of-type(2) {
-ms-flex:0 1 auto;
-webkit-flex:initial;
flex:initial
}
.app-footer-copyright-logo .rating-icon {
background-position:50%
}
}
.app-footer-locale-de-de .app-footer-copyright-logo:nth-of-type(2) {
flex:none
}
.vt-footer {
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:center;
-ms-flex-align:center;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
background:#000 url("../assets/[email protected]");
box-sizing:border-box;
color:#fff;
padding:1rem;
padding-bottom:2rem;
width:100%
}
@media all and (min-width: 901px) {
.vt-footer {
padding-bottom:10.9375rem;
padding-top:1.875rem
}
}
.vt-footer-copy {
font-family:"schoolbook-web",
serif;
color:#fff;
font-size:0.75rem;
line-height:1.25rem;
text-align:justify;
padding:0;
position:relative;
width:100%;
max-width:1100px
}
.vt-footer-heading {
font-family:"futura-pt",
sans-serif;
font-size:0.625rem;
font-weight:bold;
letter-spacing:0.1875rem;
text-transform:uppercase
}
@media all and (max-width: 420px) {
.vt-footer-heading {
font-size:8px
}
.vt-footer-heading:first-child {
border-right:1px solid #fff;
padding-right:1rem
}
}
.vt-wrap {
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:start;
-ms-flex-align:center;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:initial;
justify-content:initial;
max-width:1100px;
list-style:none;
margin:0;
padding:0 0 .75em;
width:100%;
border-bottom:3px solid #fff
}
.app-footer-locale-en-us .vt-item:last-child {
display:block
}
.vt-item {
margin-right:1rem;
-webkit-align-self:center;
align-self:center
}
.vt-item:last-child {
display:none;
margin-right:0;
border-left:1px solid #fff;
padding-left:2em
}
.vt-item .icon {
-moz-transform:scale(0.8,
0.8);
-ms-transform:scale(0.8,
0.8);
-webkit-transform:scale(0.8,
0.8);
transform:scale(0.8,
0.8)
}
.vt-item .vt-footer-heading-tel {
color:#fff;
text-decoration:none
}
@media all and (max-width: 420px) {
.vt-item {
margin-right:0
}
.vt-item:nth-of-type(2) {
margin-right:1.5em
}
}
.special-module {
position:relative
}
@media all and (min-width: 901px) {
.special-module {
padding-left:0;
padding-right:0;
padding-top:4rem
}
}
.special-module-wrapper {
margin:0 auto;
max-width:1100px;
padding:0 1rem
}
.special-module-asset-container {
position:relative
}
.special-module-text {
display:block;
margin:0 auto;
position:relative;
width:100%;
max-width:370px
}
.special-video-wrapper {
background-image:url("/assets/special/special-module-projector-bg-desktop.png");
border-bottom:5px solid #000;
position:relative
}
.special-video-wrapper-top {
width:83%;
margin-top:14%;
margin-left:9%;
box-sizing:border-box;
position:absolute;
vertical-align:middle;
top:0
}
.special-video-wrapper-middle {
width:100%;
padding-bottom:75%
}
.fallout-3-special-module .special-video-wrapper {
background-image:url("/assets/special/special-module-tv-bg-desktop.png")
}
.fallout-3-special-module .special-video-wrapper-top {
width:72%
}
.special-module-play-btn {
position:absolute;
right:50%;
top:50%;
margin-top:-40px;
margin-right:-40px;
transition:opacity 200ms ease-in-out,
visibility 200ms ease-in-out;
opacity:0;
visibility:hidden;
z-index:1
}
.special-module-has-video .special-module-play-btn {
opacity:1;
visibility:visible
}
.special-video-player-active .special-module-play-btn {
opacity:0;
visibility:hidden
}
.special-cover-image {
height:auto;
left:0;
opacity:0;
position:absolute;
top:0;
transition:opacity 200ms ease-in-out,
visibility 200ms ease-in-out;
visibility:hidden;
width:100%
}
.special-cover-image.special-cover-image-active {
opacity:1;
visibility:visible
}
.special-video-player-active .special-cover-image {
opacity:0;
visibility:hidden
}
.special-video-player {
display:block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
background:#ebeae5
}
.special-video-player iframe {
display:block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0
}
.special-video-player-active iframe {
z-index:3
}
.special-link-wrap {
position:relative;
-webkit-flex:2;
flex:2;
padding:2em
}
.special-links {
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
text-transform:uppercase;
font-size:20px;
margin:0 auto;
max-width:333px;
padding:0;
text-align:center
}
@media all and (min-width: 901px) {
.special-links {
font-size:22px;
max-width:250px
}
}
.special-link {
display:inline-block;
list-style:none;
margin:.1rem 0;
padding:.3rem 2rem .3rem 1rem;
position:relative;
text-align:left;
width:80%;
-moz-transition:width,
0.5s;
-o-transition:width,
0.5s;
-webkit-transition:width,
0.5s;
transition:width,
0.5s
}
@media all and (min-width: 901px) {
.special-link {
width:60%
}
}
.special-link::after {
content:'';
display:block;
position:absolute;
width:0;
top:0;
left:0;
-moz-transition:width,
0.5s;
-o-transition:width,
0.5s;
-webkit-transition:width,
0.5s;
transition:width,
0.5s
}
.special-link::before {
content:'';
display:block;
position:absolute;
height:0%;
width:0;
right:110%;
-moz-transition:all,
0.6s;
-o-transition:all,
0.6s;
-webkit-transition:all,
0.6s;
transition:all,
0.6s
}
.special-link:hover,
.special-active-link {
color:#fff;
cursor:pointer
}
.special-link:hover span,
.special-active-link span {
position:relative;
z-index:2
}
.special-link:hover .hilite,
.special-active-link .hilite {
color:#faed7b;
padding:0
}
.special-link:hover::before,
.special-active-link::before {
border-top:.9em solid transparent;
border-bottom:.9em solid transparent;
border-left:0.5em solid #000;
right:-.5em;
top:0
}
.special-link:hover::after,
.special-active-link::after {
width:100%;
height:100%;
background:#000 url("../assets/[email protected]")
}
.special-link:hover .special-link-highlighted-text,
.special-active-link .special-link-highlighted-text {
-moz-transition:all,
0.6s;
-o-transition:all,
0.6s;
-webkit-transition:all,
0.6s;
transition:all,
0.6s;
color:#faed7b
}
@media all and (min-width: 901px) {
.special-module-asset-container {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
position:relative;
-webkit-justify-content:flex-start;
justify-content:flex-start;
height:37.5rem
}
.special-module-text {
-webkit-order:1;
order:1;
height:155px;
width:331px;
margin-top:4.5em
}
.special-video-wrapper {
-webkit-flex:1 40%;
flex:1 40%;
-webkit-order:2;
order:2;
margin-left:2.5rem;
border:0
}
.special-link-wrap {
position:absolute;
top:14em
}
}
.special-module-asset-video-modal {
text-align:center;
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d
}
.special-module-asset-video-modal div {
height:100%;
width:100%
}
.special-module-asset-video-modal iframe {
position:relative;
top:50%;
transform:translateY(-50%);
display:inline-block;
max-width:100%
}
.previous-simulations-module {
margin:auto;
max-width:1100px;
padding:1rem;
position:relative;
width:100%
}
@media all and (min-width: 1099px) {
.previous-simulations-module {
padding:2rem 0
}
}
.previous-simulations-module-content {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-between;
justify-content:space-between;
width:100%
}
.previous-simulations-module-link {
width:100%;
margin-bottom:20px;
position:relative
}
@media all and (min-width: 901px) {
.previous-simulations-module-link {
margin-bottom:32px;
width:48%
}
.previous-simulations-module-link .previous-simulations-module-link:nth-child(odd) {
margin-right:32px
}
}
.previous-simulations-module-image {
position:relative;
z-index:0;
width:100%
}
.previous-simulations-platforms {
position:absolute;
bottom:1.5em;
left:0;
z-index:1
}
.add-ons-module {
width:100%;
position:relative;
background:#000 url("/assets/[email protected]")
}
.add-ons-module-wrapper {
padding:2rem 1rem 0;
max-width:1100px;
margin:auto
}
@media all and (min-width: 901px) {
.add-ons-module-wrapper {
padding-top:2rem
}
}
.add-on-list {
padding:0;
color:#fff;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-between;
justify-content:space-between;
list-style:none
}
@media all and (min-width: 901px) {
.add-on-list {
-webkit-justify-content:space-between;
justify-content:space-between
}
}
.add-on-list .standard-btn {
background-color:#fff;
color:#000;
font-weight:bold;
display:inline-block
}
.add-on-item {
box-sizing:border-box;
display:block;
height:auto;
margin-bottom:3em;
padding-left:1em;
padding-right:1em;
text-align:center;
width:100%
}
@media all and (min-width: 901px) {
.add-on-item {
margin:0 auto;
width:30%;
padding-left:0;
padding-right:0
}
}
.add-on-cover-art {
width:100%
}
@media all and (min-width: 901px) {
.add-on-cover-art {
max-width:238px;
padding-left:0;
padding-right:0
}
}
.add-on-title {
font-size:0.6875rem;
margin-top:3em
}
.add-on-summary {
font-size:0.8125rem;
color:#fff;
margin-bottom:2em
}
.add-ons-module-asset-container {
position:relative;
height:38.125rem;
-webkit-justify-content:flex-start;
justify-content:flex-start
}
@media all and (min-width: 901px) {
.add-on-list-single {
margin:6em 0
}
.add-on-list-single .add-on-item {
display:-ms-flexbox;
-ms-flex-flow:row wrap;
-ms-flex-pack:start;
-ms-flex-align:start;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
padding:0;
width:100%
}
.add-on-list-single .add-on-image {
border:1px dashed #d9d9d9;
display:-ms-flexbox;
-ms-flex-direction:row;
-ms-flex:2;
-webkit-flex:2;
flex:2;
margin:0 8em 0 1em;
padding:1.5em;
position:relative;
width:auto
}
.add-on-list-single .add-on-image:before {
content:'';
background:url("/assets/icons/scissor.svg") no-repeat;
width:64px;
height:23px;
display:inline-block;
position:absolute;
right:0;
top:-1.25em
}
.add-on-list-single .add-on-copy {
display:-ms-flexbox;
-ms-flex-direction:column;
-ms-flex:6;
text-align:left;
-webkit-flex:6;
flex:6;
-webkit-align-self:center;
align-self:center;
padding-right:2rem
}
.add-on-list-single .add-on-title {
font-size:3em;
margin:0
}
.add-on-list-single .add-on-summary {
font-size:15px
}
}
.media-module-more-btn {
display:none;
margin:0 auto
}
.media-module-btn-active {
display:block
}
.media-module {
width:100%;
position:relative
}
.media-module-wrapper {
padding:2rem 1rem 0;
max-width:1100px;
margin:auto
}
.media-featured-item-container {
margin-bottom:1em
}
@media all and (min-width: 901px) {
.media-featured-item-container {
margin-bottom:0
}
}
.media-featured-item-text-image {
display:block;
width:100%;
max-width:550px;
margin:0 auto
}
.media-module-inline-nav {
display:none
}
@media all and (min-width: 901px) {
.media-module-inline-nav {
display:inherit
}
}
.media-module-item {
cursor:pointer;
display:block;
height:auto;
margin-bottom:1em;
text-align:center;
position:relative;
width:48%
}
@media all and (min-width: 901px) {
.media-module-item {
width:23%;
margin-right:2%;
margin-bottom:2em;
-webkit-order:2;
order:2
}
.media-module-item:nth-of-type(1) {
-webkit-order:1;
order:1
}
}
.media-module-panel {
right:0
}
@media all and (min-width: 901px) {
.media-module-panel {
padding-top:60px
}
.media-module-panel:first-of-type .media-module-panel {
max-width:48%
}
}
.media-module-panel:first-of-type {
margin-left:0
}
.media-module-panel:first-of-type .media-module-item {
width:100%;
margin-left:0
}
.media-module-panel:first-of-type .media-module-more-btn {
display:none
}
.media-module-panel:first-of-type .media-module-item:nth-child(odd) {
padding:0
}
@media all and (min-width: 901px) {
.media-module-panel:first-of-type .media-module-item,
.media-module-panel:first-of-type .media-featured-item-container {
width:48%;
margin-bottom:2em
}
}
.media-module-inner-panel {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:flex-start;
justify-content:flex-start;
color:#fff;
list-style:none;
padding:0
}
@media all and (min-width: 901px) {
.media-module-inner-panel {
margin-right:-2%
}
}
.media-module-item-image {
width:100%
}
.media-module-play-btn {
background-position:center;
bottom:0;
left:0;
margin:auto;
padding:0;
position:absolute;
right:0;
top:0;
text-indent:-9999px;
width:77px;
max-width:50%;
max-height:50%
}
.media-module-dropdown {
display:-webkit-flex;
display:flex
}
.media-module-dropdown .dropdown-wrapper {
margin-bottom:1rem;
width:100%
}
.media-module-dropdown .form-dropdown-container {
background:#000 url("/assets/[email protected]")
}
.media-module-dropdown .form-dropdown-container:before {
content:none
}
.media-module-dropdown .form-dropdown-value {
border-right:1px solid #fff;
line-height:1rem
}
@media all and (min-width: 901px) {
.media-module-dropdown {
display:none
}
}
.media-module-panel-fetching-more .media-module-more-btn {
-moz-animation:rotatePageLoadCog 4.5s linear infinite;
-webkit-animation:rotatePageLoadCog 4.5s linear infinite;
animation:rotatePageLoadCog 4.5s linear infinite;
-moz-animation-play-state:running;
-webkit-animation-play-state:running;
animation-play-state:running;
background-image:url("/assets/cog.svg");
background-color:transparent;
background-size:contain;
border:none;
height:40px;
text-indent:-9999px;
-moz-transition:opacity 600ms ease-in-out;
-o-transition:opacity 600ms ease-in-out;
-webkit-transition:opacity 600ms ease-in-out;
transition:opacity 600ms ease-in-out;
width:40px
}
.simulation-media-text-image {
margin-top:0.5em
}
@media all and (min-width: 901px) {
.simulation-media-text-image {
-webkit-order:1;
order:1;
margin-right:2%;
margin-top:-2em
}
}
@media all and (min-width: 901px) {
.goodie-bag-featured-item {
display:block;
align-self:center;
-webkit-order:2;
order:2
}
.goodie-bag-featured-item+.media-module-item {
-webkit-order:1;
order:1
}
.goodie-bag-featured-item .media-featured-item-text-image {
display:block;
max-width:440px;
margin:0 auto
}
}
.goodie-bag-item {
position:relative
}
.goodie-bag-download-wrapper {
opacity:0;
position:absolute;
top:0;
left:0;
right:0;
bottom:4px;
background-color:rgba(0,
0,
0,
0.9);
-moz-transition:opacity 0.3s ease-in-out;
-o-transition:opacity 0.3s ease-in-out;
-webkit-transition:opacity 0.3s ease-in-out;
transition:opacity 0.3s ease-in-out;
width:100%;
height:100%
}
.goodie-bag-download-wrapper:hover {
opacity:1
}
.goodie-bag-download-btn {
border-color:#fff;
color:#fff;
display:inline-block;
top:50%;
position:relative;
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
margin:auto;
padding-left:40px
}
.goodie-bag-download-btn:before {
background-image:url("/assets/icons/download-asset-button.svg");
background-repeat:no-repeat;
background-position:center;
background-size:contain;
content:'';
display:block;
position:absolute;
height:15px;
left:20px;
width:15px
}
.social-media-feed {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
flex-flow:column wrap;
max-width:1100px;
padding:0 1rem 1rem;
-webkit-justify-content:space-between;
justify-content:space-between
}
@media all and (min-width: 901px) {
.social-media-feed {
-webkit-flex-flow:row wrap;
flex-flow:row wrap
}
}
@media all and (min-width: 1099px) {
.social-media-feed {
padding:0
}
}
.social-media-feed .section-heading-inline-nav-wrap {
width:100%
}
.social-media-feed-section-heading-inline-nav {
display:none
}
.social-media-feed-section-heading-inline-nav.social-media-feed-section-heading-inline-nav-active {
display:-webkit-flex;
display:flex
}
.social-media-feed-dropdown {
margin:.5em 0 .25em;
width:100%
}
.social-media-feed-dropdown .form-dropdown-container {
background:#fff;
height:2em;
padding-right:48px
}
.social-media-feed-dropdown .form-dropdown-container:before {
border:none;
height:2.25rem;
width:3rem;
right:0;
top:0;
background:#000;
z-index:inherit
}
.social-media-feed-dropdown .form-dropdown-option {
padding:1em
}
@media all and (min-width: 901px) {
.social-media-feed-dropdown .form-dropdown-option {
display:block
}
}
@media all and (min-width: 901px) {
.social-media-feed-spike {
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-order:1;
order:1;
width:28%
}
.social-media-feed-spike .spike.spike-heading {
font-size:2.5em
}
}
.social-media-feed-networks {
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-between;
justify-content:space-between;
display:-webkit-flex;
display:flex;
list-style:none;
margin:2em auto 3em;
max-width:400px;
padding:0 2em
}
.social-media-feed-networks .social-media-feed-network {
box-sizing:border-box;
display:-webkit-flex;
display:flex;
width:30%;
min-width:35px;
text-align:center;
padding:1em 0 .5em
}
@media all and (min-width: 901px) {
.social-media-feed-networks {
margin:2em 1.5em 3em;
padding:0
}
}
.social-media-feed-network-link {
margin:0 auto;
min-width:35px;
-moz-transition:opacity 300ms ease;
-o-transition:opacity 300ms ease;
-webkit-transition:opacity 300ms ease;
transition:opacity 300ms ease
}
.social-media-feed-network-link:hover {
opacity:0.5
}
.social-media-feed-panels {
background:#fff;
box-sizing:border-box;
height:auto;
min-height:200px;
width:100%;
position:relative
}
@media all and (min-width: 901px) {
.social-media-feed-panels {
border:1rem solid transparent;
-webkit-order:2;
order:2;
width:70%
}
}
.social-media-feed-panels-container {
height:auto;
width:100%
}
.social-media-feed-panels-container:before {
background:url("/assets/texture-cog-dark.png") no-repeat center center;
content:' ';
display:block;
height:92px;
margin-left:-45px;
margin-top:-45px;
left:50%;
top:50%;
position:absolute;
width:92px;
-moz-animation:rotatePageLoadCog 4.5s linear infinite;
-webkit-animation:rotatePageLoadCog 4.5s linear infinite;
animation:rotatePageLoadCog 4.5s linear infinite;
visibility:visible;
z-index:10
}
.social-media-feed-panels-container.social-media-feed-panels-container-active:before {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
visibility:hidden
}
.social-media-feed-panel {
background:#fff;
opacity:0;
height:0;
transition:opacity 300ms ease-in-out,
visibility 300ms ease-in-out;
visibility:hidden;
width:100%;
position:relative;
z-index:1;
pointer-events:none
}
.social-media-feed-panel.social-media-feed-panel-active {
height:auto;
opacity:1;
overflow-x:hidden;
pointer-events:all;
visibility:visible;
z-index:2
}
#twitter-widget-0 {
margin:0 !important;
width:100% !important
}
.instagram-media {
max-width:100% !important
}
.vine-embed {
display:block;
margin:0 auto
}
.fb_iframe_widget {
width:100%
}
.fb_iframe_widget iframe[style],
.fb_iframe_widget span[style] {
width:100% !important
}
.survival-guide-module {
margin:0 auto;
padding:1em 1rem 4rem
}
@media all and (min-width: 901px) {
.survival-guide-module {
padding-bottom:2rem
}
}
.survival-guide-module-wrapper {
padding:0;
max-width:1100px;
margin:0 auto
}
.survival-guide-module-image {
display:block;
height:auto;
margin-bottom:0.4em;
width:100%
}
.survival-guide-module-content {
margin-top:3em;
padding:0 0 1px;
position:relative;
width:100%
}
.survival-guide-module-content.snippet:before {
display:none
}
.survival-guide-module-copy {
margin:0;
padding:0
}
.survival-guide-separator.snippet-separator {
position:initial;
margin:1rem 0
}
.survival-guide-separator.snippet-separator:before {
background-image:url("/assets/icons/scissor-full.svg");
background-position:bottom;
background-size:60%;
bottom:-0.85em;
height:15px;
right:2em
}
.survival-guide-separator:last-of-type {
display:none
}
.survival-guide-module-panel-heading {
font-family:"futura-pt-condensed",
sans-serif;
font-weight:500;
font-size:27px;
letter-spacing:0.04em;
line-height:34px;
margin:0 0 2rem
}
@media all and (min-width: 901px) {
.survival-guide-module-panel-heading {
font-size:34px
}
}
.survival-guide-module-inner-heading {
display:block;
width:auto;
position:relative;
margin:-1.4em 2rem 1rem;
background:#000 url("/assets/[email protected]")
}
.survival-guide-module-inner-heading:before,
.survival-guide-module-inner-heading:after {
content:'';
border-top:22px solid transparent;
border-bottom:22px solid transparent;
display:block;
position:absolute;
top:0;
bottom:0
}
.survival-guide-module-inner-heading:after {
width:0;
height:0;
border-left:18px solid #000;
right:-1.1em
}
.survival-guide-module-inner-heading:before {
width:0;
height:0;
border-right:18px solid #000;
left:-1.1em
}
.survival-guide-module-inner-subheading {
display:block;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:500;
font-size:12px;
padding:0.4rem 1rem 0;
position:relative;
text-align:left
}
@media all and (min-width: 901px) {
.survival-guide-module-inner-subheading:after {
content:'';
background-image:url("/assets/icons/star-black.svg");
background-position:center;
display:block;
height:20px;
margin:5px auto 0;
width:20px
}
}
.survival-guide-module-inner-content {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column wrap;
flex-flow:column wrap
}
.survival-guide-module-panel {
position:relative;
padding:0 1rem 1rem
}
.survival-guide-module-panel-subheading {
display:block;
font-family:"futura-pt",
sans-serif;
font-size:1em;
font-weight:bold;
margin-bottom:0.6rem;
text-transform:uppercase
}
.survival-guide-module-inner-heading-text {
color:#ecebe8;
font-family:"FilmotypeGlenlake",
serif;
font-size:2.2rem;
display:block;
letter-spacing:0.05em;
text-align:center;
text-transform:uppercase;
width:100%;
padding-top:.25em
}
.survival-guide-module-figure {
font-family:"futura-pt",
sans-serif;
font-size:.5rem;
font-weight:bold;
position:absolute;
right:1rem;
text-transform:uppercase
}
.survival-guide-module-panel:first-of-type .survival-guide-module-figure {
top:12rem
}
.survival-guide-module-figure:nth-of-type(2) {
top:4.5rem
}
.survival-guide-module-figure-letter {
font-size:2rem
}
@media all and (min-width: 901px) {
.survival-guide-module-inner-content {
-webkit-flex-flow:row wrap;
flex-flow:row wrap
}
.survival-guide-separator {
display:none
}
.survival-guide-module-inner-heading {
height:6.25rem;
top:-3.1rem;
margin:0 9rem
}
.survival-guide-module-inner-heading:before,
.survival-guide-module-inner-heading:after {
border-top-width:50px;
border-bottom-width:50px
}
.survival-guide-module-inner-heading:before {
border-right-width:40px;
left:-2.5rem
}
.survival-guide-module-inner-heading:after {
border-left-width:40px;
right:-2.5rem
}
.survival-guide-module-inner-subheading {
text-align:center;
margin:-3rem 0 2rem
}
.survival-guide-module-inner-heading-text {
font-size:110px;
padding-top:6px
}
.survival-guide-module-content {
margin-top:6rem
}
.survival-guide-module-content.snippet:before {
display:block;
left:1.5rem;
top:-0.8rem
}
.survival-guide-module-panel {
box-sizing:border-box;
width:50%;
padding:0 2em
}
.survival-guide-module-panel:first-child {
border-right:2px solid #000;
margin-bottom:1.4em;
padding-bottom:0.6em
}
.survival-guide-module-panel:first-of-type .survival-guide-module-figure {
top:18rem;
right:3rem
}
.survival-guide-module-figure:nth-of-type(2) {
top:7.5rem;
right:3rem
}
}
.newsletter-page {
background:rgba(0,
0,
0,
0.8);
box-sizing:border-box;
height:100%;
width:100%;
overflow:auto
}
.newsletter-iframe {
left:0;
top:0;
opacity:0;
position:absolute;
visibility:hidden
}
.newsletter-page-form-wrapper {
height:100%;
margin:0 auto;
left:0;
position:relative;
top:0;
max-width:900px;
width:100%;
overflow:visible
}
.newsletter-page-form-wrapper .form-field {
position:relative;
display:block;
margin:2em 0
}
.newsletter-page-form-wrapper .form-text-field-input {
background-color:#fff;
box-sizing:border-box
}
.newsletter-page-form-wrapper .form-field:first-of-type {
margin-top:1.5rem
}
@media all and (min-width: 901px) {
.newsletter-page-form-wrapper {
padding-right:6em
}
}
.newsletter-page-close-btn.modal-close-btn-animated {
border-color:#000;
right:2em;
top:2em
}
@media all and (min-width: 901px) {
.newsletter-page-close-btn.modal-close-btn-animated {
border-color:#fff;
right:0;
top:3em
}
}
.newsletter-page-close-btn.modal-close-btn-animated .modal-close-btn-animated-text {
background-image:url("/assets/icons/close-black.svg");
background-repeat:no-repeat
}
@media all and (min-width: 901px) {
.newsletter-page-close-btn.modal-close-btn-animated .modal-close-btn-animated-text {
background-image:url("/assets/icons/close-white.svg")
}
}
.newsletter-page-form-field-platforms .form-field-divider {
margin-bottom:.5rem
}
.newsletter-page-form-field-platforms .form-checkbox-label {
display:-webkit-inline-flex;
display:inline-flex;
width:32%
}
.newsletter-page-form {
box-sizing:border-box;
display:block;
height:100%;
left:0;
opacity:1;
position:absolute;
top:0;
-moz-transition:translate 100ms linear,
opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear;
-o-transition:translate 100ms linear,
opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear;
-webkit-transition:translate 100ms linear,
opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear;
transition:translate 100ms linear,
opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear;
overflow:visible;
width:100%;
z-index:1
}
@media all and (min-width: 901px) {
.newsletter-page-form {
height:auto;
max-width:900px;
padding:2em 0
}
.newsletter-page-form .form-field:first-of-type {
margin-top:.25rem
}
}
.newsletter-page-form-success .newsletter-page-form,
.newsletter-page-form-error .newsletter-page-form {
opacity:0;
display:none;
z-index:0
}
@media all and (min-width: 901px) {
.newsletter-page-form.form-error {
-moz-animation:shake 300ms ease;
-webkit-animation:shake 300ms ease;
animation:shake 300ms ease
}
}
.newsletter-page-success-content,
.newsletter-page-error-content {
box-sizing:border-box;
position:absolute;
opacity:0;
left:0;
top:0;
visibility:hidden;
height:100%;
min-height:690px;
z-index:0;
width:100%;
margin:0 auto;
-moz-transition:opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear;
-o-transition:opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear;
-webkit-transition:opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear;
transition:opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear
}
.newsletter-page-success-content .newsletter-page-success-footer-copy.newsletter-page-success-footer-copy-long-form,
.newsletter-page-success-content .newsletter-page-error-footer-copy.newsletter-page-error-footer-copy-long-form,
.newsletter-page-error-content .newsletter-page-success-footer-copy.newsletter-page-success-footer-copy-long-form,
.newsletter-page-error-content .newsletter-page-error-footer-copy.newsletter-page-error-footer-copy-long-form {
display:none
}
@media all and (min-width: 901px) {
.newsletter-page-success-content,
.newsletter-page-error-content {
height:auto;
max-width:900px;
margin-top:2rem;
position:absolute
}
.newsletter-page-success-content .newsletter-page-success-footer .newsletter-page-success-footer-copy,
.newsletter-page-success-content .newsletter-page-error-footer .newsletter-page-error-footer-copy,
.newsletter-page-error-content .newsletter-page-success-footer .newsletter-page-success-footer-copy,
.newsletter-page-error-content .newsletter-page-error-footer .newsletter-page-error-footer-copy {
display:none
}
.newsletter-page-success-content .newsletter-page-success-footer-copy.newsletter-page-success-footer-copy-long-form,
.newsletter-page-success-content .newsletter-page-error-footer-copy.newsletter-page-error-footer-copy-long-form,
.newsletter-page-error-content .newsletter-page-success-footer-copy.newsletter-page-success-footer-copy-long-form,
.newsletter-page-error-content .newsletter-page-error-footer-copy.newsletter-page-error-footer-copy-long-form {
display:block;
font-size:0.625rem;
letter-spacing:0.2em
}
}
.newsletter-page-form-success .newsletter-page-success-content {
opacity:1;
visibility:visible;
z-index:1
}
.newsletter-page-locale-en-us .newsletter-page-success-copy:last-of-type,
.newsletter-page-locale-en-gb .newsletter-page-success-copy:last-of-type {
visibility:visible
}
.newsletter-page-locale-en-us .newsletter-page-success-copy:last-of-type:after,
.newsletter-page-locale-en-gb .newsletter-page-success-copy:last-of-type:after {
display:block
}
.newsletter-page-form-error .newsletter-page-error-content {
opacity:1;
visibility:visible;
z-index:1
}
.newsletter-page-success-copy {
line-height:1.5em
}
.newsletter-page-success-copy:first-of-type {
margin-top:8rem
}
.newsletter-page-success-copy:last-of-type {
margin-bottom:11rem
}
@media all and (min-width: 901px) {
.newsletter-page-success-copy:first-of-type {
margin-top:10rem
}
.newsletter-page-success-copy:last-of-type {
margin-bottom:18rem
}
}
.newsletter-page-success-copy-outro {
position:relative
}
.newsletter-page-success-copy-sign-off.newsletter-page-success-copy-sign-off-image-true {
clip:auto;
color:transparent;
display:block;
height:0;
margin:0;
overflow:hidden;
padding:0;
text-indent:100%;
white-space:nowrap;
width:0;
background:url("/assets/overseer-signature.png") no-repeat;
background-size:100% 100%;
display:block;
height:50px;
width:200px
}
@media all and (min-width: 901px) {
.newsletter-page-success-copy-sign-off.newsletter-page-success-copy-sign-off-image-true {
height:96px;
width:383px
}
}
.newsletter-page-error-copy {
line-height:1.5em;
padding-top:50%;
text-align:center
}
@media all and (min-width: 901px) {
.newsletter-page-error-copy {
padding:0 0 50%;
-moz-transform:translateY(40%);
-ms-transform:translateY(40%);
-webkit-transform:translateY(40%);
transform:translateY(40%)
}
}
.newsletter-page-content {
background:#ecebe8 url("../assets/[email protected]");
padding:1em
}
.newsletter-page-content.newsletter-page-content-intro {
padding-top:8.5em;
text-align:center;
border-bottom:1px dashed #333
}
@media all and (min-width: 901px) {
.newsletter-page-content.newsletter-page-content-intro {
padding-top:6.5em
}
}
.newsletter-page-content.newsletter-page-form-footer {
background:#000 url("/assets/[email protected]")
}
.newsletter-page-form.newsletter-page-form-success .newsletter-page-content,
.newsletter-page-form.newsletter-page-form-error .newsletter-page-content {
display:none
}
.newsletter-page-content .vt-icon {
margin:0 auto 1em
}
.newsletter-page-content .form-field-divider {
padding-top:2em;
border-top:3px solid #000
}
.newsletter-page-content .form-field-column {
box-sizing:border-box;
display:inline-block;
padding-top:1.5em;
vertical-align:top;
width:48%
}
.newsletter-page-content .form-radio-label {
margin-top:1em
}
@media all and (min-width: 901px) {
.newsletter-page-content {
padding:1.5em 1.5em 1em
}
}
.newsletter-page-content-intro:after,
.newsletter-page-success-content:after,
.newsletter-page-error-content:after {
background:url("../assets/vault-tec-icon-black.svg") no-repeat 0;
content:"";
display:block;
position:absolute;
height:8em;
width:8em;
left:50%;
top:2em;
background-size:100%;
margin-left:-4em
}
@media all and (min-width: 901px) {
.newsletter-page-content-intro:after,
.newsletter-page-success-content:after,
.newsletter-page-error-content:after {
top:-2em;
width:10em;
height:10em;
margin-left:-5em
}
}
.newsletter-page-content-column {
position:relative
}
@media all and (min-width: 901px) {
.newsletter-page-content-column {
width:48%;
display:inline-block;
vertical-align:top
}
.newsletter-page-content-column:last-of-type {
margin-left:1.5em
}
}
.newsletter-page-heading {
text-align:center;
display:block;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:500;
letter-spacing:.25em;
text-transform:uppercase;
font-size:1.0625rem
}
.newsletter-page-form-success .newsletter-page-heading {
position:relative;
top:6rem;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:500
}
@media all and (min-width: 901px) {
.newsletter-page-form-success .newsletter-page-heading {
top:3.5em
}
}
.newsletter-page-form-error .newsletter-page-heading {
padding-bottom:2em
}
.newsletter-page-subtext {
text-align:center
}
.newsletter-page-form-date-container .form-field-number-input {
background:none;
border:none;
font-size:2em;
display:inline;
overflow:visible;
position:relative;
z-index:2;
font-family:"futura-pt",
sans-serif;
font-weight:bold;
padding-left:0
}
.newsletter-page-form-date-container .form-field-number-input.newsletter-page-form-birth-year-text-field {
width:3.25em
}
.newsletter-page-form-date-container .form-field-number-input.newsletter-page-form-birth-day-text-field {
width:1.4em
}
.newsletter-page-form-date-container .form-field-number-input.newsletter-page-form-birth-month-text-field {
width:1.9em
}
.form-field-error .newsletter-page-form-date-container .form-field-number-input:-moz-placeholder {
color:#bd0100
}
.form-field-error .newsletter-page-form-date-container .form-field-number-input::-moz-placeholder {
color:#bd0100
}
.form-field-error .newsletter-page-form-date-container .form-field-number-input:-ms-input-placeholder {
color:#bd0100
}
.form-field-error .newsletter-page-form-date-container .form-field-number-input::-webkit-input-placeholder {
color:#bd0100
}
.newsletter-page-form-date-container .form-field-number-input:-moz-placeholder {
color:#000
}
.newsletter-page-form-date-container .form-field-number-input::-moz-placeholder {
color:#000
}
.newsletter-page-form-date-container .form-field-number-input:-ms-input-placeholder {
color:#000
}
.newsletter-page-form-date-container .form-field-number-input::-webkit-input-placeholder {
color:#000
}
.newsletter-page-form-date-container .form-field-number-input:focus:-moz-placeholder {
color:transparent;
text-shadow:none
}
.newsletter-page-form-date-container .form-field-number-input:focus::-moz-placeholder {
color:transparent;
text-shadow:none
}
.newsletter-page-form-date-container .form-field-number-input:focus:-ms-input-placeholder {
color:transparent;
text-shadow:none
}
.newsletter-page-form-date-container .form-field-number-input:focus::-webkit-input-placeholder {
color:transparent;
text-shadow:none
}
.newsletter-page-form-birth-field-container:after {
content:'/';
font-size:2em
}
.newsletter-page-form-text-field-label {
display:none
}
.newsletter-page-form-checkbox-label {
color:#fff
}
.newsletter-page-form-checkbox-label .form-checkbox-input {
top:.25em
}
.newsletter-page-form-checkbox-label:before {
top:.25em;
border-color:#fff
}
.newsletter-page-form-footer {
padding:3em 1em
}
.newsletter-page-form-footer .form-field-error .newsletter-page-form-checkbox-label {
color:#bd0100
}
.newsletter-page-form-footer .form-field-error .newsletter-page-form-checkbox-label:before {
border-color:#bd0100
}
.newsletter-page-form-footer .form-checkbox-checked:after {
background-image:url(../assets/icons/icons.png);
background-position:0px -213px;
width:39px;
height:34px;
bottom:auto;
top:-0.65em
}
.newsletter-page-form-footer .newsletter-page-form-footer-icon {
height:16px;
width:111px;
margin:0 0 1em
}
.newsletter-page-form-footer .newsletter-page-form-submit-btn {
background:#ecebe8 url("/assets/[email protected]");
border:none;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
box-sizing:content-box;
color:#000;
cursor:pointer;
font-size:0.75rem;
line-height:10px;
margin:2em auto;
padding:0.8em 2.5em;
width:130px;
overflow-y:hidden
}
@media all and (min-width: 901px) {
.newsletter-page-form-footer .newsletter-page-form-submit-btn {
padding:1em 3.4em;
position:absolute;
right:0;
top:0;
width:auto
}
}
.newsletter-page-form-footer .newsletter-page-form-submit-btn:hover .newsletter-page-form-submit-btn-text {
-moz-animation:buttonMouseOn 200ms ease-in-out;
-webkit-animation:buttonMouseOn 200ms ease-in-out;
animation:buttonMouseOn 200ms ease-in-out
}
.newsletter-page-form-footer .newsletter-page-form-submit-btn-text {
display:block;
position:relative;
padding:0.5em 0;
-moz-animation:buttonMouseOff 500ms ease-out;
-webkit-animation:buttonMouseOff 500ms ease-out;
animation:buttonMouseOff 500ms ease-out
}
@media all and (min-width: 901px) {
.newsletter-page-form-footer {
padding:2em 1.5em
}
}
.newsletter-page-success-footer,
.newsletter-page-error-footer {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
margin:1.5625rem 0 0.5rem;
text-align:center;
font-size:0.875rem;
font-family:"futura-pt-condensed",
sans-serif;
font-weight:400;
text-transform:uppercase;
-webkit-flex:4;
flex:4
}
.newsletter-page-success-footer .newsletter-page-success-footer-copy,
.newsletter-page-success-footer .newsletter-page-error-footer-copy,
.newsletter-page-error-footer .newsletter-page-success-footer-copy,
.newsletter-page-error-footer .newsletter-page-error-footer-copy {
display:block;
margin:0 2em
}
.newsletter-page-success-footer:before,
.newsletter-page-success-footer:after,
.newsletter-page-error-footer:before,
.newsletter-page-error-footer:after {
border:0;
border-bottom:3px solid #000;
width:100%;
position:relative;
padding:0;
margin:auto;
display:-ms-flexbox;
-ms-flex:4;
-webkit-flex:4;
flex:4;
border-width:1px;
content:''
}
@media all and (max-width: 901px) {
.newsletter-page-success-footer,
.newsletter-page-error-footer {
position:absolute;
width:95%;
bottom:2em
}
}
.preorder-featured-media {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
animation-play-state:paused;
margin-bottom:1em
}
.preorder-featured-media .featured-media-asset-background-image {
height:auto;
width:100%
}
@media all and (min-width: 901px) {
.preorder-featured-media .featured-media-asset-background-image {
height:100%;
max-height:358px;
width:100%
}
}
@media all and (min-width: 901px) {
.preorder-featured-media .featured-media-asset-text {
max-width:400px;
margin-left:-200px
}
}
.preorder-lead-in-module,
.announcement-preorder {
overflow:visible;
padding:.5rem 1rem 0
}
@media all and (min-width: 1099px) {
.preorder-lead-in-module,
.announcement-preorder {
padding:2rem 0 0
}
}
.preorder-lead-in-module .preorder-lead-in-pack-art,
.announcement-preorder .preorder-lead-in-pack-art {
margin-bottom:1em;
max-width:100%
}
@media all and (min-width: 901px) {
.preorder-lead-in-module .preorder-lead-in-pack-art,
.announcement-preorder .preorder-lead-in-pack-art {
max-height:290px;
height:100%;
width:auto;
margin-bottom:1em
}
}
.preorder-lead-in-module .preorder-lead-in-release-date,
.announcement-preorder .preorder-lead-in-release-date {
font-size:.75em;
text-align:center;
margin:3em 0 0
}
@media all and (min-width: 901px) {
.preorder-lead-in-module .preorder-lead-in-release-date,
.announcement-preorder .preorder-lead-in-release-date {
margin:3em 0 2em 2.75em;
position:absolute;
left:0;
bottom:6em
}
}
@media all and (min-width: 901px) {
.preorder-lead-in-module .big-lead-in-copy,
.announcement-preorder .big-lead-in-copy {
margin-bottom:4em
}
}
.preorder-lead-in-module .preorder-lead-in-submit-btn.standard-btn,
.announcement-preorder .preorder-lead-in-submit-btn.standard-btn {
position:relative;
width:100%;
max-height:4em;
font-size:0.75rem;
margin-bottom:1em
}
@media all and (min-width: 901px) {
.preorder-lead-in-module .preorder-lead-in-submit-btn.standard-btn,
.announcement-preorder .preorder-lead-in-submit-btn.standard-btn {
width:auto;
margin:0 6em 0 auto
}
}
@media all and (min-width: 1099px) {
.preorder-lead-in-module .preorder-lead-in-submit-btn.standard-btn,
.announcement-preorder .preorder-lead-in-submit-btn.standard-btn {
min-width:230px
}
}
.preorder-lead-in-module .preorder-lead-in-submit-btn.standard-btn:disabled,
.announcement-preorder .preorder-lead-in-submit-btn.standard-btn:disabled {
cursor:default
}
.preorder-lead-in-module .form-dropdown-container,
.announcement-preorder .form-dropdown-container {
height:3em;
background:#000 url("/assets/[email protected]");
text-align:left
}
@media all and (min-width: 901px) {
.preorder-lead-in-module .form-dropdown-container,
.announcement-preorder .form-dropdown-container {
width:200px;
margin-right:1em
}
}
@media all and (min-width: 1099px) {
.preorder-lead-in-module .form-dropdown-container,
.announcement-preorder .form-dropdown-container {
width:230px
}
}
.preorder-lead-in-module .form-dropdown-container:before,
.announcement-preorder .form-dropdown-container:before {
background:transparent;
border-top-color:#fff;
right:1.5em;
top:1.4em
}
.preorder-lead-in-module .form-field-disabled,
.announcement-preorder .form-field-disabled {
background-color:#82817f;
border-color:#82817f;
color:#fff;
opacity:.7
}
.preorder-lead-in-module .form-dropdown-options-container,
.announcement-preorder .form-dropdown-options-container {
background:transparent
}
.preorder-lead-in-module .form-dropdown-value-container,
.preorder-lead-in-module .form-dropdown-option,
.announcement-preorder .form-dropdown-value-container,
.announcement-preorder .form-dropdown-option {
background:url("/assets/[email protected]");
height:auto;
display:block;
font-size:0.75rem;
font-family:"futura-pt",
sans-serif;
font-weight:bold;
letter-spacing:0.1875rem;
padding:1.4em 2em 1.2em;
text-transform:uppercase;
text-decoration:none;
color:#fff;
text-align:left
}
.preorder-lead-in-module .form-dropdown-value-container,
.announcement-preorder .form-dropdown-value-container {
text-align:center
}
@media all and (min-width: 901px) {
.preorder-lead-in-module .form-dropdown-value-container,
.announcement-preorder .form-dropdown-value-container {
text-align:left
}
}
.preorder-lead-in-module .form-dropdown-option,
.announcement-preorder .form-dropdown-option {
background-color:#000;
margin:0;
position:relative
}
.preorder-lead-in-module .form-dropdown-option:before,
.announcement-preorder .form-dropdown-option:before {
border-bottom:1px solid #fff;
content:'';
display:block;
left:0;
margin:2.5em 10% 0;
bottom:0;
width:80%;
position:absolute
}
.preorder-lead-in-module .form-dropdown-option:first-of-type:before,
.preorder-lead-in-module .form-dropdown-option:last-of-type:before,
.announcement-preorder .form-dropdown-option:first-of-type:before,
.announcement-preorder .form-dropdown-option:last-of-type:before {
border-width:3px
}
.preorder-lead-in-module .form-dropdown-option:last-child:before,
.announcement-preorder .form-dropdown-option:last-child:before {
border-bottom:none
}
.preorder-active-select:after {
content:'';
display:block;
position:absolute;
right:1em;
top:2em;
border-top:4px solid #fff;
border-left:4px solid transparent;
border-right:4px solid transparent
}
.preorder-lead-in-aside,
.preorder-form {
max-width:22em;
margin:0 auto
}
@media all and (min-width: 901px) {
.preorder-lead-in-aside,
.preorder-form {
max-height:18em;
max-width:none;
text-align:right;
padding-bottom:2em
}
}
@media all and (min-width: 901px) {
.preorder-lead-in-aside.preorder-lead-in-aside-content-large {
display:-ms-flexbox;
-ms-flex-direction:row;
-ms-flex:6;
-webkit-flex:6;
flex:6;
max-height:none;
padding-left:0;
padding-right:0
}
.preorder-lead-in-aside.preorder-lead-in-aside-content-large .preorder-lead-in-pack-art-large {
max-height:none;
height:auto
}
}
.preorder-lead-in-aside-content-small {
padding:2em 2em 0
}
@media all and (min-width: 901px) {
.preorder-lead-in-aside-content-small {
padding:2em
}
}
.preorder-form {
padding:0 2em
}
@media all and (min-width: 901px) {
.preorder-form {
width:100%;
max-width:none;
display:-ms-flexbox;
-ms-flex-align:start;
display:-webkit-flex;
display:flex;
padding:0;
padding-left:1em;
-webkit-justify-content:flex-start;
justify-content:flex-start
}
}
.preorder-form-field {
position:relative;
height:4em
}
.preorder-form-select-text {
display:block;
position:relative;
-moz-animation:buttonMouseOff 200ms ease-out;
-webkit-animation:buttonMouseOff 200ms ease-out;
animation:buttonMouseOff 200ms ease-out
}
.preorder-lead-in-submit-btn:enabled:hover .preorder-form-select-text {
-moz-animation:buttonMouseOn 200ms ease-in-out;
-webkit-animation:buttonMouseOn 200ms ease-in-out;
animation:buttonMouseOn 200ms ease-in-out
}
.apps-module {
max-width:87.5rem;
margin:0 auto 2rem;
padding:0 1rem
}
@media all and (min-width: 901px) {
.apps-module {
padding:0 1rem
}
}
@media all and (min-width: 1099px) {
.apps-module {
padding:0 9rem 4rem
}
}
.apps-page-header {
width:100%;
max-width:1102px;
left:50%;
position:relative;
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-webkit-transform:translateX(-50%);
transform:translateX(-50%)
}
.apps-module-sub-heading {
margin:2em 1em
}
@media all and (min-width: 901px) {
.apps-module-sub-heading {
margin:3em 1em 0
}
.apps-module:nth-of-type(2) .apps-module-sub-heading {
margin-left:30rem
}
}
@media all and (min-width: 1099px) {
.apps-module:nth-of-type(2) .apps-module-sub-heading {
margin-left:35rem
}
}
@media all and (min-width: 1280px) {
.apps-module-sub-heading {
margin:6em 1em 0
}
.apps-module:nth-of-type(2) .apps-module-sub-heading {
margin-left:45rem
}
}
@media all and (min-width: 901px) {
.apps-module-desc-text {
margin-bottom:5em;
width:350px;
min-height:12em
}
.apps-module:nth-of-type(2) .apps-module-desc-text {
margin-left:30rem
}
}
@media all and (min-width: 1099px) {
.apps-module:nth-of-type(2) .apps-module-desc-text {
margin-left:35rem
}
}
@media all and (min-width: 1280px) {
.apps-module:nth-of-type(2) .apps-module-desc-text {
margin-left:45rem
}
}
@media all and (min-width: 901px) {
.apps-module-device-images {
-moz-transform:scale(0.6,
0.6);
-ms-transform:scale(0.6,
0.6);
-webkit-transform:scale(0.6,
0.6);
transform:scale(0.6,
0.6);
position:absolute;
top:4.25rem;
right:5rem
}
.apps-module:nth-of-type(2) .apps-module-device-images {
right:auto;
left:0
}
}
@media all and (min-width: 1099px) {
.apps-module-device-images {
-moz-transform:scale(0.8,
0.8);
-ms-transform:scale(0.8,
0.8);
-webkit-transform:scale(0.8,
0.8);
transform:scale(0.8,
0.8)
}
}
@media all and (min-width: 1280px) {
.apps-module-device-images {
-moz-transform:none;
-ms-transform:none;
-webkit-transform:none;
transform:none
}
}
.apps-module-device-image {
position:absolute;
right:-0.75em;
width:100%;
top:-2.65em;
opacity:0;
visibility:hidden;
-moz-transition:opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear;
-o-transition:opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear;
-webkit-transition:opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear;
transition:opacity 400ms ease,
visibility 400ms ease,
z-index 401ms linear;
z-index:1
}
.apps-module-device-image.apps-module-device-image-active {
z-index:2;
opacity:1;
visibility:visible
}
@media all and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
.apps-module-device-image {
right:2.25em;
width:80%;
top:2em
}
}
@media all and (min-width: 901px) {
.apps-module-device-image {
top:-3.05em;
right:0;
width:100%
}
.apps-module:nth-of-type(2) .apps-module-device-image-phone-container .apps-module-device-image {
top:-2.9em
}
.apps-module-device-image-tablet-container .apps-module-device-image {
top:-.75em;
right:2.5em;
width:90%
}
}
@media all and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.apps-module-device-image {
-moz-transform:scale(0.8,
0.8);
-ms-transform:scale(0.8,
0.8);
-webkit-transform:scale(0.8,
0.8);
transform:scale(0.8,
0.8);
top:0
}
.apps-module:nth-of-type(2) .apps-module-device-image-phone-container .apps-module-device-image {
top:0
}
.apps-module-device-image-tablet-container .apps-module-device-image {
top:-7em;
right:0.5em;
width:100%;
transform:none
}
}
.apps-module-device-image-phone-container {
background-image:url("/assets/apps-phone-bg.png");
width:498px;
height:264px;
position:relative
}
.apps-module-device-image-phone-container:after {
background:url("/assets/[email protected]");
content:'';
display:block;
position:absolute;
width:100%;
height:100%
}
@media all and (min-width: 901px) {
.apps-module-device-image-phone-container {
position:absolute;
right:14rem;
top:16rem;
z-index:2
}
.apps-module:nth-of-type(2) .apps-module-device-image-phone-container {
right:auto
}
}
.apps-module-device-image-tablet-container {
background-image:url("/assets/apps-tablet-bg.png");
width:928px;
height:407px;
display:none
}
.apps-module-device-image-tablet-container:after {
background:url("/assets/[email protected]");
content:'';
display:block;
position:absolute;
width:100%;
height:100%
}
@media all and (min-width: 901px) {
.apps-module-device-image-tablet-container {
display:block;
position:absolute;
width:800px;
height:320px;
right:-5rem;
z-index:1;
background-size:100%;
background-position:0 -30px;
overflow-y:hidden
}
.apps-module:nth-of-type(2) .apps-module-device-image-tablet-container {
right:auto
}
}
.apps-module-sub-heading-text-primary {
display:block;
font-family:"SouthernAire",
serif;
font-size:2.5em;
font-weight:normal;
letter-spacing:normal;
line-height:0.45em;
text-transform:none
}
.apps-module-sub-heading-text-secondary {
font-family:"futura-pt",
sans-serif;
font-size:2.25rem;
letter-spacing:normal;
line-height:2.5625rem;
margin:0
}
.apps-module-download-heading {
font-family:"futura-pt",
sans-serif;
font-size:0.8em;
font-weight:bold;
letter-spacing:0.1em;
text-transform:uppercase;
display:block;
width:100%;
text-align:center;
margin:0 0 2em
}
@media all and (min-width: 901px) {
.apps-module-download-heading {
margin:0 0 2em 1em;
text-align:left
}
.apps-module:nth-of-type(2) .apps-module-download-heading {
margin-left:30rem
}
}
@media all and (min-width: 1099px) {
.apps-module:nth-of-type(2) .apps-module-download-heading {
margin-left:35rem
}
}
@media all and (min-width: 1280px) {
.apps-module:nth-of-type(2) .apps-module-download-heading {
margin-left:45rem
}
}
.apps-module-download-btns {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
-webkit-justify-content:space-around;
justify-content:space-around;
width:18.5em;
margin:auto
}
@media all and (min-width: 901px) {
.apps-module-download-btns {
-webkit-justify-content:space-between;
justify-content:space-between;
margin-left:1em
}
.apps-module:nth-of-type(2) .apps-module-download-btns {
margin-left:30rem
}
}
@media all and (min-width: 1099px) {
.apps-module:nth-of-type(2) .apps-module-download-btns {
margin-left:35rem
}
}
@media all and (min-width: 1280px) {
.apps-module:nth-of-type(2) .apps-module-download-btns {
margin-left:45rem
}
}
.apps-module-download-btn {
width:48%
}
@media all and (min-width: 901px) {
.apps-module-download-btn {
max-width:320px
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment