Advertisement
Guest User

Untitled

a guest
Jul 1st, 2015
222
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 199.08 KB | None | 0 0
  1. @import url("//hello.myfonts.net/count/2dc302");
  2. @import url("//hello.myfonts.net/count/2dc302");
  3. @import url("//hello.myfonts.net/count/2dc302");
  4. @import url("//hello.myfonts.net/count/2dc302");
  5. @font-face {
  6. font-family: 'schoolbook-web', serif;
  7. font-weight: normal;
  8. font-style: normal;
  9. }
  10. @font-face {
  11. font-family: 'FilmotypeGlenlake';
  12. src: url("/assets/fonts/filmotype-glenlake.otf");
  13. font-weight: normal;
  14. font-style: normal;
  15. }
  16. @font-face {
  17. font-family: 'SouthernAire';
  18. src: url("/assets/fonts/2DC302_1_0.eot");
  19. 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");
  20. }
  21. @font-face {
  22. font-family: 'schoolbook-web', serif;
  23. font-weight: normal;
  24. font-style: normal;
  25. }
  26. @font-face {
  27. font-family: 'FilmotypeGlenlake';
  28. src: url("/assets/fonts/filmotype-glenlake.otf");
  29. font-weight: normal;
  30. font-style: normal;
  31. }
  32. @font-face {
  33. font-family: 'SouthernAire';
  34. src: url("/assets/fonts/2DC302_1_0.eot");
  35. 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");
  36. }
  37. .pl-section {
  38. padding: 2em;
  39. }
  40. .pl-square-block {
  41. width: 5em;
  42. height: 5em;
  43. margin-bottom: 10px;
  44. border: 3px solid #000;
  45. color: #fff;
  46. font-size: 10px;
  47. }
  48. .pl-padded-container {
  49. padding: 1em;
  50. }
  51. .flex-item.pl-square-block {
  52. flex: initial;
  53. }
  54. .pl-square-block.pl-dark-text {
  55. color: #000;
  56. }
  57. .pl-denote-text {
  58. color: #000;
  59. font-size: 1rem;
  60. font-family: "schoolbook-web", serif;
  61. margin: 1.25rem 0;
  62. }
  63. .pl-section-spike .spike {
  64. width: 220px;
  65. height: 375px;
  66. }
  67. @font-face {
  68. font-family: 'schoolbook-web', serif;
  69. font-weight: normal;
  70. font-style: normal;
  71. }
  72. @font-face {
  73. font-family: 'FilmotypeGlenlake';
  74. src: url("/assets/fonts/filmotype-glenlake.otf");
  75. font-weight: normal;
  76. font-style: normal;
  77. }
  78. @font-face {
  79. font-family: 'SouthernAire';
  80. src: url("/assets/fonts/2DC302_1_0.eot");
  81. 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");
  82. }
  83. @font-face {
  84. font-family: 'schoolbook-web', serif;
  85. font-weight: normal;
  86. font-style: normal;
  87. }
  88. @font-face {
  89. font-family: 'FilmotypeGlenlake';
  90. src: url("/assets/fonts/filmotype-glenlake.otf");
  91. font-weight: normal;
  92. font-style: normal;
  93. }
  94. @font-face {
  95. font-family: 'SouthernAire';
  96. src: url("/assets/fonts/2DC302_1_0.eot");
  97. 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");
  98. }
  99. html, body {
  100. background-color: #000;
  101. height: 100%;
  102. margin: 0;
  103. padding: 0;
  104. position: relative;
  105. width: 100%}
  106. button {
  107. background-color: transparent;
  108. border: 0;
  109. cursor: pointer;
  110. margin: 0;
  111. outline: none;
  112. padding: 0;
  113. }
  114. section {
  115. margin: 0;
  116. padding: 0;
  117. }
  118. p {
  119. color: #333;
  120. font-family: "schoolbook-web", serif;
  121. }
  122. h1, h2, h3, h4, h5 {
  123. text-transform: uppercase;
  124. font-family: "futura-pt", sans-serif;
  125. letter-spacing: 0.1875rem;
  126. }
  127. .accent-text {
  128. font-family: "futura-pt-condensed", sans-serif;
  129. font-weight: 400;
  130. font-style: normal;
  131. font-size: 0.5rem;
  132. display: block;
  133. }
  134. @-moz-keyframes featuredVideoPan {
  135. 0% {
  136. -moz-transform: translateX(0%) translateZ(0);
  137. transform: translateX(0%) translateZ(0);
  138. }
  139. 50% {
  140. -moz-transform: translateX(-50%) translateZ(0);
  141. transform: translateX(-50%) translateZ(0);
  142. }
  143. 100% {
  144. -moz-transform: translateX(0%) translateZ(0);
  145. transform: translateX(0%) translateZ(0);
  146. }
  147. }@-webkit-keyframes featuredVideoPan {
  148. 0% {
  149. -webkit-transform: translateX(0%) translateZ(0);
  150. transform: translateX(0%) translateZ(0);
  151. }
  152. 50% {
  153. -webkit-transform: translateX(-50%) translateZ(0);
  154. transform: translateX(-50%) translateZ(0);
  155. }
  156. 100% {
  157. -webkit-transform: translateX(0%) translateZ(0);
  158. transform: translateX(0%) translateZ(0);
  159. }
  160. }@keyframes featuredVideoPan {
  161. 0% {
  162. -moz-transform: translateX(0%) translateZ(0);
  163. -ms-transform: translateX(0%) translateZ(0);
  164. -webkit-transform: translateX(0%) translateZ(0);
  165. transform: translateX(0%) translateZ(0);
  166. }
  167. 50% {
  168. -moz-transform: translateX(-50%) translateZ(0);
  169. -ms-transform: translateX(-50%) translateZ(0);
  170. -webkit-transform: translateX(-50%) translateZ(0);
  171. transform: translateX(-50%) translateZ(0);
  172. }
  173. 100% {
  174. -moz-transform: translateX(0%) translateZ(0);
  175. -ms-transform: translateX(0%) translateZ(0);
  176. -webkit-transform: translateX(0%) translateZ(0);
  177. transform: translateX(0%) translateZ(0);
  178. }
  179. }@-moz-keyframes shake {
  180. 0% {
  181. -moz-transform: translate3d(-10px, 0, 0);
  182. transform: translate3d(-10px, 0, 0);
  183. }
  184. 25% {
  185. -moz-transform: translate3d(10px, 0, 0);
  186. transform: translate3d(10px, 0, 0);
  187. }
  188. 50% {
  189. -moz-transform: translate3d(-10px, 0, 0);
  190. transform: translate3d(-10px, 0, 0);
  191. }
  192. 75% {
  193. -moz-transform: translate3d(10px, 0, 0);
  194. transform: translate3d(10px, 0, 0);
  195. }
  196. 100% {
  197. -moz-transform: translate3d(0, 0, 0);
  198. transform: translate3d(0, 0, 0);
  199. }
  200. }@-webkit-keyframes shake {
  201. 0% {
  202. -webkit-transform: translate3d(-10px, 0, 0);
  203. transform: translate3d(-10px, 0, 0);
  204. }
  205. 25% {
  206. -webkit-transform: translate3d(10px, 0, 0);
  207. transform: translate3d(10px, 0, 0);
  208. }
  209. 50% {
  210. -webkit-transform: translate3d(-10px, 0, 0);
  211. transform: translate3d(-10px, 0, 0);
  212. }
  213. 75% {
  214. -webkit-transform: translate3d(10px, 0, 0);
  215. transform: translate3d(10px, 0, 0);
  216. }
  217. 100% {
  218. -webkit-transform: translate3d(0, 0, 0);
  219. transform: translate3d(0, 0, 0);
  220. }
  221. }@keyframes shake {
  222. 0% {
  223. -moz-transform: translate3d(-10px, 0, 0);
  224. -ms-transform: translate3d(-10px, 0, 0);
  225. -webkit-transform: translate3d(-10px, 0, 0);
  226. transform: translate3d(-10px, 0, 0);
  227. }
  228. 25% {
  229. -moz-transform: translate3d(10px, 0, 0);
  230. -ms-transform: translate3d(10px, 0, 0);
  231. -webkit-transform: translate3d(10px, 0, 0);
  232. transform: translate3d(10px, 0, 0);
  233. }
  234. 50% {
  235. -moz-transform: translate3d(-10px, 0, 0);
  236. -ms-transform: translate3d(-10px, 0, 0);
  237. -webkit-transform: translate3d(-10px, 0, 0);
  238. transform: translate3d(-10px, 0, 0);
  239. }
  240. 75% {
  241. -moz-transform: translate3d(10px, 0, 0);
  242. -ms-transform: translate3d(10px, 0, 0);
  243. -webkit-transform: translate3d(10px, 0, 0);
  244. transform: translate3d(10px, 0, 0);
  245. }
  246. 100% {
  247. -moz-transform: translate3d(0, 0, 0);
  248. -ms-transform: translate3d(0, 0, 0);
  249. -webkit-transform: translate3d(0, 0, 0);
  250. transform: translate3d(0, 0, 0);
  251. }
  252. }@-moz-keyframes slowShake {
  253. 0% {
  254. -moz-transform: translate3d(-1px, 0, 0);
  255. transform: translate3d(-1px, 0, 0);
  256. }
  257. 6% {
  258. -moz-transform: translate3d(0, 0, 0);
  259. transform: translate3d(0, 0, 0);
  260. }
  261. 12% {
  262. -moz-transform: translate3d(0, 0, 0);
  263. transform: translate3d(0, 0, 0);
  264. }
  265. 18% {
  266. -moz-transform: translate3d(0, 1px, 0);
  267. transform: translate3d(0, 1px, 0);
  268. }
  269. 24% {
  270. -moz-transform: translate3d(0, -1px, 0);
  271. transform: translate3d(0, -1px, 0);
  272. }
  273. 30% {
  274. -moz-transform: translate3d(-1px, -1px, 0);
  275. transform: translate3d(-1px, -1px, 0);
  276. }
  277. 36% {
  278. -moz-transform: translate3d(-1px, 0, 0);
  279. transform: translate3d(-1px, 0, 0);
  280. }
  281. 42% {
  282. -moz-transform: translate3d(0, 1px, 0);
  283. transform: translate3d(0, 1px, 0);
  284. }
  285. 48% {
  286. -moz-transform: translate3d(1px, 1px, 0);
  287. transform: translate3d(1px, 1px, 0);
  288. }
  289. 54% {
  290. -moz-transform: translate3d(0, -1px, 0);
  291. transform: translate3d(0, -1px, 0);
  292. }
  293. 60% {
  294. -moz-transform: translate3d(-1px, -1px, 0);
  295. transform: translate3d(-1px, -1px, 0);
  296. }
  297. 66% {
  298. -moz-transform: translate3d(0, 0, 0);
  299. transform: translate3d(0, 0, 0);
  300. }
  301. 72% {
  302. -moz-transform: translate3d(0, -1px, 0);
  303. transform: translate3d(0, -1px, 0);
  304. }
  305. 78% {
  306. -moz-transform: translate3d(1px, 0, 0);
  307. transform: translate3d(1px, 0, 0);
  308. }
  309. 90% {
  310. -moz-transform: translate3d(1px, 1px, 0);
  311. transform: translate3d(1px, 1px, 0);
  312. }
  313. 100% {
  314. -moz-transform: translate3d(0, 0, 0);
  315. transform: translate3d(0, 0, 0);
  316. }
  317. }@-webkit-keyframes slowShake {
  318. 0% {
  319. -webkit-transform: translate3d(-1px, 0, 0);
  320. transform: translate3d(-1px, 0, 0);
  321. }
  322. 6% {
  323. -webkit-transform: translate3d(0, 0, 0);
  324. transform: translate3d(0, 0, 0);
  325. }
  326. 12% {
  327. -webkit-transform: translate3d(0, 0, 0);
  328. transform: translate3d(0, 0, 0);
  329. }
  330. 18% {
  331. -webkit-transform: translate3d(0, 1px, 0);
  332. transform: translate3d(0, 1px, 0);
  333. }
  334. 24% {
  335. -webkit-transform: translate3d(0, -1px, 0);
  336. transform: translate3d(0, -1px, 0);
  337. }
  338. 30% {
  339. -webkit-transform: translate3d(-1px, -1px, 0);
  340. transform: translate3d(-1px, -1px, 0);
  341. }
  342. 36% {
  343. -webkit-transform: translate3d(-1px, 0, 0);
  344. transform: translate3d(-1px, 0, 0);
  345. }
  346. 42% {
  347. -webkit-transform: translate3d(0, 1px, 0);
  348. transform: translate3d(0, 1px, 0);
  349. }
  350. 48% {
  351. -webkit-transform: translate3d(1px, 1px, 0);
  352. transform: translate3d(1px, 1px, 0);
  353. }
  354. 54% {
  355. -webkit-transform: translate3d(0, -1px, 0);
  356. transform: translate3d(0, -1px, 0);
  357. }
  358. 60% {
  359. -webkit-transform: translate3d(-1px, -1px, 0);
  360. transform: translate3d(-1px, -1px, 0);
  361. }
  362. 66% {
  363. -webkit-transform: translate3d(0, 0, 0);
  364. transform: translate3d(0, 0, 0);
  365. }
  366. 72% {
  367. -webkit-transform: translate3d(0, -1px, 0);
  368. transform: translate3d(0, -1px, 0);
  369. }
  370. 78% {
  371. -webkit-transform: translate3d(1px, 0, 0);
  372. transform: translate3d(1px, 0, 0);
  373. }
  374. 90% {
  375. -webkit-transform: translate3d(1px, 1px, 0);
  376. transform: translate3d(1px, 1px, 0);
  377. }
  378. 100% {
  379. -webkit-transform: translate3d(0, 0, 0);
  380. transform: translate3d(0, 0, 0);
  381. }
  382. }@keyframes slowShake {
  383. 0% {
  384. -moz-transform: translate3d(-1px, 0, 0);
  385. -ms-transform: translate3d(-1px, 0, 0);
  386. -webkit-transform: translate3d(-1px, 0, 0);
  387. transform: translate3d(-1px, 0, 0);
  388. }
  389. 6% {
  390. -moz-transform: translate3d(0, 0, 0);
  391. -ms-transform: translate3d(0, 0, 0);
  392. -webkit-transform: translate3d(0, 0, 0);
  393. transform: translate3d(0, 0, 0);
  394. }
  395. 12% {
  396. -moz-transform: translate3d(0, 0, 0);
  397. -ms-transform: translate3d(0, 0, 0);
  398. -webkit-transform: translate3d(0, 0, 0);
  399. transform: translate3d(0, 0, 0);
  400. }
  401. 18% {
  402. -moz-transform: translate3d(0, 1px, 0);
  403. -ms-transform: translate3d(0, 1px, 0);
  404. -webkit-transform: translate3d(0, 1px, 0);
  405. transform: translate3d(0, 1px, 0);
  406. }
  407. 24% {
  408. -moz-transform: translate3d(0, -1px, 0);
  409. -ms-transform: translate3d(0, -1px, 0);
  410. -webkit-transform: translate3d(0, -1px, 0);
  411. transform: translate3d(0, -1px, 0);
  412. }
  413. 30% {
  414. -moz-transform: translate3d(-1px, -1px, 0);
  415. -ms-transform: translate3d(-1px, -1px, 0);
  416. -webkit-transform: translate3d(-1px, -1px, 0);
  417. transform: translate3d(-1px, -1px, 0);
  418. }
  419. 36% {
  420. -moz-transform: translate3d(-1px, 0, 0);
  421. -ms-transform: translate3d(-1px, 0, 0);
  422. -webkit-transform: translate3d(-1px, 0, 0);
  423. transform: translate3d(-1px, 0, 0);
  424. }
  425. 42% {
  426. -moz-transform: translate3d(0, 1px, 0);
  427. -ms-transform: translate3d(0, 1px, 0);
  428. -webkit-transform: translate3d(0, 1px, 0);
  429. transform: translate3d(0, 1px, 0);
  430. }
  431. 48% {
  432. -moz-transform: translate3d(1px, 1px, 0);
  433. -ms-transform: translate3d(1px, 1px, 0);
  434. -webkit-transform: translate3d(1px, 1px, 0);
  435. transform: translate3d(1px, 1px, 0);
  436. }
  437. 54% {
  438. -moz-transform: translate3d(0, -1px, 0);
  439. -ms-transform: translate3d(0, -1px, 0);
  440. -webkit-transform: translate3d(0, -1px, 0);
  441. transform: translate3d(0, -1px, 0);
  442. }
  443. 60% {
  444. -moz-transform: translate3d(-1px, -1px, 0);
  445. -ms-transform: translate3d(-1px, -1px, 0);
  446. -webkit-transform: translate3d(-1px, -1px, 0);
  447. transform: translate3d(-1px, -1px, 0);
  448. }
  449. 66% {
  450. -moz-transform: translate3d(0, 0, 0);
  451. -ms-transform: translate3d(0, 0, 0);
  452. -webkit-transform: translate3d(0, 0, 0);
  453. transform: translate3d(0, 0, 0);
  454. }
  455. 72% {
  456. -moz-transform: translate3d(0, -1px, 0);
  457. -ms-transform: translate3d(0, -1px, 0);
  458. -webkit-transform: translate3d(0, -1px, 0);
  459. transform: translate3d(0, -1px, 0);
  460. }
  461. 78% {
  462. -moz-transform: translate3d(1px, 0, 0);
  463. -ms-transform: translate3d(1px, 0, 0);
  464. -webkit-transform: translate3d(1px, 0, 0);
  465. transform: translate3d(1px, 0, 0);
  466. }
  467. 90% {
  468. -moz-transform: translate3d(1px, 1px, 0);
  469. -ms-transform: translate3d(1px, 1px, 0);
  470. -webkit-transform: translate3d(1px, 1px, 0);
  471. transform: translate3d(1px, 1px, 0);
  472. }
  473. 100% {
  474. -moz-transform: translate3d(0, 0, 0);
  475. -ms-transform: translate3d(0, 0, 0);
  476. -webkit-transform: translate3d(0, 0, 0);
  477. transform: translate3d(0, 0, 0);
  478. }
  479. }@-moz-keyframes pageShake {
  480. 0% {
  481. -moz-transform: translate3d(-1px, -1px, 0);
  482. transform: translate3d(-1px, -1px, 0);
  483. }
  484. 20% {
  485. -moz-transform: translate3d(0, 2px, 0);
  486. transform: translate3d(0, 2px, 0);
  487. }
  488. 40% {
  489. -moz-transform: translate3d(-2px, 0, 0);
  490. transform: translate3d(-2px, 0, 0);
  491. }
  492. 60% {
  493. -moz-transform: translate3d(0, 0, 0);
  494. transform: translate3d(0, 0, 0);
  495. }
  496. 80% {
  497. -moz-transform: translate3d(0, -1px, 0);
  498. transform: translate3d(0, -1px, 0);
  499. }
  500. 100% {
  501. -moz-transform: translate3d(0, 0, 0);
  502. transform: translate3d(0, 0, 0);
  503. }
  504. }@-webkit-keyframes pageShake {
  505. 0% {
  506. -webkit-transform: translate3d(-1px, -1px, 0);
  507. transform: translate3d(-1px, -1px, 0);
  508. }
  509. 20% {
  510. -webkit-transform: translate3d(0, 2px, 0);
  511. transform: translate3d(0, 2px, 0);
  512. }
  513. 40% {
  514. -webkit-transform: translate3d(-2px, 0, 0);
  515. transform: translate3d(-2px, 0, 0);
  516. }
  517. 60% {
  518. -webkit-transform: translate3d(0, 0, 0);
  519. transform: translate3d(0, 0, 0);
  520. }
  521. 80% {
  522. -webkit-transform: translate3d(0, -1px, 0);
  523. transform: translate3d(0, -1px, 0);
  524. }
  525. 100% {
  526. -webkit-transform: translate3d(0, 0, 0);
  527. transform: translate3d(0, 0, 0);
  528. }
  529. }@keyframes pageShake {
  530. 0% {
  531. -moz-transform: translate3d(-1px, -1px, 0);
  532. -ms-transform: translate3d(-1px, -1px, 0);
  533. -webkit-transform: translate3d(-1px, -1px, 0);
  534. transform: translate3d(-1px, -1px, 0);
  535. }
  536. 20% {
  537. -moz-transform: translate3d(0, 2px, 0);
  538. -ms-transform: translate3d(0, 2px, 0);
  539. -webkit-transform: translate3d(0, 2px, 0);
  540. transform: translate3d(0, 2px, 0);
  541. }
  542. 40% {
  543. -moz-transform: translate3d(-2px, 0, 0);
  544. -ms-transform: translate3d(-2px, 0, 0);
  545. -webkit-transform: translate3d(-2px, 0, 0);
  546. transform: translate3d(-2px, 0, 0);
  547. }
  548. 60% {
  549. -moz-transform: translate3d(0, 0, 0);
  550. -ms-transform: translate3d(0, 0, 0);
  551. -webkit-transform: translate3d(0, 0, 0);
  552. transform: translate3d(0, 0, 0);
  553. }
  554. 80% {
  555. -moz-transform: translate3d(0, -1px, 0);
  556. -ms-transform: translate3d(0, -1px, 0);
  557. -webkit-transform: translate3d(0, -1px, 0);
  558. transform: translate3d(0, -1px, 0);
  559. }
  560. 100% {
  561. -moz-transform: translate3d(0, 0, 0);
  562. -ms-transform: translate3d(0, 0, 0);
  563. -webkit-transform: translate3d(0, 0, 0);
  564. transform: translate3d(0, 0, 0);
  565. }
  566. }@-moz-keyframes buttonMouseOn {
  567. 0% {
  568. -moz-transform: translateY(0%) translateZ(0);
  569. transform: translateY(0%) translateZ(0);
  570. }
  571. 50% {
  572. -moz-transform: translateY(-120%) translateZ(0);
  573. transform: translateY(-120%) translateZ(0);
  574. opacity: 0;
  575. }
  576. 51% {
  577. -moz-transform: translateY(120%) translateZ(0);
  578. transform: translateY(120%) translateZ(0);
  579. opacity: 1;
  580. }
  581. 100% {
  582. -moz-transform: translateY(0%) translateZ(0);
  583. transform: translateY(0%) translateZ(0);
  584. }
  585. }@-webkit-keyframes buttonMouseOn {
  586. 0% {
  587. -webkit-transform: translateY(0%) translateZ(0);
  588. transform: translateY(0%) translateZ(0);
  589. }
  590. 50% {
  591. -webkit-transform: translateY(-120%) translateZ(0);
  592. transform: translateY(-120%) translateZ(0);
  593. opacity: 0;
  594. }
  595. 51% {
  596. -webkit-transform: translateY(120%) translateZ(0);
  597. transform: translateY(120%) translateZ(0);
  598. opacity: 1;
  599. }
  600. 100% {
  601. -webkit-transform: translateY(0%) translateZ(0);
  602. transform: translateY(0%) translateZ(0);
  603. }
  604. }@keyframes buttonMouseOn {
  605. 0% {
  606. -moz-transform: translateY(0%) translateZ(0);
  607. -ms-transform: translateY(0%) translateZ(0);
  608. -webkit-transform: translateY(0%) translateZ(0);
  609. transform: translateY(0%) translateZ(0);
  610. }
  611. 50% {
  612. -moz-transform: translateY(-120%) translateZ(0);
  613. -ms-transform: translateY(-120%) translateZ(0);
  614. -webkit-transform: translateY(-120%) translateZ(0);
  615. transform: translateY(-120%) translateZ(0);
  616. opacity: 0;
  617. }
  618. 51% {
  619. -moz-transform: translateY(120%) translateZ(0);
  620. -ms-transform: translateY(120%) translateZ(0);
  621. -webkit-transform: translateY(120%) translateZ(0);
  622. transform: translateY(120%) translateZ(0);
  623. opacity: 1;
  624. }
  625. 100% {
  626. -moz-transform: translateY(0%) translateZ(0);
  627. -ms-transform: translateY(0%) translateZ(0);
  628. -webkit-transform: translateY(0%) translateZ(0);
  629. transform: translateY(0%) translateZ(0);
  630. }
  631. }@-moz-keyframes buttonMouseOff {
  632. 0% {
  633. -moz-transform: translateY(0%) translateZ(0);
  634. transform: translateY(0%) translateZ(0);
  635. }
  636. 50% {
  637. -moz-transform: translateY(120%) translateZ(0);
  638. transform: translateY(120%) translateZ(0);
  639. opacity: 0;
  640. }
  641. 51% {
  642. -moz-transform: translateY(-120%) translateZ(0);
  643. transform: translateY(-120%) translateZ(0);
  644. opacity: 1;
  645. }
  646. 100% {
  647. -moz-transform: translateY(0%) translateZ(0);
  648. transform: translateY(0%) translateZ(0);
  649. }
  650. }@-webkit-keyframes buttonMouseOff {
  651. 0% {
  652. -webkit-transform: translateY(0%) translateZ(0);
  653. transform: translateY(0%) translateZ(0);
  654. }
  655. 50% {
  656. -webkit-transform: translateY(120%) translateZ(0);
  657. transform: translateY(120%) translateZ(0);
  658. opacity: 0;
  659. }
  660. 51% {
  661. -webkit-transform: translateY(-120%) translateZ(0);
  662. transform: translateY(-120%) translateZ(0);
  663. opacity: 1;
  664. }
  665. 100% {
  666. -webkit-transform: translateY(0%) translateZ(0);
  667. transform: translateY(0%) translateZ(0);
  668. }
  669. }@keyframes buttonMouseOff {
  670. 0% {
  671. -moz-transform: translateY(0%) translateZ(0);
  672. -ms-transform: translateY(0%) translateZ(0);
  673. -webkit-transform: translateY(0%) translateZ(0);
  674. transform: translateY(0%) translateZ(0);
  675. }
  676. 50% {
  677. -moz-transform: translateY(120%) translateZ(0);
  678. -ms-transform: translateY(120%) translateZ(0);
  679. -webkit-transform: translateY(120%) translateZ(0);
  680. transform: translateY(120%) translateZ(0);
  681. opacity: 0;
  682. }
  683. 51% {
  684. -moz-transform: translateY(-120%) translateZ(0);
  685. -ms-transform: translateY(-120%) translateZ(0);
  686. -webkit-transform: translateY(-120%) translateZ(0);
  687. transform: translateY(-120%) translateZ(0);
  688. opacity: 1;
  689. }
  690. 100% {
  691. -moz-transform: translateY(0%) translateZ(0);
  692. -ms-transform: translateY(0%) translateZ(0);
  693. -webkit-transform: translateY(0%) translateZ(0);
  694. transform: translateY(0%) translateZ(0);
  695. }
  696. }.hidden {
  697. display: none;
  698. }
  699. .form {
  700. margin: 0;
  701. }
  702. .form .form-field {
  703. display: -webkit-flex;
  704. display: flex;
  705. -webkit-flex-flow: row wrap;
  706. flex-flow: row wrap;
  707. -webkit-justify-content: space-around;
  708. justify-content: space-around;
  709. display: inline-block;
  710. border: none;
  711. padding: 0;
  712. }
  713. .form .form-input {
  714. padding: .65em 3em;
  715. border: none;
  716. }
  717. .form .form-label {
  718. font-family: "schoolbook-web", serif;
  719. font-size: 0.75rem;
  720. padding: .5em;
  721. position: absolute;
  722. background-color: #fff;
  723. }
  724. .form .standard-btn {
  725. font-family: "futura-pt", sans-serif;
  726. margin-left: -5px;
  727. height: auto;
  728. width: auto;
  729. padding: 6px 22px 7px;
  730. top: -2px;
  731. font-size: 8px;
  732. letter-spacing: .3em;
  733. border-color: #fff;
  734. }
  735. .form-field {
  736. position: relative;
  737. }
  738. .form-field-label {
  739. font-family: "futura-pt", sans-serif;
  740. font-weight: bold;
  741. font-size: 12px;
  742. text-transform: uppercase;
  743. display: block;
  744. padding-bottom: .25rem;
  745. }
  746. .form-field-error .form-field-label {
  747. color: #bd0100;
  748. }
  749. .form-field-error .form-field-label:-moz-placeholder {
  750. color: #bd0100;
  751. }
  752. .form-field-error .form-field-label::-moz-placeholder {
  753. color: #bd0100;
  754. }
  755. .form-field-error .form-field-label:-ms-input-placeholder {
  756. color: #bd0100;
  757. }
  758. .form-field-error .form-field-label::-webkit-input-placeholder {
  759. color: #bd0100;
  760. }
  761. .form-radio-label, .form-checkbox-label {
  762. display: inline-block;
  763. position: relative;
  764. margin-right: 2em;
  765. }
  766. .form-radio-label .form-checkbox-input, .form-radio-label .form-radio-input, .form-checkbox-label .form-checkbox-input, .form-checkbox-label .form-radio-input {
  767. opacity: 0;
  768. margin: 0 .5em 0 0;
  769. }
  770. .form-radio-label .form-radio-input:checked+.form-radio-input-span, .form-checkbox-label .form-radio-input:checked+.form-radio-input-span {
  771. background: #000;
  772. }
  773. .form-checkbox-label {
  774. cursor: pointer;
  775. padding: 0 1.5em 0 3em;
  776. margin: 0 0 1em;
  777. font-family: "futura-pt", sans-serif;
  778. font-weight: bold;
  779. font-size: 0.75rem;
  780. min-height: 2em;
  781. text-transform: uppercase;
  782. display: -webkit-flex;
  783. display: flex;
  784. -webkit-align-items: center;
  785. align-items: center;
  786. }
  787. .form-checkbox-label:before {
  788. border: 3px solid #000;
  789. content: "";
  790. display: inline-block;
  791. height: 1.5em;
  792. left: 0;
  793. pointer-events: none;
  794. position: absolute;
  795. top: 0;
  796. width: 1.5em;
  797. }
  798. .form-checkbox-label.form-field-error {
  799. color: #bd0100;
  800. }
  801. .form-field-error.form-checkbox-label:before {
  802. border-color: #bd0100;
  803. }
  804. .form-checkbox-input {
  805. cursor: pointer;
  806. width: 1.5em;
  807. height: 1.5em;
  808. padding-left: 0;
  809. position: absolute;
  810. left: 0;
  811. top: 0;
  812. z-index: 1;
  813. }
  814. .form-checkbox-checked:after {
  815. background-image: url(../assets/icons/icons.png);
  816. background-position: -39px -213px;
  817. width: 39px;
  818. height: 34px;
  819. position: absolute;
  820. content: '';
  821. display: block;
  822. bottom: 0;
  823. -moz-transform: scale(0.75, 0.75);
  824. -ms-transform: scale(0.75, 0.75);
  825. -webkit-transform: scale(0.75, 0.75);
  826. transform: scale(0.75, 0.75);
  827. left: -.25em;
  828. z-index: 0;
  829. }
  830. .form-text-field-input {
  831. display: block;
  832. width: 100%;
  833. height: 2.5rem;
  834. border: none;
  835. font-family: "schoolbook-web", serif;
  836. padding-left: .75em;
  837. -moz-border-radius: 0;
  838. -webkit-border-radius: 0;
  839. border-radius: 0;
  840. }
  841. .form-field-error .form-text-field-input {
  842. border: 3px solid #bd0100;
  843. }
  844. .form-field-error .form-text-field-input:-moz-placeholder {
  845. color: #bd0100;
  846. }
  847. .form-field-error .form-text-field-input::-moz-placeholder {
  848. color: #bd0100;
  849. }
  850. .form-field-error .form-text-field-input:-ms-input-placeholder {
  851. color: #bd0100;
  852. }
  853. .form-field-error .form-text-field-input::-webkit-input-placeholder {
  854. color: #bd0100;
  855. }
  856. .form-field-number-input {
  857. -moz-appearance: textfield;
  858. }
  859. .form-field-number-input::-webkit-inner-spin-button, .form-field-number-input::-webkit-outer-spin-button {
  860. -webkit-appearance: none;
  861. margin: 0;
  862. }
  863. .form-radio-input-span {
  864. border-radius: 50%;
  865. display: inline-block;
  866. height: 1em;
  867. width: 1em;
  868. border: 3px solid #000;
  869. position: absolute;
  870. top: 0;
  871. pointer-events: none;
  872. left: 0;
  873. }
  874. .form-field-required .form-field-label:after {
  875. content: "*"}
  876. .form-dropdown {
  877. position: relative;
  878. display: block;
  879. }
  880. .form-dropdown-container {
  881. background: #fff url("../assets/texture-noise@1x.png") repeat;
  882. box-sizing: border-box;
  883. padding-right: 48px;
  884. height: 2.5em;
  885. overflow: hidden;
  886. position: relative;
  887. width: 100%}
  888. .form-dropdown-container:before {
  889. background: #fff;
  890. content: '';
  891. display: block;
  892. position: absolute;
  893. height: 0;
  894. width: 0;
  895. border-style: solid;
  896. border-width: 7px 6px 0;
  897. border-color: #000 transparent transparent;
  898. right: .9em;
  899. top: 1em;
  900. z-index: 2;
  901. pointer-events: none;
  902. }
  903. @media all and (min-width: 901px) {
  904. .form-dropdown-container.form-dropdown-container.form-dropdown-options-container-active {
  905. overflow: visible;
  906. }
  907. }.form-dropdown-option {
  908. box-sizing: border-box;
  909. cursor: pointer;
  910. font-family: "schoolbook-web", serif;
  911. font-size: 11px;
  912. min-height: 3em;
  913. border-bottom: #000 1px solid;
  914. color: #000;
  915. padding: .9em 0;
  916. margin: 0 .9em;
  917. }
  918. .form-dropdown-option:last-child {
  919. border-bottom: none;
  920. }
  921. .form-dropdown-option-selected {
  922. border-bottom: #000 3px solid;
  923. padding-top: 1.2em;
  924. }
  925. .form-dropdown-option-highlighted {
  926. background-color: #ebeae5;
  927. }
  928. .form-dropdown-select {
  929. border: 1em solid transparent;
  930. height: 100%;
  931. left: 0;
  932. position: absolute;
  933. top: 0;
  934. opacity: 0;
  935. z-index: 3;
  936. width: 100%}
  937. @media all and (min-width: 901px) {
  938. .form-dropdown-select {
  939. display: none;
  940. }
  941. }.form-dropdown-value-container {
  942. cursor: pointer;
  943. color: #000;
  944. box-sizing: border-box;
  945. font-family: "schoolbook-web", serif;
  946. font-size: 11px;
  947. height: 100%;
  948. left: 0;
  949. padding: 1.2em 0.9em;
  950. position: absolute;
  951. top: 0;
  952. width: 100%;
  953. z-index: 1;
  954. }
  955. .form-dropdown-options-container-active .form-dropdown-value-container {
  956. z-index: 0;
  957. }
  958. .form-dropdown-options-container {
  959. background: #fff url("../assets/texture-noise@1x.png") repeat;
  960. left: 0;
  961. height: 100%;
  962. overflow: hidden;
  963. position: absolute;
  964. top: 0;
  965. visibility: hidden;
  966. width: 100%;
  967. z-index: 0;
  968. }
  969. .form-dropdown-options-container-active .form-dropdown-options-container {
  970. overflow-y: auto;
  971. height: auto;
  972. max-height: 300px;
  973. visibility: visible;
  974. z-index: 3;
  975. }
  976. .form-dropdown-options-container-active:before {
  977. z-index: 4;
  978. }
  979. .form-dropdown-value {
  980. background-color: #000;
  981. color: #fff;
  982. font-family: "futura-pt", sans-serif;
  983. font-size: 0.75rem;
  984. font-weight: bold;
  985. line-height: 0.75rem;
  986. padding: 1em;
  987. text-transform: uppercase;
  988. margin-right: .25em;
  989. }
  990. .form-dropdown-value::after {
  991. content: '';
  992. display: block;
  993. border-left: 0.5em solid transparent;
  994. border-top: 0.5em solid #fff;
  995. border-right: 0.5em solid transparent;
  996. margin-left: -.5em;
  997. margin-top: -.2em;
  998. position: absolute;
  999. right: 18px;
  1000. top: 50%;
  1001. z-index: 2;
  1002. }
  1003. .standard-btn {
  1004. background-image: url("../assets/texture-noise@1x.png");
  1005. border-color: #000;
  1006. border-width: 2px;
  1007. border-style: solid;
  1008. box-sizing: border-box;
  1009. height: auto;
  1010. display: block;
  1011. font-family: "futura-pt", sans-serif;
  1012. font-size: 0.625rem;
  1013. font-weight: bold;
  1014. letter-spacing: 0.1875rem;
  1015. padding: 11px 15px;
  1016. position: relative;
  1017. text-align: center;
  1018. text-transform: uppercase;
  1019. text-decoration: none;
  1020. width: auto;
  1021. }
  1022. .standard-btn.standard-btn-light {
  1023. background-color: #fff;
  1024. border-color: #fff;
  1025. color: #000;
  1026. }
  1027. .standard-btn.standard-btn-dark {
  1028. background-color: #000;
  1029. border-color: #000;
  1030. color: #fff;
  1031. }
  1032. .standard-btn-rollover-text {
  1033. position: relative;
  1034. display: block;
  1035. -moz-animation: buttonMouseOff 500ms ease-out;
  1036. -webkit-animation: buttonMouseOff 500ms ease-out;
  1037. animation: buttonMouseOff 500ms ease-out;
  1038. }
  1039. .standard-btn:hover .standard-btn-rollover-text {
  1040. -moz-animation: buttonMouseOn 200ms ease-in-out;
  1041. -webkit-animation: buttonMouseOn 200ms ease-in-out;
  1042. animation: buttonMouseOn 200ms ease-in-out;
  1043. }
  1044. .play-btn {
  1045. background: url("/assets/play-button-light.png") no-repeat;
  1046. -moz-background-size: contain;
  1047. -o-background-size: contain;
  1048. -webkit-background-size: contain;
  1049. background-size: contain;
  1050. height: 77px;
  1051. overflow: hidden;
  1052. padding-left: 77px;
  1053. width: 0;
  1054. }
  1055. .icon {
  1056. clip: auto;
  1057. color: transparent;
  1058. display: block;
  1059. height: 0;
  1060. margin: 0;
  1061. overflow: hidden;
  1062. padding: 0;
  1063. text-indent: 100%;
  1064. white-space: nowrap;
  1065. width: 0;
  1066. background-repeat: no-repeat;
  1067. background-size: 100% 100%}
  1068. .download-btn-icon {
  1069. left: -1em;
  1070. top: .5em;
  1071. display: inline-block;
  1072. position: relative;
  1073. margin-top: -1.2em;
  1074. margin-left: -3em;
  1075. -moz-transform: scale(0.7, 0.7);
  1076. -ms-transform: scale(0.7, 0.7);
  1077. -webkit-transform: scale(0.7, 0.7);
  1078. transform: scale(0.7, 0.7);
  1079. }
  1080. .android-download-btn .download-btn-icon {
  1081. margin-left: -5.5em;
  1082. }
  1083. .download-btn-text {
  1084. position: absolute;
  1085. top: 1em;
  1086. left: 6em;
  1087. -moz-animation: buttonMouseOff 500ms ease-out;
  1088. -webkit-animation: buttonMouseOff 500ms ease-out;
  1089. animation: buttonMouseOff 500ms ease-out;
  1090. }
  1091. .android-download-btn .download-btn-text {
  1092. left: 5em;
  1093. }
  1094. .download-button:hover .download-btn-text {
  1095. -moz-animation: buttonMouseOn 200ms ease-in-out;
  1096. -webkit-animation: buttonMouseOn 200ms ease-in-out;
  1097. animation: buttonMouseOn 200ms ease-in-out;
  1098. }
  1099. .text-icon {
  1100. width: 100%;
  1101. height: 100%;
  1102. position: relative;
  1103. }
  1104. .vt-icon {
  1105. background-image: url("/assets/vault-tec-icon-black.svg");
  1106. background-position: center -22px;
  1107. background-size: 80px auto;
  1108. background-repeat: no-repeat;
  1109. height: 30px;
  1110. width: 50px;
  1111. }
  1112. .vt-icon-white {
  1113. width: 72px;
  1114. height: 30px;
  1115. background: url("../assets/icons/icons.png") -286px -129px;
  1116. }
  1117. .apple-icon-sm {
  1118. width: 17px;
  1119. height: 23px;
  1120. background: url("../assets/icons/icons.png") -362px -161px;
  1121. }
  1122. .android-icon-sm {
  1123. width: 20px;
  1124. height: 23px;
  1125. background: url("../assets/icons/icons.png") -358px -129px;
  1126. }
  1127. .callout-arrow-icon {
  1128. background-image: url(../assets/icons/icons.png);
  1129. background-position: -160px -122px;
  1130. width: 39px;
  1131. height: 36px;
  1132. }
  1133. .preorder-arrow-small {
  1134. background: url("../assets/icons/icons.png") 0px -161px;
  1135. width: 70px;
  1136. height: 52px;
  1137. display: inline-block;
  1138. position: absolute;
  1139. left: 0;
  1140. top: 3px;
  1141. }
  1142. .esrb-privacy-icon {
  1143. background: url("../assets/icons/icons.png") -214px 0px;
  1144. height: 64px;
  1145. width: 172px;
  1146. }
  1147. .esrb-rating-icon {
  1148. background: url("../assets/icons/icons.png") -214px -64px;
  1149. height: 65px;
  1150. width: 128px;
  1151. }
  1152. .esrb-privacy-icon-large {
  1153. background: url("/assets/icons/esrb-privacy-icon-large.png");
  1154. }
  1155. .esrb-rating-icon-large {
  1156. background: url("/assets/icons/esrb-rating-icon-large.png");
  1157. }
  1158. .franchise-icon {
  1159. background-image: url("/assets/icons/franchise-icon.svg");
  1160. width: 93px;
  1161. height: 40px;
  1162. }
  1163. .beth-soft-icon {
  1164. background-image: url("/assets/icons/bethesda-icon-black.svg");
  1165. width: 323px;
  1166. height: 46px;
  1167. }
  1168. .beth-soft-icon-white {
  1169. background-image: url("/assets/icons/bethesda-icon-white.svg");
  1170. width: 323px;
  1171. height: 46px;
  1172. }
  1173. .beth-studios-icon-white {
  1174. background-image: url("/assets/icons/bethesda-studios-icon-white.svg");
  1175. width: 309px;
  1176. height: 145px;
  1177. }
  1178. .beth-studios-icon {
  1179. background-image: url("/assets/icons/bethesda-studios-icon-black.svg");
  1180. width: 309px;
  1181. height: 145px;
  1182. }
  1183. .xbox-360-icon {
  1184. background-image: url("/assets/icons/xbox-360-icon.svg");
  1185. width: 96px;
  1186. height: 18px;
  1187. }
  1188. .xbox-360-icon-black {
  1189. background-image: url("/assets/icons/xbox-360-icon-black.svg");
  1190. width: 96px;
  1191. height: 20px;
  1192. }
  1193. .xbox-one-icon {
  1194. background-image: url("/assets/icons/xbox-one-icon.svg");
  1195. width: 96px;
  1196. height: 18px;
  1197. }
  1198. .xbox-one-icon-black {
  1199. background-image: url("/assets/icons/xbox-one-icon-black.svg");
  1200. width: 96px;
  1201. height: 20px;
  1202. }
  1203. .ps4-icon {
  1204. background-image: url("/assets/icons/ps4-icon.svg");
  1205. width: 96px;
  1206. height: 18px;
  1207. }
  1208. .ps4-icon-black {
  1209. background-image: url("/assets/icons/ps4-icon-black.svg");
  1210. width: 96px;
  1211. height: 21px;
  1212. }
  1213. .ps3-icon {
  1214. background-image: url("/assets/icons/ps3-icon.svg");
  1215. width: 128px;
  1216. height: 24px;
  1217. }
  1218. .ps3-icon-black {
  1219. background-image: url("/assets/icons/ps3-icon-black.svg");
  1220. width: 128px;
  1221. height: 24px;
  1222. }
  1223. .pc-icon {
  1224. background-image: url("/assets/icons/pc-icon.svg");
  1225. width: 30px;
  1226. height: 30px;
  1227. }
  1228. .pc-icon-black {
  1229. background-image: url("/assets/icons/pc-icon-black.svg");
  1230. width: 30px;
  1231. height: 30px;
  1232. }
  1233. .mac-icon {
  1234. background-image: url("/assets/icons/mac-icon.svg");
  1235. width: 30px;
  1236. height: 30px;
  1237. }
  1238. .mac-icon-black {
  1239. background-image: url("/assets/icons/mac-icon-black.svg");
  1240. width: 30px;
  1241. height: 30px;
  1242. }
  1243. .steam-icon {
  1244. background-image: url("/assets/icons/steam-icon.svg");
  1245. width: 60px;
  1246. height: 30px;
  1247. }
  1248. .steam-icon-black {
  1249. background-image: url("/assets/icons/steam-icon-black.svg");
  1250. width: 60px;
  1251. height: 30px;
  1252. }
  1253. .rating-pt-br_pegi-18-provisional {
  1254. background-image: url("/assets/ratings/pt-br_pegi-18-provisional.svg");
  1255. width: 104px;
  1256. height: 60px;
  1257. }
  1258. .rating-de-de_pegi-18-provisional {
  1259. background-image: url("/assets/ratings/de-de_pegi-18-provisional.svg");
  1260. width: 45px;
  1261. height: 60px;
  1262. }
  1263. .rating-icon.rating-en-gb_check-classification {
  1264. background-image: url("/assets/ratings/en-gb_check-classification.svg");
  1265. width: 150px;
  1266. height: 60px;
  1267. }
  1268. .rating-en-us_esrb-rp {
  1269. background-image: url("/assets/ratings/en-us_esrb-rp.svg");
  1270. width: 110px;
  1271. height: 60px;
  1272. }
  1273. .rating-en-us_esrb-rp-m {
  1274. background-image: url("/assets/ratings/en-us_esrb-rp-m.svg");
  1275. width: 70px;
  1276. height: 60px;
  1277. }
  1278. .rating-en-gb_pegi-18-provisional, .rating-es-es_pegi-18-provisional {
  1279. background-image: url("/assets/ratings/es-es_pegi-18-provisional.svg");
  1280. width: 42px;
  1281. height: 60px;
  1282. background-size: contain;
  1283. }
  1284. .rating-fr-fr_pegi-18-provisional {
  1285. background-image: url("/assets/ratings/fr-fr_pegi-18-provisional.svg");
  1286. width: 50px;
  1287. height: 60px;
  1288. }
  1289. .rating-it-it_pegi-18-provisional {
  1290. background-image: url("/assets/ratings/it-it_pegi-18-provisional.svg");
  1291. width: 50px;
  1292. height: 60px;
  1293. }
  1294. .rating-ja_cero-rp {
  1295. background-image: url("/assets/ratings/ja_cero-rp.svg");
  1296. width: 55px;
  1297. height: 60px;
  1298. }
  1299. .rating-pl_pegi-18-provisional {
  1300. background-image: url("/assets/ratings/pl_pegi-18-provisional.svg");
  1301. width: 50px;
  1302. height: 60px;
  1303. }
  1304. .rating-ru_pegi-18-provisional {
  1305. background-image: url("/assets/ratings/ru_pegi-18-provisional.svg");
  1306. width: 140px;
  1307. height: 60px;
  1308. }
  1309. .rating-de-de_usk-rp-lrg {
  1310. background-image: url("/assets/ratings/de-de_usk-rp-lrg.svg");
  1311. height: 60px;
  1312. width: 50px;
  1313. }
  1314. .social-network-icon.youtube-icon {
  1315. background: url("/assets/icons/youtube-white-circle.svg");
  1316. width: 2.5rem;
  1317. height: 2.5rem;
  1318. background-size: 100%;
  1319. background-repeat: no-repeat;
  1320. }
  1321. @media (orientation: landscape) {
  1322. .social-network-icon.youtube-icon {
  1323. height: 2.875rem;
  1324. width: 2.875rem;
  1325. }
  1326. }.social-network-icon.twitter-icon {
  1327. background: url("/assets/icons/twitter-white-circle.svg");
  1328. width: 2.5rem;
  1329. height: 2.5rem;
  1330. background-size: 100%;
  1331. background-repeat: no-repeat;
  1332. }
  1333. @media (orientation: landscape) {
  1334. .social-network-icon.twitter-icon {
  1335. height: 2.875rem;
  1336. width: 2.875rem;
  1337. }
  1338. }.social-network-icon.facebook-icon {
  1339. background: url("/assets/icons/facebook-white-circle.svg");
  1340. width: 2.5rem;
  1341. height: 2.5rem;
  1342. background-size: 100%;
  1343. background-repeat: no-repeat;
  1344. }
  1345. @media (orientation: landscape) {
  1346. .social-network-icon.facebook-icon {
  1347. height: 2.875rem;
  1348. width: 2.875rem;
  1349. }
  1350. }.social-network-icon.tumblr-icon {
  1351. background: url("/assets/icons/tumbler-white-circle.svg");
  1352. width: 2.5rem;
  1353. height: 2.5rem;
  1354. background-size: 100%;
  1355. background-repeat: no-repeat;
  1356. }
  1357. @media (orientation: landscape) {
  1358. .social-network-icon.tumblr-icon {
  1359. height: 2.875rem;
  1360. width: 2.875rem;
  1361. }
  1362. }.social-network-icon.vine-icon {
  1363. background: url("/assets/icons/vine-white-circle.svg");
  1364. width: 2.5rem;
  1365. height: 2.5rem;
  1366. background-size: 100%;
  1367. background-repeat: no-repeat;
  1368. }
  1369. @media (orientation: landscape) {
  1370. .social-network-icon.vine-icon {
  1371. height: 2.875rem;
  1372. width: 2.875rem;
  1373. }
  1374. }.social-network-icon.instagram-icon {
  1375. background: url("/assets/icons/instagram-white-circle.svg");
  1376. width: 2.5rem;
  1377. height: 2.5rem;
  1378. background-size: 100%;
  1379. background-repeat: no-repeat;
  1380. }
  1381. @media (orientation: landscape) {
  1382. .social-network-icon.instagram-icon {
  1383. height: 2.875rem;
  1384. width: 2.875rem;
  1385. }
  1386. }.app {
  1387. background-color: #000;
  1388. height: 100%;
  1389. left: 0;
  1390. overflow: hidden;
  1391. opacity: 0;
  1392. position: absolute;
  1393. transition: opacity 500ms ease-in-out 285ms, visibility 500ms ease-in-out 285ms, z-index 501ms linear 285ms;
  1394. -webkit-backface-visibility: hidden;
  1395. visibility: hidden;
  1396. top: 0;
  1397. width: 100%;
  1398. z-index: 1;
  1399. }
  1400. .page-active .app {
  1401. transition: opacity 500ms ease-in-out 285ms, visibility 500ms ease-in-out 285ms;
  1402. overflow: visible;
  1403. visibility: visible;
  1404. opacity: 1;
  1405. z-index: 2;
  1406. }
  1407. .page-loading.page-active .app {
  1408. transition-delay: 0ms;
  1409. }
  1410. .modal-container-active.page-active .app {
  1411. overflow: visible;
  1412. position: fixed;
  1413. top: 0;
  1414. left: 0;
  1415. z-index: 1;
  1416. }
  1417. .page-error-active .app {
  1418. overflow: hidden;
  1419. z-index: 1;
  1420. }
  1421. .pages {
  1422. position: relative;
  1423. }
  1424. .page {
  1425. background: #ecebe8 url("../assets/texture-noise@1x.png") repeat;
  1426. box-sizing: border-box;
  1427. height: 100%;
  1428. left: 0;
  1429. overflow: hidden;
  1430. padding-top: 69px;
  1431. position: absolute;
  1432. top: 0;
  1433. width: 100%;
  1434. z-index: 0;
  1435. }
  1436. .page:before {
  1437. background-color: #000;
  1438. content: "";
  1439. display: block;
  1440. height: 69px;
  1441. left: 0;
  1442. position: absolute;
  1443. top: 0;
  1444. width: 100%}
  1445. .page.page-active {
  1446. overflow: visible;
  1447. height: auto;
  1448. position: relative;
  1449. z-index: 1;
  1450. }
  1451. .page-sub-nav-module.module {
  1452. min-height: 0;
  1453. }
  1454. .page-sub-nav-module-wrapper {
  1455. margin: 0 auto;
  1456. max-width: 1100px;
  1457. padding: 0 1rem;
  1458. }
  1459. .page-sub-nav.section-heading {
  1460. display: none;
  1461. text-align: center;
  1462. align-content: space-between;
  1463. padding: 0;
  1464. margin: 0;
  1465. }
  1466. .page-sub-nav-item {
  1467. margin: 0 2em;
  1468. padding: 0;
  1469. font-size: 12px;
  1470. display: -webkit-inline-flex;
  1471. display: inline-flex;
  1472. position: relative;
  1473. }
  1474. .page-sub-nav-item .page-sub-nav-item-heading {
  1475. font-family: "futura-pt", sans-serif;
  1476. font-weight: bold;
  1477. text-transform: uppercase;
  1478. letter-spacing: 0.1em;
  1479. padding: 1.2em 0;
  1480. font-size: 1.17em;
  1481. }
  1482. .page-sub-nav-item:first-of-type {
  1483. position: initial;
  1484. }
  1485. .page-sub-nav-item:before {
  1486. position: absolute;
  1487. content: '';
  1488. display: block;
  1489. left: -2.25em;
  1490. top: 2.15em;
  1491. height: .45em;
  1492. width: .45em;
  1493. background: #000;
  1494. border-radius: 1em;
  1495. }
  1496. @media all and (min-width: 901px) {
  1497. .page-sub-nav.section-heading {
  1498. display: block;
  1499. margin-bottom: 0;
  1500. }
  1501. }@-moz-keyframes rotatePageLoadCog {
  1502. 0% {
  1503. -moz-transform: translateX(0%) translateZ(0);
  1504. transform: translateX(0%) translateZ(0);
  1505. -moz-transform: rotate(0deg);
  1506. transform: rotate(0deg);
  1507. }
  1508. 100% {
  1509. -moz-transform: rotate(360deg);
  1510. transform: rotate(360deg);
  1511. }
  1512. }@-webkit-keyframes rotatePageLoadCog {
  1513. 0% {
  1514. -webkit-transform: translateX(0%) translateZ(0);
  1515. transform: translateX(0%) translateZ(0);
  1516. -webkit-transform: rotate(0deg);
  1517. transform: rotate(0deg);
  1518. }
  1519. 100% {
  1520. -webkit-transform: rotate(360deg);
  1521. transform: rotate(360deg);
  1522. }
  1523. }@keyframes rotatePageLoadCog {
  1524. 0% {
  1525. -moz-transform: translateX(0%) translateZ(0);
  1526. -ms-transform: translateX(0%) translateZ(0);
  1527. -webkit-transform: translateX(0%) translateZ(0);
  1528. transform: translateX(0%) translateZ(0);
  1529. -moz-transform: rotate(0deg);
  1530. -ms-transform: rotate(0deg);
  1531. -webkit-transform: rotate(0deg);
  1532. transform: rotate(0deg);
  1533. }
  1534. 100% {
  1535. -moz-transform: rotate(360deg);
  1536. -ms-transform: rotate(360deg);
  1537. -webkit-transform: rotate(360deg);
  1538. transform: rotate(360deg);
  1539. }
  1540. }.page-loader {
  1541. background-color: #000;
  1542. height: 100%;
  1543. left: 0;
  1544. position: absolute;
  1545. top: 0;
  1546. width: 100%;
  1547. display: -ms-flexbox;
  1548. -ms-flex-pack: center;
  1549. -ms-flex-align: center;
  1550. display: -webkit-flex;
  1551. display: flex;
  1552. -webkit-flex-flow: column wrap;
  1553. flex-flow: column wrap;
  1554. -webkit-justify-content: center;
  1555. justify-content: center;
  1556. -webkit-align-items: center;
  1557. align-items: center;
  1558. transition: opacity 275ms ease-in-out, visibility 275ms ease-in-out, z-index 276ms linear;
  1559. -webkit-backface-visibility: hidden;
  1560. opacity: 0;
  1561. visibility: hidden;
  1562. z-index: 0;
  1563. }
  1564. .page-loader:after {
  1565. background-image: url("/assets/cog.svg");
  1566. background-repeat: no-repeat;
  1567. background-size: contain;
  1568. transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
  1569. content: "";
  1570. display: block;
  1571. height: 63px;
  1572. width: 63px;
  1573. -moz-animation: rotatePageLoadCog 4.5s linear infinite;
  1574. -webkit-animation: rotatePageLoadCog 4.5s linear infinite;
  1575. animation: rotatePageLoadCog 4.5s linear infinite;
  1576. -moz-animation-play-state: paused;
  1577. -webkit-animation-play-state: paused;
  1578. animation-play-state: paused;
  1579. opacity: 0;
  1580. visibility: hidden;
  1581. }
  1582. @media all and (min-width: 901px) {
  1583. .page-loader {
  1584. -webkit-flex-flow: row wrap;
  1585. flex-flow: row wrap;
  1586. }
  1587. }.page-loading .page-loader, .page-loading.page-active .page-loader {
  1588. opacity: 1;
  1589. transition: opacity 275ms ease-in-out, visibility 275ms ease-in-out;
  1590. visibility: visible;
  1591. z-index: 10;
  1592. }
  1593. .page-loading .page-loader:after, .page-loading.page-active .page-loader:after {
  1594. -moz-animation-play-state: running;
  1595. -webkit-animation-play-state: running;
  1596. animation-play-state: running;
  1597. opacity: 1;
  1598. visibility: visible;
  1599. }
  1600. .page-active .page-loader, .page-error-active .page-loader {
  1601. opacity: 0;
  1602. visibility: hidden;
  1603. z-index: 0;
  1604. }
  1605. .page-active .page-loader:after, .page-error-active .page-loader:after {
  1606. -moz-animation-play-state: paused;
  1607. -webkit-animation-play-state: paused;
  1608. animation-play-state: paused;
  1609. opacity: 0;
  1610. visibility: hidden;
  1611. }
  1612. .page-error {
  1613. background: #000 repeat url("/assets/texture-noise@1x.png");
  1614. height: 100%;
  1615. left: 0;
  1616. position: absolute;
  1617. top: 0;
  1618. width: 100%;
  1619. display: -webkit-flex;
  1620. display: flex;
  1621. -webkit-flex-flow: column wrap;
  1622. flex-flow: column wrap;
  1623. -webkit-justify-content: center;
  1624. justify-content: center;
  1625. -webkit-align-items: center;
  1626. align-items: center;
  1627. -moz-animation-play-state: paused;
  1628. -webkit-animation-play-state: paused;
  1629. animation-play-state: paused;
  1630. opacity: 0;
  1631. transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
  1632. visibility: hidden;
  1633. z-index: auto;
  1634. }
  1635. .page-error-active .page-error {
  1636. opacity: 1;
  1637. transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out, height 400ms ease;
  1638. visibility: visible;
  1639. z-index: 3;
  1640. }
  1641. .page-error-heading, .page-error-text {
  1642. box-sizing: border-box;
  1643. display: block;
  1644. margin: 0 auto;
  1645. max-width: 510px;
  1646. text-align: center;
  1647. width: 100%;
  1648. padding: 0 1em;
  1649. }
  1650. .page-error-heading {
  1651. color: #eae9e4;
  1652. font-family: "futura-pt", sans-serif;
  1653. font-size: 1.875rem;
  1654. font-weight: bold;
  1655. margin-bottom: 1em;
  1656. position: relative;
  1657. text-transform: uppercase;
  1658. padding-top: 50px;
  1659. }
  1660. .page-error-heading:before {
  1661. content: "";
  1662. display: block;
  1663. left: 50%;
  1664. margin-left: -36px;
  1665. position: absolute;
  1666. top: 0;
  1667. background-image: url(../assets/icons/icons.png);
  1668. background-position: -286px -129px;
  1669. width: 72px;
  1670. height: 30px;
  1671. }
  1672. .page-error-text {
  1673. font-family: "schoolbook-web", serif;
  1674. color: #eae9e4;
  1675. font-size: 0.875rem;
  1676. }
  1677. .module {
  1678. box-sizing: border-box;
  1679. list-style: none;
  1680. margin: 0 auto;
  1681. overflow: hidden;
  1682. padding: 0;
  1683. width: 100%;
  1684. position: relative;
  1685. min-height: 95px;
  1686. }
  1687. .module:before {
  1688. background: #ecebe8 url("../assets/texture-noise@1x.png") repeat;
  1689. box-sizing: border-box;
  1690. color: #000;
  1691. 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";
  1692. font-size: 0.875rem;
  1693. font-family: "futura-pt-condensed", sans-serif;
  1694. font-weight: 400;
  1695. display: block;
  1696. height: 100%;
  1697. left: 0;
  1698. padding-top: 36px;
  1699. position: absolute;
  1700. text-align: center;
  1701. text-transform: uppercase;
  1702. top: 0;
  1703. white-space: pre;
  1704. width: 100%;
  1705. z-index: 10;
  1706. }
  1707. .module:after {
  1708. background: url("/assets/texture-cog-dark.png") no-repeat center center;
  1709. content: "";
  1710. display: block;
  1711. height: 92px;
  1712. left: 50%;
  1713. margin-left: -45px;
  1714. position: absolute;
  1715. top: 0;
  1716. width: 92px;
  1717. -moz-animation: rotatePageLoadCog 4.5s linear infinite;
  1718. -webkit-animation: rotatePageLoadCog 4.5s linear infinite;
  1719. animation: rotatePageLoadCog 4.5s linear infinite;
  1720. z-index: 10;
  1721. }
  1722. .module-loaded {
  1723. display: block;
  1724. background: none;
  1725. }
  1726. .module-loaded:before {
  1727. display: none;
  1728. }
  1729. .module-loaded:after {
  1730. display: none;
  1731. -moz-animation: none;
  1732. -webkit-animation: none;
  1733. animation: none;
  1734. }
  1735. .module-error {
  1736. text-align: center;
  1737. background: none;
  1738. min-height: 50%;
  1739. margin-bottom: 3em;
  1740. margin-top: 3em;
  1741. z-index: 0;
  1742. }
  1743. .module-error:before {
  1744. content: "Access Error";
  1745. background: url("/assets/icons/vt-icon.png") no-repeat top center;
  1746. padding-top: 40px;
  1747. font-family: "futura-pt-condensed", sans-serif;
  1748. font-weight: 400;
  1749. font-size: 0.9375rem;
  1750. color: #000;
  1751. margin-bottom: 2em;
  1752. position: absolute;
  1753. width: 390px;
  1754. top: 50px;
  1755. left: 50%;
  1756. margin-left: -195px;
  1757. z-index: 11;
  1758. }
  1759. .module-error:after {
  1760. box-sizing: border-box;
  1761. 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.";
  1762. font: 0.875rem "schoolbook-web", serif;
  1763. color: #000;
  1764. background: #ecebe8 url("../assets/texture-noise@1x.png") repeat;
  1765. -moz-animation: none;
  1766. -webkit-animation: none;
  1767. animation: none;
  1768. position: absolute;
  1769. left: 0;
  1770. top: 0;
  1771. padding-top: 130px;
  1772. text-align: center;
  1773. width: 100%;
  1774. white-space: pre;
  1775. height: 100%;
  1776. margin: 0;
  1777. z-index: 10;
  1778. }
  1779. .four-oh-four-page.page {
  1780. -moz-transition: opacity 500ms linear, visibility 500ms linear, z-index 501ms linear;
  1781. -o-transition: opacity 500ms linear, visibility 500ms linear, z-index 501ms linear;
  1782. -webkit-transition: opacity 500ms linear, visibility 500ms linear, z-index 501ms linear;
  1783. transition: opacity 500ms linear, visibility 500ms linear, z-index 501ms linear;
  1784. height: 100%;
  1785. opacity: 0;
  1786. visibility: hidden;
  1787. z-index: 0;
  1788. }
  1789. .four-oh-four-page-active .four-oh-four-page.page {
  1790. opacity: 1;
  1791. visibility: visible;
  1792. z-index: 2;
  1793. }
  1794. .four-oh-four-image {
  1795. box-sizing: border-box;
  1796. display: block;
  1797. height: auto;
  1798. margin: 100px auto 0;
  1799. max-width: 1100px;
  1800. width: 100%;
  1801. padding: 0 1rem;
  1802. }
  1803. @-moz-keyframes glitch {
  1804. 0% {
  1805. -moz-transform: translate3d(0, 0, 0);
  1806. transform: translate3d(0, 0, 0);
  1807. }
  1808. 12% {
  1809. -moz-transform: translate3d(0, -6%, 0);
  1810. transform: translate3d(0, -6%, 0);
  1811. }
  1812. 24% {
  1813. -moz-transform: translate3d(0, -12%, 0);
  1814. transform: translate3d(0, -12%, 0);
  1815. }
  1816. 36% {
  1817. -moz-transform: translate3d(0, -24%, 0);
  1818. transform: translate3d(0, -24%, 0);
  1819. }
  1820. 48% {
  1821. -moz-transform: translate3d(0, -36%, 0);
  1822. transform: translate3d(0, -36%, 0);
  1823. }
  1824. 60% {
  1825. -moz-transform: translate3d(0, -48%, 0);
  1826. transform: translate3d(0, -48%, 0);
  1827. }
  1828. 72% {
  1829. -moz-transform: translate3d(0, -60%, 0);
  1830. transform: translate3d(0, -60%, 0);
  1831. }
  1832. 96% {
  1833. -moz-transform: translate3d(0, -72%, 0);
  1834. transform: translate3d(0, -72%, 0);
  1835. }
  1836. 100% {
  1837. -moz-transform: translate3d(0, 0, 0);
  1838. transform: translate3d(0, 0, 0);
  1839. }
  1840. }@-webkit-keyframes glitch {
  1841. 0% {
  1842. -webkit-transform: translate3d(0, 0, 0);
  1843. transform: translate3d(0, 0, 0);
  1844. }
  1845. 12% {
  1846. -webkit-transform: translate3d(0, -6%, 0);
  1847. transform: translate3d(0, -6%, 0);
  1848. }
  1849. 24% {
  1850. -webkit-transform: translate3d(0, -12%, 0);
  1851. transform: translate3d(0, -12%, 0);
  1852. }
  1853. 36% {
  1854. -webkit-transform: translate3d(0, -24%, 0);
  1855. transform: translate3d(0, -24%, 0);
  1856. }
  1857. 48% {
  1858. -webkit-transform: translate3d(0, -36%, 0);
  1859. transform: translate3d(0, -36%, 0);
  1860. }
  1861. 60% {
  1862. -webkit-transform: translate3d(0, -48%, 0);
  1863. transform: translate3d(0, -48%, 0);
  1864. }
  1865. 72% {
  1866. -webkit-transform: translate3d(0, -60%, 0);
  1867. transform: translate3d(0, -60%, 0);
  1868. }
  1869. 96% {
  1870. -webkit-transform: translate3d(0, -72%, 0);
  1871. transform: translate3d(0, -72%, 0);
  1872. }
  1873. 100% {
  1874. -webkit-transform: translate3d(0, 0, 0);
  1875. transform: translate3d(0, 0, 0);
  1876. }
  1877. }@keyframes glitch {
  1878. 0% {
  1879. -moz-transform: translate3d(0, 0, 0);
  1880. -ms-transform: translate3d(0, 0, 0);
  1881. -webkit-transform: translate3d(0, 0, 0);
  1882. transform: translate3d(0, 0, 0);
  1883. }
  1884. 12% {
  1885. -moz-transform: translate3d(0, -6%, 0);
  1886. -ms-transform: translate3d(0, -6%, 0);
  1887. -webkit-transform: translate3d(0, -6%, 0);
  1888. transform: translate3d(0, -6%, 0);
  1889. }
  1890. 24% {
  1891. -moz-transform: translate3d(0, -12%, 0);
  1892. -ms-transform: translate3d(0, -12%, 0);
  1893. -webkit-transform: translate3d(0, -12%, 0);
  1894. transform: translate3d(0, -12%, 0);
  1895. }
  1896. 36% {
  1897. -moz-transform: translate3d(0, -24%, 0);
  1898. -ms-transform: translate3d(0, -24%, 0);
  1899. -webkit-transform: translate3d(0, -24%, 0);
  1900. transform: translate3d(0, -24%, 0);
  1901. }
  1902. 48% {
  1903. -moz-transform: translate3d(0, -36%, 0);
  1904. -ms-transform: translate3d(0, -36%, 0);
  1905. -webkit-transform: translate3d(0, -36%, 0);
  1906. transform: translate3d(0, -36%, 0);
  1907. }
  1908. 60% {
  1909. -moz-transform: translate3d(0, -48%, 0);
  1910. -ms-transform: translate3d(0, -48%, 0);
  1911. -webkit-transform: translate3d(0, -48%, 0);
  1912. transform: translate3d(0, -48%, 0);
  1913. }
  1914. 72% {
  1915. -moz-transform: translate3d(0, -60%, 0);
  1916. -ms-transform: translate3d(0, -60%, 0);
  1917. -webkit-transform: translate3d(0, -60%, 0);
  1918. transform: translate3d(0, -60%, 0);
  1919. }
  1920. 96% {
  1921. -moz-transform: translate3d(0, -72%, 0);
  1922. -ms-transform: translate3d(0, -72%, 0);
  1923. -webkit-transform: translate3d(0, -72%, 0);
  1924. transform: translate3d(0, -72%, 0);
  1925. }
  1926. 100% {
  1927. -moz-transform: translate3d(0, 0, 0);
  1928. -ms-transform: translate3d(0, 0, 0);
  1929. -webkit-transform: translate3d(0, 0, 0);
  1930. transform: translate3d(0, 0, 0);
  1931. }
  1932. }@-moz-keyframes film {
  1933. 0% {
  1934. -moz-transform: translate3d(0, -6%, 0);
  1935. transform: translate3d(0, -6%, 0);
  1936. }
  1937. 5.5% {
  1938. -moz-transform: translate3d(0, -5.5%, 0);
  1939. transform: translate3d(0, -5.5%, 0);
  1940. }
  1941. 11% {
  1942. -moz-transform: translate3d(0, -11%, 0);
  1943. transform: translate3d(0, -11%, 0);
  1944. }
  1945. 16.5% {
  1946. -moz-transform: translate3d(0, -16.5%, 0);
  1947. transform: translate3d(0, -16.5%, 0);
  1948. }
  1949. 22% {
  1950. -moz-transform: translate3d(0, -22%, 0);
  1951. transform: translate3d(0, -22%, 0);
  1952. }
  1953. 27.5% {
  1954. -moz-transform: translate3d(0, -27.5%, 0);
  1955. transform: translate3d(0, -27.5%, 0);
  1956. }
  1957. 33% {
  1958. -moz-transform: translate3d(0, -33%, 0);
  1959. transform: translate3d(0, -33%, 0);
  1960. }
  1961. 38.5% {
  1962. -moz-transform: translate3d(0, -38.5%, 0);
  1963. transform: translate3d(0, -38.5%, 0);
  1964. }
  1965. 44% {
  1966. -moz-transform: translate3d(0, -44%, 0);
  1967. transform: translate3d(0, -44%, 0);
  1968. }
  1969. 49.5% {
  1970. -moz-transform: translate3d(0, -49.5%, 0);
  1971. transform: translate3d(0, -49.5%, 0);
  1972. }
  1973. 55% {
  1974. -moz-transform: translate3d(0, -55%, 0);
  1975. transform: translate3d(0, -55%, 0);
  1976. }
  1977. 60.5% {
  1978. -moz-transform: translate3d(0, -60.5%, 0);
  1979. transform: translate3d(0, -60.5%, 0);
  1980. }
  1981. 66% {
  1982. -moz-transform: translate3d(0, -66%, 0);
  1983. transform: translate3d(0, -66%, 0);
  1984. }
  1985. 71.5% {
  1986. -moz-transform: translate3d(0, -71.5%, 0);
  1987. transform: translate3d(0, -71.5%, 0);
  1988. }
  1989. 77% {
  1990. -moz-transform: translate3d(0, -77%, 0);
  1991. transform: translate3d(0, -77%, 0);
  1992. }
  1993. 82.5% {
  1994. -moz-transform: translate3d(0, -82.5%, 0);
  1995. transform: translate3d(0, -82.5%, 0);
  1996. }
  1997. 88% {
  1998. -moz-transform: translate3d(0, -88%, 0);
  1999. transform: translate3d(0, -88%, 0);
  2000. }
  2001. 93.5% {
  2002. -moz-transform: translate3d(0, -90.5%, 0);
  2003. transform: translate3d(0, -90.5%, 0);
  2004. }
  2005. }@-webkit-keyframes film {
  2006. 0% {
  2007. -webkit-transform: translate3d(0, -6%, 0);
  2008. transform: translate3d(0, -6%, 0);
  2009. }
  2010. 5.5% {
  2011. -webkit-transform: translate3d(0, -5.5%, 0);
  2012. transform: translate3d(0, -5.5%, 0);
  2013. }
  2014. 11% {
  2015. -webkit-transform: translate3d(0, -11%, 0);
  2016. transform: translate3d(0, -11%, 0);
  2017. }
  2018. 16.5% {
  2019. -webkit-transform: translate3d(0, -16.5%, 0);
  2020. transform: translate3d(0, -16.5%, 0);
  2021. }
  2022. 22% {
  2023. -webkit-transform: translate3d(0, -22%, 0);
  2024. transform: translate3d(0, -22%, 0);
  2025. }
  2026. 27.5% {
  2027. -webkit-transform: translate3d(0, -27.5%, 0);
  2028. transform: translate3d(0, -27.5%, 0);
  2029. }
  2030. 33% {
  2031. -webkit-transform: translate3d(0, -33%, 0);
  2032. transform: translate3d(0, -33%, 0);
  2033. }
  2034. 38.5% {
  2035. -webkit-transform: translate3d(0, -38.5%, 0);
  2036. transform: translate3d(0, -38.5%, 0);
  2037. }
  2038. 44% {
  2039. -webkit-transform: translate3d(0, -44%, 0);
  2040. transform: translate3d(0, -44%, 0);
  2041. }
  2042. 49.5% {
  2043. -webkit-transform: translate3d(0, -49.5%, 0);
  2044. transform: translate3d(0, -49.5%, 0);
  2045. }
  2046. 55% {
  2047. -webkit-transform: translate3d(0, -55%, 0);
  2048. transform: translate3d(0, -55%, 0);
  2049. }
  2050. 60.5% {
  2051. -webkit-transform: translate3d(0, -60.5%, 0);
  2052. transform: translate3d(0, -60.5%, 0);
  2053. }
  2054. 66% {
  2055. -webkit-transform: translate3d(0, -66%, 0);
  2056. transform: translate3d(0, -66%, 0);
  2057. }
  2058. 71.5% {
  2059. -webkit-transform: translate3d(0, -71.5%, 0);
  2060. transform: translate3d(0, -71.5%, 0);
  2061. }
  2062. 77% {
  2063. -webkit-transform: translate3d(0, -77%, 0);
  2064. transform: translate3d(0, -77%, 0);
  2065. }
  2066. 82.5% {
  2067. -webkit-transform: translate3d(0, -82.5%, 0);
  2068. transform: translate3d(0, -82.5%, 0);
  2069. }
  2070. 88% {
  2071. -webkit-transform: translate3d(0, -88%, 0);
  2072. transform: translate3d(0, -88%, 0);
  2073. }
  2074. 93.5% {
  2075. -webkit-transform: translate3d(0, -90.5%, 0);
  2076. transform: translate3d(0, -90.5%, 0);
  2077. }
  2078. }@keyframes film {
  2079. 0% {
  2080. -moz-transform: translate3d(0, -6%, 0);
  2081. -ms-transform: translate3d(0, -6%, 0);
  2082. -webkit-transform: translate3d(0, -6%, 0);
  2083. transform: translate3d(0, -6%, 0);
  2084. }
  2085. 5.5% {
  2086. -moz-transform: translate3d(0, -5.5%, 0);
  2087. -ms-transform: translate3d(0, -5.5%, 0);
  2088. -webkit-transform: translate3d(0, -5.5%, 0);
  2089. transform: translate3d(0, -5.5%, 0);
  2090. }
  2091. 11% {
  2092. -moz-transform: translate3d(0, -11%, 0);
  2093. -ms-transform: translate3d(0, -11%, 0);
  2094. -webkit-transform: translate3d(0, -11%, 0);
  2095. transform: translate3d(0, -11%, 0);
  2096. }
  2097. 16.5% {
  2098. -moz-transform: translate3d(0, -16.5%, 0);
  2099. -ms-transform: translate3d(0, -16.5%, 0);
  2100. -webkit-transform: translate3d(0, -16.5%, 0);
  2101. transform: translate3d(0, -16.5%, 0);
  2102. }
  2103. 22% {
  2104. -moz-transform: translate3d(0, -22%, 0);
  2105. -ms-transform: translate3d(0, -22%, 0);
  2106. -webkit-transform: translate3d(0, -22%, 0);
  2107. transform: translate3d(0, -22%, 0);
  2108. }
  2109. 27.5% {
  2110. -moz-transform: translate3d(0, -27.5%, 0);
  2111. -ms-transform: translate3d(0, -27.5%, 0);
  2112. -webkit-transform: translate3d(0, -27.5%, 0);
  2113. transform: translate3d(0, -27.5%, 0);
  2114. }
  2115. 33% {
  2116. -moz-transform: translate3d(0, -33%, 0);
  2117. -ms-transform: translate3d(0, -33%, 0);
  2118. -webkit-transform: translate3d(0, -33%, 0);
  2119. transform: translate3d(0, -33%, 0);
  2120. }
  2121. 38.5% {
  2122. -moz-transform: translate3d(0, -38.5%, 0);
  2123. -ms-transform: translate3d(0, -38.5%, 0);
  2124. -webkit-transform: translate3d(0, -38.5%, 0);
  2125. transform: translate3d(0, -38.5%, 0);
  2126. }
  2127. 44% {
  2128. -moz-transform: translate3d(0, -44%, 0);
  2129. -ms-transform: translate3d(0, -44%, 0);
  2130. -webkit-transform: translate3d(0, -44%, 0);
  2131. transform: translate3d(0, -44%, 0);
  2132. }
  2133. 49.5% {
  2134. -moz-transform: translate3d(0, -49.5%, 0);
  2135. -ms-transform: translate3d(0, -49.5%, 0);
  2136. -webkit-transform: translate3d(0, -49.5%, 0);
  2137. transform: translate3d(0, -49.5%, 0);
  2138. }
  2139. 55% {
  2140. -moz-transform: translate3d(0, -55%, 0);
  2141. -ms-transform: translate3d(0, -55%, 0);
  2142. -webkit-transform: translate3d(0, -55%, 0);
  2143. transform: translate3d(0, -55%, 0);
  2144. }
  2145. 60.5% {
  2146. -moz-transform: translate3d(0, -60.5%, 0);
  2147. -ms-transform: translate3d(0, -60.5%, 0);
  2148. -webkit-transform: translate3d(0, -60.5%, 0);
  2149. transform: translate3d(0, -60.5%, 0);
  2150. }
  2151. 66% {
  2152. -moz-transform: translate3d(0, -66%, 0);
  2153. -ms-transform: translate3d(0, -66%, 0);
  2154. -webkit-transform: translate3d(0, -66%, 0);
  2155. transform: translate3d(0, -66%, 0);
  2156. }
  2157. 71.5% {
  2158. -moz-transform: translate3d(0, -71.5%, 0);
  2159. -ms-transform: translate3d(0, -71.5%, 0);
  2160. -webkit-transform: translate3d(0, -71.5%, 0);
  2161. transform: translate3d(0, -71.5%, 0);
  2162. }
  2163. 77% {
  2164. -moz-transform: translate3d(0, -77%, 0);
  2165. -ms-transform: translate3d(0, -77%, 0);
  2166. -webkit-transform: translate3d(0, -77%, 0);
  2167. transform: translate3d(0, -77%, 0);
  2168. }
  2169. 82.5% {
  2170. -moz-transform: translate3d(0, -82.5%, 0);
  2171. -ms-transform: translate3d(0, -82.5%, 0);
  2172. -webkit-transform: translate3d(0, -82.5%, 0);
  2173. transform: translate3d(0, -82.5%, 0);
  2174. }
  2175. 88% {
  2176. -moz-transform: translate3d(0, -88%, 0);
  2177. -ms-transform: translate3d(0, -88%, 0);
  2178. -webkit-transform: translate3d(0, -88%, 0);
  2179. transform: translate3d(0, -88%, 0);
  2180. }
  2181. 93.5% {
  2182. -moz-transform: translate3d(0, -90.5%, 0);
  2183. -ms-transform: translate3d(0, -90.5%, 0);
  2184. -webkit-transform: translate3d(0, -90.5%, 0);
  2185. transform: translate3d(0, -90.5%, 0);
  2186. }
  2187. }@-moz-keyframes grain {
  2188. 0%, 100% {
  2189. -moz-transform: translate3d(0, 0, 0);
  2190. transform: translate3d(0, 0, 0);
  2191. }
  2192. 10% {
  2193. -moz-transform: translate3d(-5%, -10%, 0);
  2194. transform: translate3d(-5%, -10%, 0);
  2195. }
  2196. 20% {
  2197. -moz-transform: translate3d(-15%, 5%, 0);
  2198. transform: translate3d(-15%, 5%, 0);
  2199. }
  2200. 30% {
  2201. -moz-transform: translate3d(7%, -25%, 0);
  2202. transform: translate3d(7%, -25%, 0);
  2203. }
  2204. 40% {
  2205. -moz-transform: translate3d(-5%, 25%, 0);
  2206. transform: translate3d(-5%, 25%, 0);
  2207. }
  2208. 50% {
  2209. -moz-transform: translate3d(-15%, 10%, 0);
  2210. transform: translate3d(-15%, 10%, 0);
  2211. }
  2212. 60% {
  2213. -moz-transform: translate3d(15%, 0%, 0);
  2214. transform: translate3d(15%, 0%, 0);
  2215. }
  2216. 70% {
  2217. -moz-transform: translate3d(0%, 15%, 0);
  2218. transform: translate3d(0%, 15%, 0);
  2219. }
  2220. 80% {
  2221. -moz-transform: translate3d(3%, 35%, 0);
  2222. transform: translate3d(3%, 35%, 0);
  2223. }
  2224. 90% {
  2225. -moz-transform: translate3d(-10%, 10%, 0);
  2226. transform: translate3d(-10%, 10%, 0);
  2227. }
  2228. }@-webkit-keyframes grain {
  2229. 0%, 100% {
  2230. -webkit-transform: translate3d(0, 0, 0);
  2231. transform: translate3d(0, 0, 0);
  2232. }
  2233. 10% {
  2234. -webkit-transform: translate3d(-5%, -10%, 0);
  2235. transform: translate3d(-5%, -10%, 0);
  2236. }
  2237. 20% {
  2238. -webkit-transform: translate3d(-15%, 5%, 0);
  2239. transform: translate3d(-15%, 5%, 0);
  2240. }
  2241. 30% {
  2242. -webkit-transform: translate3d(7%, -25%, 0);
  2243. transform: translate3d(7%, -25%, 0);
  2244. }
  2245. 40% {
  2246. -webkit-transform: translate3d(-5%, 25%, 0);
  2247. transform: translate3d(-5%, 25%, 0);
  2248. }
  2249. 50% {
  2250. -webkit-transform: translate3d(-15%, 10%, 0);
  2251. transform: translate3d(-15%, 10%, 0);
  2252. }
  2253. 60% {
  2254. -webkit-transform: translate3d(15%, 0%, 0);
  2255. transform: translate3d(15%, 0%, 0);
  2256. }
  2257. 70% {
  2258. -webkit-transform: translate3d(0%, 15%, 0);
  2259. transform: translate3d(0%, 15%, 0);
  2260. }
  2261. 80% {
  2262. -webkit-transform: translate3d(3%, 35%, 0);
  2263. transform: translate3d(3%, 35%, 0);
  2264. }
  2265. 90% {
  2266. -webkit-transform: translate3d(-10%, 10%, 0);
  2267. transform: translate3d(-10%, 10%, 0);
  2268. }
  2269. }@keyframes grain {
  2270. 0%, 100% {
  2271. -moz-transform: translate3d(0, 0, 0);
  2272. -ms-transform: translate3d(0, 0, 0);
  2273. -webkit-transform: translate3d(0, 0, 0);
  2274. transform: translate3d(0, 0, 0);
  2275. }
  2276. 10% {
  2277. -moz-transform: translate3d(-5%, -10%, 0);
  2278. -ms-transform: translate3d(-5%, -10%, 0);
  2279. -webkit-transform: translate3d(-5%, -10%, 0);
  2280. transform: translate3d(-5%, -10%, 0);
  2281. }
  2282. 20% {
  2283. -moz-transform: translate3d(-15%, 5%, 0);
  2284. -ms-transform: translate3d(-15%, 5%, 0);
  2285. -webkit-transform: translate3d(-15%, 5%, 0);
  2286. transform: translate3d(-15%, 5%, 0);
  2287. }
  2288. 30% {
  2289. -moz-transform: translate3d(7%, -25%, 0);
  2290. -ms-transform: translate3d(7%, -25%, 0);
  2291. -webkit-transform: translate3d(7%, -25%, 0);
  2292. transform: translate3d(7%, -25%, 0);
  2293. }
  2294. 40% {
  2295. -moz-transform: translate3d(-5%, 25%, 0);
  2296. -ms-transform: translate3d(-5%, 25%, 0);
  2297. -webkit-transform: translate3d(-5%, 25%, 0);
  2298. transform: translate3d(-5%, 25%, 0);
  2299. }
  2300. 50% {
  2301. -moz-transform: translate3d(-15%, 10%, 0);
  2302. -ms-transform: translate3d(-15%, 10%, 0);
  2303. -webkit-transform: translate3d(-15%, 10%, 0);
  2304. transform: translate3d(-15%, 10%, 0);
  2305. }
  2306. 60% {
  2307. -moz-transform: translate3d(15%, 0%, 0);
  2308. -ms-transform: translate3d(15%, 0%, 0);
  2309. -webkit-transform: translate3d(15%, 0%, 0);
  2310. transform: translate3d(15%, 0%, 0);
  2311. }
  2312. 70% {
  2313. -moz-transform: translate3d(0%, 15%, 0);
  2314. -ms-transform: translate3d(0%, 15%, 0);
  2315. -webkit-transform: translate3d(0%, 15%, 0);
  2316. transform: translate3d(0%, 15%, 0);
  2317. }
  2318. 80% {
  2319. -moz-transform: translate3d(3%, 35%, 0);
  2320. -ms-transform: translate3d(3%, 35%, 0);
  2321. -webkit-transform: translate3d(3%, 35%, 0);
  2322. transform: translate3d(3%, 35%, 0);
  2323. }
  2324. 90% {
  2325. -moz-transform: translate3d(-10%, 10%, 0);
  2326. -ms-transform: translate3d(-10%, 10%, 0);
  2327. -webkit-transform: translate3d(-10%, 10%, 0);
  2328. transform: translate3d(-10%, 10%, 0);
  2329. }
  2330. }@-moz-keyframes glow {
  2331. 0% {
  2332. opacity: 1;
  2333. }
  2334. 15% {
  2335. opacity: 0;
  2336. }
  2337. 30% {
  2338. opacity: .5;
  2339. }
  2340. 45% {
  2341. opacity: .1;
  2342. }
  2343. 60% {
  2344. opacity: 0;
  2345. }
  2346. 75% {
  2347. opacity: .4;
  2348. }
  2349. 90% {
  2350. opacity: .8;
  2351. }
  2352. 100% {
  2353. opacity: 0;
  2354. }
  2355. }@-webkit-keyframes glow {
  2356. 0% {
  2357. opacity: 1;
  2358. }
  2359. 15% {
  2360. opacity: 0;
  2361. }
  2362. 30% {
  2363. opacity: .5;
  2364. }
  2365. 45% {
  2366. opacity: .1;
  2367. }
  2368. 60% {
  2369. opacity: 0;
  2370. }
  2371. 75% {
  2372. opacity: .4;
  2373. }
  2374. 90% {
  2375. opacity: .8;
  2376. }
  2377. 100% {
  2378. opacity: 0;
  2379. }
  2380. }@keyframes glow {
  2381. 0% {
  2382. opacity: 1;
  2383. }
  2384. 15% {
  2385. opacity: 0;
  2386. }
  2387. 30% {
  2388. opacity: .5;
  2389. }
  2390. 45% {
  2391. opacity: .1;
  2392. }
  2393. 60% {
  2394. opacity: 0;
  2395. }
  2396. 75% {
  2397. opacity: .4;
  2398. }
  2399. 90% {
  2400. opacity: .8;
  2401. }
  2402. 100% {
  2403. opacity: 0;
  2404. }
  2405. }@-moz-keyframes blur {
  2406. 0% {
  2407. filter: blur(0);
  2408. }
  2409. 4% {
  2410. filter: blur(1px);
  2411. }
  2412. 8% {
  2413. filter: blur(3px);
  2414. }
  2415. 12% {
  2416. filter: blur(0);
  2417. }
  2418. 16% {
  2419. filter: blur(3px);
  2420. }
  2421. 20% {
  2422. filter: blur(0);
  2423. }
  2424. 100% {
  2425. filter: blur(0);
  2426. }
  2427. }@-webkit-keyframes blur {
  2428. 0% {
  2429. -webkit-filter: blur(0);
  2430. filter: blur(0);
  2431. }
  2432. 4% {
  2433. -webkit-filter: blur(1px);
  2434. filter: blur(1px);
  2435. }
  2436. 8% {
  2437. -webkit-filter: blur(3px);
  2438. filter: blur(3px);
  2439. }
  2440. 12% {
  2441. -webkit-filter: blur(0);
  2442. filter: blur(0);
  2443. }
  2444. 16% {
  2445. -webkit-filter: blur(3px);
  2446. filter: blur(3px);
  2447. }
  2448. 20% {
  2449. -webkit-filter: blur(0);
  2450. filter: blur(0);
  2451. }
  2452. 100% {
  2453. -webkit-filter: blur(0);
  2454. filter: blur(0);
  2455. }
  2456. }@keyframes blur {
  2457. 0% {
  2458. -webkit-filter: blur(0);
  2459. filter: blur(0);
  2460. }
  2461. 4% {
  2462. -webkit-filter: blur(1px);
  2463. filter: blur(1px);
  2464. }
  2465. 8% {
  2466. -webkit-filter: blur(3px);
  2467. filter: blur(3px);
  2468. }
  2469. 12% {
  2470. -webkit-filter: blur(0);
  2471. filter: blur(0);
  2472. }
  2473. 16% {
  2474. -webkit-filter: blur(3px);
  2475. filter: blur(3px);
  2476. }
  2477. 20% {
  2478. -webkit-filter: blur(0);
  2479. filter: blur(0);
  2480. }
  2481. 100% {
  2482. -webkit-filter: blur(0);
  2483. filter: blur(0);
  2484. }
  2485. }.glitch-active {
  2486. overflow: hidden;
  2487. }
  2488. .glitch-image {
  2489. -moz-transform: translate3d(0, 1em, 1em);
  2490. -webkit-transform: translate3d(0, 1em, 1em);
  2491. transform: translate3d(0, 1em, 1em);
  2492. display: block;
  2493. position: absolute;
  2494. top: 0;
  2495. left: 0;
  2496. z-index: 11;
  2497. pointer-events: none;
  2498. height: 1px;
  2499. width: 1px;
  2500. overflow: hidden;
  2501. visibility: hidden;
  2502. }
  2503. .glitch-active .glitch-image {
  2504. -moz-animation: glitch 0.75s steps(7) infinite;
  2505. -webkit-animation: glitch 0.75s steps(7) infinite;
  2506. animation: glitch 0.75s steps(7) infinite;
  2507. height: auto;
  2508. overflow: visible;
  2509. width: 100%;
  2510. visibility: visible;
  2511. }
  2512. .grain-active {
  2513. overflow: hidden;
  2514. }
  2515. .grain-active:before {
  2516. -moz-transform: translate3d(0, 1em, 1em);
  2517. -webkit-transform: translate3d(0, 1em, 1em);
  2518. transform: translate3d(0, 1em, 1em);
  2519. -moz-animation: grain 3s steps(10) infinite;
  2520. -webkit-animation: grain 3s steps(10) infinite;
  2521. animation: grain 3s steps(10) infinite;
  2522. background: url("/assets/countdown/noise.png");
  2523. content: "";
  2524. display: block;
  2525. height: 300%;
  2526. left: -100%;
  2527. position: absolute;
  2528. top: -100%;
  2529. width: 300%;
  2530. z-index: 11;
  2531. pointer-events: none;
  2532. }
  2533. .film-active {
  2534. overflow: hidden;
  2535. }
  2536. @media all and (min-width: 901px) {
  2537. .film-active: after {
  2538. -moz-transform: translate3d(0, 1em, 1em);
  2539. -webkit-transform: translate3d(0, 1em, 1em);
  2540. transform: translate3d(0, 1em, 1em);
  2541. -moz-animation: film 1.25s steps(18) infinite;
  2542. -webkit-animation: film 1.25s steps(18) infinite;
  2543. animation: film 1.25s steps(18) infinite;
  2544. background: url("/assets/countdown/film-scratches.png");
  2545. background-size: 100% 1350%;
  2546. background-repeat: no-repeat;
  2547. content: "";
  2548. display: block;
  2549. height: 1350%;
  2550. width: 100%;
  2551. position: absolute;
  2552. top: 0;
  2553. left: 0;
  2554. z-index: 11;
  2555. pointer-events: none;
  2556. }
  2557. }.glow-active:before {
  2558. -moz-transform: translate3d(0, 1em, 1em);
  2559. -webkit-transform: translate3d(0, 1em, 1em);
  2560. transform: translate3d(0, 1em, 1em);
  2561. -moz-animation: glow 4s steps(8) infinite;
  2562. -webkit-animation: glow 4s steps(8) infinite;
  2563. animation: glow 4s steps(8) infinite;
  2564. background: url("/assets/countdown/glow-flicker.png");
  2565. background-size: 100%;
  2566. content: "";
  2567. display: block;
  2568. position: absolute;
  2569. height: 100%;
  2570. width: 100%;
  2571. left: 0;
  2572. top: 0;
  2573. z-index: 3;
  2574. opacity: 0;
  2575. pointer-events: none;
  2576. }
  2577. @media all and (min-width: 901px) {
  2578. .blur-active {
  2579. -moz-animation: blur 20s linear infinite;
  2580. -webkit-animation: blur 20s linear infinite;
  2581. animation: blur 20s linear infinite;
  2582. }
  2583. }@media all and (min-width: 901px) {
  2584. .slow-shake-active {
  2585. -moz-animation: slowShake 3s linear infinite;
  2586. -webkit-animation: slowShake 3s linear infinite;
  2587. animation: slowShake 3s linear infinite;
  2588. }
  2589. }.modals {
  2590. height: 100%;
  2591. left: 0;
  2592. position: absolute;
  2593. top: 0;
  2594. width: 100%;
  2595. z-index: 0;
  2596. overflow: hidden;
  2597. }
  2598. .modals.modal-container-active {
  2599. visibility: visible;
  2600. z-index: 2;
  2601. }
  2602. .modal {
  2603. background-color: #000;
  2604. position: absolute;
  2605. top: 0;
  2606. left: 0;
  2607. width: 100%;
  2608. max-width: 100%;
  2609. min-width: 100%;
  2610. height: 100%;
  2611. visibility: hidden;
  2612. opacity: 0;
  2613. overflow: hidden;
  2614. -moz-transition: opacity 500ms linear, visibility 500ms linear, z-index 501ms linear;
  2615. -o-transition: opacity 500ms linear, visibility 500ms linear, z-index 501ms linear;
  2616. -webkit-transition: opacity 500ms linear, visibility 500ms linear, z-index 501ms linear;
  2617. transition: opacity 500ms linear, visibility 500ms linear, z-index 501ms linear;
  2618. z-index: 1;
  2619. }
  2620. .modal.modal-active {
  2621. opacity: 1;
  2622. -webkit-overflow-scrolling: touch;
  2623. overflow: auto;
  2624. top: 0;
  2625. left: 0;
  2626. visibility: visible;
  2627. z-index: 3;
  2628. }
  2629. @media all and (min-width: 901px) {
  2630. .modal {
  2631. background-color: rgba(0, 0, 0, 0.9);
  2632. }
  2633. .modal .modal-btn {
  2634. top: 0;
  2635. }
  2636. .modal .modal-previous-btn {
  2637. top: 8.9em;
  2638. }
  2639. .modal .modal-next-btn {
  2640. top: 4.4em;
  2641. }
  2642. }.modal-btn {
  2643. position: absolute;
  2644. top: 1.5em;
  2645. right: 1.5em;
  2646. width: 3.3125rem;
  2647. height: 3.25rem;
  2648. text-indent: -9999px;
  2649. }
  2650. .modal-close-btn {
  2651. background: url("/assets/modal-youtube-close.svg");
  2652. }
  2653. .modal-previous-btn {
  2654. background: url("/assets/modal-youtube-backward.svg");
  2655. top: 8.9em;
  2656. }
  2657. .modal-next-btn {
  2658. background: url("/assets/modal-youtube-forward.svg");
  2659. top: 4.4em;
  2660. }
  2661. .modal-close-btn-animated {
  2662. border-style: solid;
  2663. border-width: 4px;
  2664. background: none;
  2665. position: absolute;
  2666. width: 3.3125rem;
  2667. height: 3.25rem;
  2668. overflow-y: hidden;
  2669. z-index: 1;
  2670. }
  2671. .modal-close-btn-animated:hover .modal-close-btn-animated-text {
  2672. -moz-animation: buttonMouseOn 200ms ease-in-out;
  2673. -webkit-animation: buttonMouseOn 200ms ease-in-out;
  2674. animation: buttonMouseOn 200ms ease-in-out;
  2675. -moz-animation-play-state: paused;
  2676. -webkit-animation-play-state: paused;
  2677. animation-play-state: paused;
  2678. }
  2679. .modal-close-btn-animated-text {
  2680. background-position: center;
  2681. clip: auto;
  2682. color: transparent;
  2683. display: block;
  2684. height: 0;
  2685. margin: 0;
  2686. overflow: hidden;
  2687. padding: 0;
  2688. text-indent: 100%;
  2689. white-space: nowrap;
  2690. width: 0;
  2691. width: 100%;
  2692. height: 100%;
  2693. text-indent: -9999px;
  2694. display: block;
  2695. position: relative;
  2696. -moz-animation: buttonMouseOff 500ms ease-out;
  2697. -webkit-animation: buttonMouseOff 500ms ease-out;
  2698. animation: buttonMouseOff 500ms ease-out;
  2699. -moz-animation-play-state: paused;
  2700. -webkit-animation-play-state: paused;
  2701. animation-play-state: paused;
  2702. }
  2703. @media all and (min-width: 901px) {
  2704. .modal-active .modal-close-btn-animated: hover .modal-close-btn-animated-text, .modal-active .modal-close-btn-animated-text {
  2705. -moz-animation-play-state: running;
  2706. -webkit-animation-play-state: running;
  2707. animation-play-state: running;
  2708. }
  2709. }.app-header {
  2710. background-image: url("../assets/texture-noise@1x.png");
  2711. -moz-backface-visibility: hidden;
  2712. -webkit-backface-visibility: hidden;
  2713. backface-visibility: hidden;
  2714. -moz-transform: translateY(70px);
  2715. -ms-transform: translateY(70px);
  2716. -webkit-transform: translateY(70px);
  2717. transform: translateY(70px);
  2718. -moz-transition: height 400ms ease, -moz-transform 400ms ease, opacity 1200ms ease;
  2719. -o-transition: height 400ms ease, -o-transform 400ms ease, opacity 1200ms ease;
  2720. -webkit-transition: height 400ms ease, -webkit-transform 400ms ease, opacity 1200ms ease;
  2721. transition: height 400ms ease, transform 400ms ease, opacity 1200ms ease;
  2722. background-color: #000;
  2723. height: 69px;
  2724. left: 0;
  2725. overflow: hidden;
  2726. opacity: 1;
  2727. position: absolute;
  2728. top: -70px;
  2729. visibility: visible;
  2730. width: 100%;
  2731. z-index: 3;
  2732. }
  2733. .app-header.app-header-active {
  2734. z-index: 11;
  2735. }
  2736. .app-header.app-header-top {
  2737. -moz-transition: height 200ms ease, -moz-transform linear, opacity 1200ms ease;
  2738. -o-transition: height 200ms ease, -o-transform linear, opacity 1200ms ease;
  2739. -webkit-transition: height 200ms ease, -webkit-transform linear, opacity 1200ms ease;
  2740. transition: height 200ms ease, transform linear, opacity 1200ms ease;
  2741. }
  2742. .app-header-nav-peek .app-header {
  2743. position: fixed;
  2744. top: -140px;
  2745. -moz-transition: -moz-transform 400ms ease, height 100ms ease, opacity 1200ms ease;
  2746. -o-transition: -o-transform 400ms ease, height 100ms ease, opacity 1200ms ease;
  2747. -webkit-transition: -webkit-transform 400ms ease, height 100ms ease, opacity 1200ms ease;
  2748. transition: transform 400ms ease, height 100ms ease, opacity 1200ms ease;
  2749. }
  2750. .modal-container-active.app-header-nav-peek .app-header {
  2751. visibility: hidden;
  2752. }
  2753. .app-header-nav-peek-active.app-header-nav-peek .app-header {
  2754. -moz-transform: translateY(140px);
  2755. -ms-transform: translateY(140px);
  2756. -webkit-transform: translateY(140px);
  2757. transform: translateY(140px);
  2758. }
  2759. .app-header-wrapper {
  2760. box-sizing: border-box;
  2761. margin: 0 auto;
  2762. display: -webkit-flex;
  2763. display: flex;
  2764. -webkit-flex-flow: column wrap;
  2765. flex-flow: column wrap;
  2766. position: relative;
  2767. padding-top: 70px;
  2768. overflow: hidden;
  2769. width: 100%}
  2770. @media all and (min-width: 901px) {
  2771. .app-header-wrapper {
  2772. display: -ms-flexbox;
  2773. height: auto;
  2774. -ms-flex-pack: justify;
  2775. -webkit-flex-flow: row wrap;
  2776. flex-flow: row wrap;
  2777. -webkit-justify-content: space-around;
  2778. justify-content: space-around;
  2779. max-width: 68.6875rem;
  2780. padding-top: 0;
  2781. }
  2782. }.app-header-home-link {
  2783. display: block;
  2784. clip: auto;
  2785. color: transparent;
  2786. display: block;
  2787. height: 0;
  2788. margin: 0;
  2789. overflow: hidden;
  2790. padding: 0;
  2791. text-indent: 100%;
  2792. white-space: nowrap;
  2793. width: 0;
  2794. left: 0;
  2795. margin: 1em;
  2796. -webkit-order: 1;
  2797. order: 1;
  2798. position: absolute;
  2799. padding-left: 93px;
  2800. padding-bottom: 40px;
  2801. top: 0;
  2802. z-index: 1;
  2803. }
  2804. @media all and (min-width: 901px) {
  2805. .app-header-home-link {
  2806. position: relative;
  2807. }
  2808. }.app-header-presents-heading {
  2809. -webkit-order: 2;
  2810. order: 2;
  2811. color: #eae9e4;
  2812. display: block;
  2813. font-family: "futura-pt-condensed", sans-serif;
  2814. font-weight: 400;
  2815. font-size: 0.875rem;
  2816. letter-spacing: .025rem;
  2817. margin-top: 2em;
  2818. margin-bottom: 2em;
  2819. text-align: center;
  2820. text-transform: uppercase;
  2821. opacity: 0;
  2822. -moz-transition: opacity 300ms ease;
  2823. -o-transition: opacity 300ms ease;
  2824. -webkit-transition: opacity 300ms ease;
  2825. transition: opacity 300ms ease;
  2826. }
  2827. @media all and (min-width: 901px) {
  2828. .app-header-presents-heading {
  2829. display: none;
  2830. }
  2831. }@media all and (max-width: 901px) {
  2832. .app-header-presents-heading {
  2833. margin-top: 1em;
  2834. margin-bottom: 1em;
  2835. }
  2836. }.app-header-nav {
  2837. display: -ms-flexbox;
  2838. -ms-flex: 3;
  2839. -ms-flex-order: 3;
  2840. -ms-flex-flow: column wrap;
  2841. display: -webkit-flex;
  2842. display: flex;
  2843. -webkit-flex: 3;
  2844. flex: 3;
  2845. height: auto;
  2846. margin: 0;
  2847. -webkit-order: 3;
  2848. order: 3;
  2849. padding: 0;
  2850. -webkit-flex-flow: column wrap;
  2851. flex-flow: column wrap;
  2852. width: 100%;
  2853. opacity: 0;
  2854. overflow: hidden;
  2855. -moz-transition: opacity 300ms ease;
  2856. -o-transition: opacity 300ms ease;
  2857. -webkit-transition: opacity 300ms ease;
  2858. transition: opacity 300ms ease;
  2859. }
  2860. @media all and (min-width: 901px) {
  2861. .app-header-nav {
  2862. opacity: 1;
  2863. }
  2864. }.app-header-nav-list {
  2865. list-style: none;
  2866. margin: 0;
  2867. padding: 0;
  2868. width: 100%}
  2869. @media all and (min-width: 901px) {
  2870. .app-header-nav-list {
  2871. display: -ms-flexbox;
  2872. -ms-flex-flow: row wrap;
  2873. -ms-flex-pack: start;
  2874. -ms-flex-align: center;
  2875. display: -webkit-flex;
  2876. display: flex;
  2877. -webkit-flex-flow: row wrap;
  2878. flex-flow: row wrap;
  2879. -webkit-align-items: center;
  2880. align-items: center;
  2881. height: 69px;
  2882. width: auto;
  2883. }
  2884. }.app-header-subnav {
  2885. list-style: none;
  2886. margin: 0;
  2887. padding: 0;
  2888. }
  2889. .mobile-nav-icon {
  2890. cursor: pointer;
  2891. height: 0.8125rem;
  2892. width: 1.875rem;
  2893. margin: 0;
  2894. right: 1em;
  2895. top: 1.5em;
  2896. border-bottom: 3px solid #fff;
  2897. border-top: 3px solid #fff;
  2898. z-index: 1;
  2899. position: absolute;
  2900. }
  2901. .mobile-nav-icon::after {
  2902. position: absolute;
  2903. display: block;
  2904. width: 100%;
  2905. border-bottom: 3px solid #fff;
  2906. content: '';
  2907. top: 0.3125rem;
  2908. }
  2909. .app-header-nav-open .mobile-nav-icon {
  2910. border: none;
  2911. background: url("/assets/close-sm.svg");
  2912. height: 1.25em;
  2913. width: 1.25em;
  2914. margin-right: .25em;
  2915. }
  2916. @media all and (min-width: 901px) {
  2917. .mobile-nav-icon {
  2918. display: none;
  2919. }
  2920. }.app-header-nav-item {
  2921. box-sizing: border-box;
  2922. font-family: "futura-pt", sans-serif;
  2923. font-weight: bold;
  2924. font-size: 0.75rem;
  2925. letter-spacing: 0.1875rem;
  2926. list-style: none;
  2927. margin: 0;
  2928. padding: 0 1.0625rem;
  2929. overflow: hidden;
  2930. text-transform: uppercase;
  2931. width: 100%}
  2932. @media all and (min-width: 901px) {
  2933. .app-header-nav-item {
  2934. display: -ms-inline-flexbox;
  2935. display: -webkit-inline-flex;
  2936. display: inline-flex;
  2937. padding: 0;
  2938. position: relative;
  2939. overflow: visible;
  2940. width: auto;
  2941. }
  2942. }.app-header-nav-item-section-link {
  2943. border-top: 2px solid #eae9e4;
  2944. box-sizing: border-box;
  2945. color: #fff;
  2946. display: block;
  2947. margin: 0;
  2948. padding: 1em 2em;
  2949. position: relative;
  2950. font-size: 0.875rem;
  2951. text-align: center;
  2952. text-decoration: none;
  2953. transition: color .75s;
  2954. width: 100%;
  2955. z-index: 1;
  2956. }
  2957. .app-header-nav-item:nth-last-child(2) .app-header-nav-item-section-link {
  2958. border-bottom: 5px solid #eae9e4;
  2959. }
  2960. .app-header-nav-item:first-child .app-header-nav-item-section-link {
  2961. border-width: 5px;
  2962. }
  2963. .app-header-nav-item-games .app-header-nav-item-section-link {
  2964. border-width: 5px;
  2965. }
  2966. @media all and (max-width: 901px) {
  2967. .app-header-nav-item-announcement-pre-order .app-header-nav-item-section-link {
  2968. clip: auto;
  2969. color: transparent;
  2970. display: block;
  2971. height: 0;
  2972. margin: 0;
  2973. overflow: hidden;
  2974. padding: 0;
  2975. text-indent: 100%;
  2976. white-space: nowrap;
  2977. width: 0;
  2978. width: 100%;
  2979. border-top: 0;
  2980. }
  2981. }@media all and (min-width: 901px) {
  2982. .app-header-nav-item-section-link {
  2983. padding: 1em 1.25em .75em;
  2984. font-size: 0.75rem;
  2985. width: auto;
  2986. border: none;
  2987. }
  2988. .app-header-nav-item-section-link:after {
  2989. content: ' ';
  2990. display: block;
  2991. margin-top: 0.25rem;
  2992. height: 2px;
  2993. width: 0;
  2994. -moz-transition: width 300ms ease-in, background-color 300ms ease-in;
  2995. -o-transition: width 300ms ease-in, background-color 300ms ease-in;
  2996. -webkit-transition: width 300ms ease-in, background-color 300ms ease-in;
  2997. transition: width 300ms ease-in, background-color 300ms ease-in;
  2998. }
  2999. .app-header-nav-item-section-link:hover:after {
  3000. background-color: #fff;
  3001. width: 100%}
  3002. .app-header-nav-item:nth-last-child(2) .app-header-nav-item-section-link {
  3003. border: none;
  3004. }
  3005. }.app-header-nav-item-section-link:active {
  3006. color: #faed7b;
  3007. }
  3008. @media all and (min-width: 901px) {
  3009. .app-header-nav-item-pre-order.app-header-nav-item {
  3010. display: none;
  3011. }
  3012. }@media all and (min-width: 901px) {
  3013. .app-header-nav-item-active .app-header-nav-item-section-link: after {
  3014. content: "";
  3015. background-color: #fff;
  3016. display: block;
  3017. height: 2px;
  3018. position: relative;
  3019. width: 100%}
  3020. }.nav-heading {
  3021. color: #eae9e4;
  3022. display: block;
  3023. font-family: "futura-pt-condensed", sans-serif;
  3024. font-weight: 400;
  3025. font-size: 1em;
  3026. letter-spacing: 0.1875rem;
  3027. margin-bottom: 1em;
  3028. text-align: center;
  3029. text-transform: uppercase;
  3030. }
  3031. .app-header-nav-open .page, .app-header-nav-open .app-footer, .app-header-nav-open .vt-footer {
  3032. position: absolute;
  3033. top: 0;
  3034. left: 0;
  3035. display: none;
  3036. height: 100%;
  3037. overflow: hidden;
  3038. }
  3039. .app-header-nav-open .app, .app-header-nav-open .app-header {
  3040. height: 100%;
  3041. overflow: auto;
  3042. }
  3043. .app-header-nav-open .app-header-nav, .app-header-nav-open .app-header-presents-heading {
  3044. opacity: 1;
  3045. }
  3046. .app-header-nav-open .mobile-nav-icon:after {
  3047. display: none;
  3048. }
  3049. .app-header-subnav-social {
  3050. box-sizing: border-box;
  3051. display: block;
  3052. list-style: none;
  3053. left: 0;
  3054. margin: 0 auto;
  3055. padding: 2em 1em;
  3056. max-width: 400px;
  3057. overflow: hidden;
  3058. }
  3059. @media all and (min-width: 901px) {
  3060. .app-header-subnav-social {
  3061. background-color: #ecebe8;
  3062. background-image: url("../assets/texture-noise@1x.png");
  3063. margin: 0;
  3064. max-width: none;
  3065. bottom: auto;
  3066. left: auto;
  3067. padding: 1em 0 0;
  3068. }
  3069. }.app-header-subnav-social-links {
  3070. display: -webkit-flex;
  3071. display: flex;
  3072. -webkit-justify-content: space-between;
  3073. justify-content: space-between;
  3074. }
  3075. @media all and (min-width: 901px) {
  3076. .app-header-subnav-social-links {
  3077. width: 350px;
  3078. margin: 0 auto;
  3079. padding-bottom: 1em;
  3080. }
  3081. }.app-header-subnav-social-network {
  3082. display: inline-block;
  3083. margin: 0;
  3084. text-align: center;
  3085. }
  3086. .app-header-subnav-social-network:first-of-type {
  3087. margin-left: 0;
  3088. }
  3089. .app-header-subnav-social-copy-text {
  3090. color: #333;
  3091. display: block;
  3092. font-family: "schoolbook-web", serif;
  3093. font-size: 0.75rem;
  3094. margin-top: 4px;
  3095. letter-spacing: 0.25px;
  3096. text-align: center;
  3097. width: 100%;
  3098. visibility: hidden;
  3099. }
  3100. .app-header-subnav-social-copy-text:first-child {
  3101. font-family: "futura-pt-condensed", sans-serif;
  3102. font-weight: 400;
  3103. text-transform: uppercase;
  3104. font-size: 0.875rem;
  3105. letter-spacing: normal;
  3106. margin-top: 0;
  3107. margin-bottom: 4px;
  3108. visibility: visible;
  3109. }
  3110. @media all and (max-width: 901px) {
  3111. .app-header-subnav-social-copy-text: first-child {
  3112. color: #eae9e4;
  3113. letter-spacing: .025rem;
  3114. margin-top: 0;
  3115. }
  3116. }@media all and (min-width: 901px) {
  3117. .app-header-subnav-social-copy-text {
  3118. visibility: visible;
  3119. }
  3120. }.app-header-nav-item-social.app-header-nav-item .app-header-nav-item-section-link {
  3121. border-top: none;
  3122. display: none;
  3123. }
  3124. @media all and (min-width: 901px) {
  3125. .app-header-nav-item-social-active.app-header {
  3126. height: 197px;
  3127. border-bottom: 3px solid #000;
  3128. }
  3129. .app-header-nav-item-social.app-header-nav-item .app-header-nav-item-section-link {
  3130. display: block;
  3131. }
  3132. .app-header-subnav-social {
  3133. visibility: visible;
  3134. }
  3135. }.app-header-subnav-social-network-link {
  3136. display: inline-block;
  3137. opacity: 1;
  3138. overflow: visible;
  3139. -moz-transition: opacity 300ms ease;
  3140. -o-transition: opacity 300ms ease;
  3141. -webkit-transition: opacity 300ms ease;
  3142. transition: opacity 300ms ease;
  3143. }
  3144. .app-header-subnav-social-network-link:hover {
  3145. opacity: 0.8;
  3146. }
  3147. @media all and (min-width: 901px) {
  3148. .app-header-subnav-social-network-link.youtube-icon {
  3149. background: url("/assets/icons/youtube-black-circle.svg");
  3150. width: 45px;
  3151. height: 45px;
  3152. background-size: 100%}
  3153. .app-header-subnav-social-network-link.twitter-icon {
  3154. background: url("/assets/icons/twitter-black-circle.svg");
  3155. width: 45px;
  3156. height: 45px;
  3157. background-size: 100%}
  3158. .app-header-subnav-social-network-link.facebook-icon {
  3159. background: url("/assets/icons/facebook-black-circle.svg");
  3160. width: 45px;
  3161. height: 45px;
  3162. background-size: 100%}
  3163. .app-header-subnav-social-network-link.tumblr-icon {
  3164. background: url("/assets/icons/tumbler-black-circle.svg");
  3165. width: 45px;
  3166. height: 45px;
  3167. background-size: 100%}
  3168. .app-header-subnav-social-network-link.vine-icon {
  3169. background: url("/assets/icons/vine-black-circle.svg");
  3170. width: 45px;
  3171. height: 45px;
  3172. background-size: 100%}
  3173. .app-header-subnav-social-network-link.instagram-icon {
  3174. background: url("/assets/icons/instagram-black-circle.svg");
  3175. width: 45px;
  3176. height: 45px;
  3177. background-size: 100%}
  3178. }.app-header-preorder-btn {
  3179. -webkit-order: 3;
  3180. order: 3;
  3181. border-color: #faed7b;
  3182. color: #faed7b;
  3183. display: none;
  3184. font-size: 11px;
  3185. letter-spacing: .28em;
  3186. padding-left: 5em;
  3187. padding-top: 1em;
  3188. padding-bottom: 1em;
  3189. position: absolute;
  3190. right: 0;
  3191. top: 1.4em;
  3192. width: auto;
  3193. overflow-y: hidden;
  3194. z-index: 2;
  3195. }
  3196. .app-header-preorder-btn:before {
  3197. background: url("/assets/gold-arrow.png") no-repeat 0 0;
  3198. content: "";
  3199. display: block;
  3200. height: 25px;
  3201. left: 1em;
  3202. position: absolute;
  3203. top: 6px;
  3204. width: 37px;
  3205. }
  3206. @media all and (min-width: 901px) {
  3207. .app-header-preorder-btn {
  3208. display: block;
  3209. margin-right: 1rem;
  3210. }
  3211. }@media all and (min-width: 1116px) {
  3212. .app-header-preorder-btn {
  3213. margin: 0;
  3214. }
  3215. }.app-header-preorder-btn-text {
  3216. display: block;
  3217. position: relative;
  3218. -moz-animation: buttonMouseOff 500ms ease-out;
  3219. -webkit-animation: buttonMouseOff 500ms ease-out;
  3220. animation: buttonMouseOff 500ms ease-out;
  3221. }
  3222. .app-header-preorder-btn:hover .app-header-preorder-btn-text {
  3223. -moz-animation: buttonMouseOn 200ms ease-in-out;
  3224. -webkit-animation: buttonMouseOn 200ms ease-in-out;
  3225. animation: buttonMouseOn 200ms ease-in-out;
  3226. }
  3227. .app-header-announcement-text {
  3228. position: absolute;
  3229. right: 0;
  3230. color: #faed7b;
  3231. font-family: "FilmotypeGlenlake", serif;
  3232. top: 1.3em;
  3233. font-size: 20px;
  3234. text-transform: uppercase;
  3235. letter-spacing: .2em;
  3236. display: none;
  3237. }
  3238. .app-header-locale-en-us .app-header-announcement-text, .app-header-locale-en-gb .app-header-announcement-text {
  3239. margin-right: 18.75rem;
  3240. color: #fff;
  3241. }
  3242. @media all and (min-width: 901px) {
  3243. .app-header-announcement-text {
  3244. display: block;
  3245. margin-right: 1rem;
  3246. }
  3247. }@media all and (min-width: 1116px) {
  3248. .app-header-announcement-text {
  3249. margin: 0;
  3250. }
  3251. }.snippet {
  3252. padding: 2em;
  3253. border: 1px dashed #333;
  3254. position: relative;
  3255. }
  3256. @media all and (min-width: 901px) {
  3257. .snippet {
  3258. padding: 1em;
  3259. }
  3260. }.snippet-separator {
  3261. border-bottom: 1px dashed #333;
  3262. position: relative;
  3263. }
  3264. .snippet:before, .snippet-separator:before {
  3265. content: '';
  3266. background: url("/assets/icons/scissor.svg") no-repeat;
  3267. width: 64px;
  3268. height: 23px;
  3269. display: inline-block;
  3270. position: absolute;
  3271. right: 0;
  3272. top: -1.25em;
  3273. }
  3274. .snippet-separator:before {
  3275. top: auto;
  3276. bottom: -0.6em;
  3277. -moz-transform: scale(1, 1);
  3278. -ms-transform: scale(1, 1);
  3279. -webkit-transform: scale(1, 1);
  3280. transform: scale(1, 1);
  3281. }
  3282. .tab-panel-container {
  3283. position: relative;
  3284. }
  3285. .tab-panel {
  3286. left: 0;
  3287. opacity: 0;
  3288. position: absolute;
  3289. top: 0;
  3290. transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
  3291. visibility: hidden;
  3292. z-index: 0;
  3293. }
  3294. .tab-panel.tab-panel-active {
  3295. opacity: 1;
  3296. position: relative;
  3297. visibility: visible;
  3298. z-index: 1;
  3299. }
  3300. .simulation-platforms {
  3301. box-sizing: border-box;
  3302. display: -webkit-flex;
  3303. display: flex;
  3304. -webkit-flex-flow: row wrap;
  3305. flex-flow: row wrap;
  3306. -webkit-justify-content: center;
  3307. justify-content: center;
  3308. -webkit-align-items: center;
  3309. align-items: center;
  3310. list-style: none;
  3311. margin: 0;
  3312. padding: 0 1em;
  3313. width: 100%}
  3314. .simulation-platforms-item.icon {
  3315. display: block;
  3316. margin: 0 10px 10px;
  3317. }
  3318. .simulation-platforms-item.icon:first-of-type {
  3319. margin-left: 0;
  3320. }
  3321. @media all and (max-width: 601px), all and (min-width: 901px) and (max-width: 1099px) {
  3322. .previous-simulations-platforms .simulation-platforms-item.icon {
  3323. max-height: 20px;
  3324. max-width: 45px;
  3325. }
  3326. }.simulation-platforms-item-link {
  3327. display: block;
  3328. height: 18px;
  3329. clip: auto;
  3330. color: transparent;
  3331. display: block;
  3332. height: 0;
  3333. margin: 0;
  3334. overflow: hidden;
  3335. padding: 0;
  3336. text-indent: 100%;
  3337. white-space: nowrap;
  3338. width: 0;
  3339. width: auto;
  3340. }
  3341. .spike {
  3342. background: #000 url("../assets/texture-noise@1x.png");
  3343. box-sizing: border-box;
  3344. color: #fff;
  3345. text-align: center;
  3346. padding: 2rem;
  3347. position: relative;
  3348. outline: 2px solid #fff;
  3349. outline-offset: -1rem;
  3350. }
  3351. .spike:before {
  3352. content: '';
  3353. display: block;
  3354. width: 4.5em;
  3355. height: 2em;
  3356. background: url("../assets/vault-tec-icon.svg") no-repeat 0;
  3357. position: absolute;
  3358. top: 1.5em;
  3359. left: 50%;
  3360. text-align: center;
  3361. margin-left: -2.25em;
  3362. }
  3363. .spike .spike-tagline {
  3364. font-size: 0.75rem;
  3365. font-family: "futura-pt-condensed", sans-serif;
  3366. font-weight: 400;
  3367. margin-top: 3em;
  3368. letter-spacing: initial;
  3369. }
  3370. .spike .spike-heading {
  3371. font-family: "futura-pt", sans-serif;
  3372. font-size: 2.2em;
  3373. line-height: 1em;
  3374. margin: 0 auto .5em;
  3375. }
  3376. @media all and (min-width: 901px) {
  3377. .spike .spike-heading {
  3378. font-size: 1.7em;
  3379. }
  3380. }.spike .spike-copy {
  3381. color: #ebeae5;
  3382. font-size: 1rem;
  3383. line-height: 1.25rem;
  3384. }
  3385. .spike.promo-spike {
  3386. padding: 0;
  3387. outline-offset: 0;
  3388. }
  3389. .featured-media {
  3390. -moz-animation-play-state: paused;
  3391. -webkit-animation-play-state: paused;
  3392. animation-play-state: paused;
  3393. display: -webkit-flex;
  3394. display: flex;
  3395. -webkit-flex-flow: row wrap;
  3396. flex-flow: row wrap;
  3397. -webkit-justify-content: space-around;
  3398. justify-content: space-around;
  3399. overflow: hidden;
  3400. position: relative;
  3401. width: 100%}
  3402. .featured-media.announcement-featured-media {
  3403. height: auto;
  3404. }
  3405. @media all and (min-width: 800px) {
  3406. .featured-media.announcement-featured-media {
  3407. max-height: none;
  3408. }
  3409. }@media all and (min-width: 901px) {
  3410. .featured-media {
  3411. margin-bottom: 3rem;
  3412. }
  3413. .featured-media.module-active {
  3414. -moz-animation-play-state: running;
  3415. -webkit-animation-play-state: running;
  3416. animation-play-state: running;
  3417. }
  3418. }.featured-media.module-disabled {
  3419. -moz-animation-play-state: paused;
  3420. -webkit-animation-play-state: paused;
  3421. animation-play-state: paused;
  3422. }
  3423. .featured-media-asset-container {
  3424. overflow: hidden;
  3425. position: relative;
  3426. height: auto;
  3427. width: 100%}
  3428. .featured-media-asset-image-container {
  3429. overflow: hidden;
  3430. width: 100%}
  3431. .featured-media-asset-background-image {
  3432. position: relative;
  3433. height: auto;
  3434. width: 100%}
  3435. .featured-media-asset-text {
  3436. -moz-animation-play-state: paused;
  3437. -webkit-animation-play-state: paused;
  3438. animation-play-state: paused;
  3439. -moz-transform: translate(-50%, -50%);
  3440. -ms-transform: translate(-50%, -50%);
  3441. -webkit-transform: translate(-50%, -50%);
  3442. transform: translate(-50%, -50%);
  3443. opacity: 0;
  3444. left: 50%;
  3445. top: 50%;
  3446. height: 100%;
  3447. position: absolute;
  3448. width: 100%;
  3449. max-width: 375px;
  3450. z-index: 2;
  3451. cursor: pointer;
  3452. }
  3453. @media all and (min-width: 767px) and (max-width: 1099px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  3454. .featured-media-asset-text {
  3455. max-width: 575px;
  3456. }
  3457. }@media all and (min-device-width: 901px) and (max-width: 901px) {
  3458. .featured-media-asset-text {
  3459. opacity: 1;
  3460. width: 50%;
  3461. height: auto;
  3462. }
  3463. }@media all and (min-width: 901px) {
  3464. .featured-media-asset-text {
  3465. opacity: 1;
  3466. -webkit-filter: blur(1px);
  3467. filter: blur(1px);
  3468. height: auto;
  3469. width: 75%;
  3470. max-width: 450px;
  3471. }
  3472. .module-active .featured-media-asset-text {
  3473. -moz-animation-play-state: running;
  3474. -webkit-animation-play-state: running;
  3475. animation-play-state: running;
  3476. }
  3477. .featured-media-asset-text.slow-shake-active {
  3478. margin-left: -225px;
  3479. top: 25%}
  3480. }@media all and (min-width: 1280px) {
  3481. .featured-media-asset-text {
  3482. max-width: 705px;
  3483. max-height: 600px;
  3484. }
  3485. .featured-media-asset-text.slow-shake-active {
  3486. margin-left: -352px;
  3487. }
  3488. }@media all and (min-width: 1099px) and (max-height: 780px) {
  3489. .featured-media-asset-text {
  3490. max-width: 620px;
  3491. max-height: 572px;
  3492. }
  3493. .featured-media-asset-text.slow-shake-active {
  3494. margin-left: -310px;
  3495. }
  3496. }.featured-media-asset-btn-container {
  3497. display: -webkit-flex;
  3498. display: flex;
  3499. position: absolute;
  3500. height: 66px;
  3501. top: 1rem;
  3502. right: 1rem;
  3503. }
  3504. @media all and (min-width: 1100px) {
  3505. .featured-media-asset-btn-container {
  3506. right: 50%;
  3507. margin-right: -550px;
  3508. }
  3509. }.featured-media-download-asset-btn {
  3510. box-sizing: border-box;
  3511. position: relative;
  3512. display: block;
  3513. overflow: hidden;
  3514. text-indent: -9999px;
  3515. height: 30px;
  3516. width: 32px;
  3517. z-index: 2;
  3518. -moz-box-shadow: inset 1px 1px 1px #000;
  3519. -webkit-box-shadow: inset 1px 1px 1px #000;
  3520. box-shadow: inset 1px 1px 1px #000;
  3521. border-top: 1px solid #fff;
  3522. border-right: 1px solid #000;
  3523. border-bottom: 1px solid #000;
  3524. border-left: 2px solid #fff;
  3525. }
  3526. @media all and (min-width: 321px) {
  3527. .featured-media-download-asset-btn: before {
  3528. background-size: percentage 0.94286;
  3529. }
  3530. }.featured-media-download-asset-btn:before {
  3531. background-image: url("/assets/icons/download-asset-button.svg");
  3532. background-repeat: no-repeat;
  3533. background-position: center;
  3534. background-size: 60%;
  3535. content: '';
  3536. display: block;
  3537. position: relative;
  3538. -moz-animation: buttonMouseOff 600ms ease-out;
  3539. -webkit-animation: buttonMouseOff 600ms ease-out;
  3540. animation: buttonMouseOff 600ms ease-out;
  3541. -moz-animation-play-state: paused;
  3542. -webkit-animation-play-state: paused;
  3543. animation-play-state: paused;
  3544. height: 100%;
  3545. width: 100%}
  3546. .featured-media-download-asset-btn:after {
  3547. display: block;
  3548. content: '';
  3549. position: absolute;
  3550. width: 100%;
  3551. height: 100%;
  3552. top: 0;
  3553. border-bottom: 1px solid #000;
  3554. -moz-box-shadow: inset -2px -1px 1px #fff;
  3555. -webkit-box-shadow: inset -2px -1px 1px #fff;
  3556. box-shadow: inset -2px -1px 1px #fff;
  3557. }
  3558. .featured-media-download-asset-btn:hover:before {
  3559. -moz-animation: buttonMouseOn 250ms ease-in-out;
  3560. -webkit-animation: buttonMouseOn 250ms ease-in-out;
  3561. animation: buttonMouseOn 250ms ease-in-out;
  3562. }
  3563. @media all and (min-width: 901px) {
  3564. .featured-media-download-asset-btn {
  3565. height: 66px;
  3566. width: 70px;
  3567. }
  3568. }.featured-media-full-screen-btn {
  3569. box-sizing: border-box;
  3570. position: relative;
  3571. display: none;
  3572. overflow: hidden;
  3573. text-indent: -9999px;
  3574. height: 66px;
  3575. width: 70px;
  3576. z-index: 2;
  3577. -moz-box-shadow: inset 1px 1px 1px #000;
  3578. -webkit-box-shadow: inset 1px 1px 1px #000;
  3579. box-shadow: inset 1px 1px 1px #000;
  3580. border-top: 1px solid #fff;
  3581. border-right: 1px solid #000;
  3582. border-bottom: 1px solid #000;
  3583. border-left: 2px solid #fff;
  3584. margin-left: 1rem;
  3585. }
  3586. .featured-media-full-screen-btn:before {
  3587. background-image: url("/assets/icons/magnifying-glass.svg");
  3588. content: '';
  3589. display: block;
  3590. position: relative;
  3591. -moz-animation: buttonMouseOff 600ms ease-out;
  3592. -webkit-animation: buttonMouseOff 600ms ease-out;
  3593. animation: buttonMouseOff 600ms ease-out;
  3594. -moz-animation-play-state: paused;
  3595. -webkit-animation-play-state: paused;
  3596. animation-play-state: paused;
  3597. height: 62px;
  3598. width: 62px;
  3599. }
  3600. .featured-media-full-screen-btn:after {
  3601. display: block;
  3602. content: '';
  3603. position: absolute;
  3604. width: 100%;
  3605. height: 100%;
  3606. top: 0;
  3607. border-bottom: 1px solid #000;
  3608. -moz-box-shadow: inset -2px -1px 1px #fff;
  3609. -webkit-box-shadow: inset -2px -1px 1px #fff;
  3610. box-shadow: inset -2px -1px 1px #fff;
  3611. }
  3612. .featured-media-full-screen-btn:hover:before {
  3613. -moz-animation: buttonMouseOn 250ms ease-in-out;
  3614. -webkit-animation: buttonMouseOn 250ms ease-in-out;
  3615. animation: buttonMouseOn 250ms ease-in-out;
  3616. }
  3617. @media all and (min-width: 1100px) {
  3618. .module-active .featured-media-download-asset-btn: before {
  3619. -moz-animation-play-state: running;
  3620. -webkit-animation-play-state: running;
  3621. animation-play-state: running;
  3622. }
  3623. }@media all and (min-width: 901px) {
  3624. .featured-media-full-screen-btn-active.featured-media-full-screen-btn {
  3625. display: block;
  3626. }
  3627. }.featured-media-full-screen-btn-active.featured-media-full-screen-btn:before {
  3628. -moz-animation-play-state: running;
  3629. -webkit-animation-play-state: running;
  3630. animation-play-state: running;
  3631. }
  3632. .announcement-featured-media .featured-media-full-screen-btn.featured-media-full-screen-btn-active {
  3633. display: none;
  3634. }
  3635. .featured-media-asset-video-container {
  3636. display: block;
  3637. height: 100%;
  3638. left: 0;
  3639. position: absolute;
  3640. top: 0;
  3641. width: 100%}
  3642. .featured-media-asset-video-container::after {
  3643. content: "";
  3644. display: block;
  3645. width: 100%;
  3646. height: 100%;
  3647. position: absolute;
  3648. top: 0;
  3649. left: 0;
  3650. z-index: 1;
  3651. }
  3652. .featured-media-asset-video-container iframe {
  3653. width: 100%;
  3654. height: 100%;
  3655. position: relative;
  3656. z-index: 0;
  3657. }
  3658. .featured-media-asset-image {
  3659. -moz-animation: none;
  3660. -webkit-animation: none;
  3661. animation: none;
  3662. }
  3663. @media all and (min-width: 901px) {
  3664. .featured-media-asset-image {
  3665. -moz-animation: featuredVideoPan 400s infinite;
  3666. -webkit-animation: featuredVideoPan 400s infinite;
  3667. animation: featuredVideoPan 400s infinite;
  3668. height: auto;
  3669. width: auto;
  3670. z-index: 1;
  3671. }
  3672. .modal-container-active .featured-media-asset-image {
  3673. -moz-animation-play-state: paused;
  3674. -webkit-animation-play-state: paused;
  3675. animation-play-state: paused;
  3676. }
  3677. }.featured-media-asset-video-modal {
  3678. height: 100%;
  3679. width: 100%}
  3680. .featured-media-asset-video-modal.modal-active {
  3681. background-color: #000;
  3682. -moz-transform: translateX(0) translateY(0) scale(1);
  3683. -ms-transform: translateX(0) translateY(0) scale(1);
  3684. -webkit-transform: translateX(0) translateY(0) scale(1);
  3685. transform: translateX(0) translateY(0) scale(1);
  3686. }
  3687. @media all and (min-width: 901px) {
  3688. .featured-media-asset-video-modal.modal-active {
  3689. background-color: rgba(0, 0, 0, 0.9);
  3690. }
  3691. }.featured-media-asset-video-modal .featured-media-asset-video-container {
  3692. display: table;
  3693. height: auto;
  3694. max-width: 56.25rem;
  3695. margin: auto;
  3696. left: 0;
  3697. position: absolute;
  3698. top: 50%;
  3699. right: 0;
  3700. -moz-transform: translateY(-50%);
  3701. -ms-transform: translateY(-50%);
  3702. -webkit-transform: translateY(-50%);
  3703. transform: translateY(-50%);
  3704. vertical-align: middle;
  3705. width: 100%}
  3706. @media all and (min-width: 901px) {
  3707. .featured-media-asset-video-modal .featured-media-asset-video-container {
  3708. width: 80%}
  3709. }.featured-media-asset-video-modal .featured-media-asset-video-container:after {
  3710. content: none;
  3711. }
  3712. .featured-media-asset-video-modal .video-wrapper {
  3713. position: relative;
  3714. width: 100%}
  3715. .featured-media-asset-video-modal .video-wrapper:after {
  3716. content: '';
  3717. display: block;
  3718. padding-top: 56.25%}
  3719. .featured-media-asset-video-modal iframe {
  3720. bottom: 0;
  3721. height: 100%;
  3722. left: 0;
  3723. position: absolute;
  3724. right: 0;
  3725. top: 0;
  3726. width: 100%;
  3727. z-index: 2;
  3728. }
  3729. .featured-media-asset-video-modal .modal-btn.modal-close-btn-animated {
  3730. border-color: #fff;
  3731. top: -52px;
  3732. right: 0;
  3733. }
  3734. @media all and (min-width: 901px) {
  3735. .featured-media-asset-video-modal .modal-btn.modal-close-btn-animated {
  3736. top: 0;
  3737. right: -75px;
  3738. }
  3739. }.featured-media-asset-video-modal .modal-close-btn-animated-text {
  3740. background-image: url("/assets/icons/close-white.svg");
  3741. background-repeat: no-repeat;
  3742. }
  3743. .spotlight-split-item:first-child {
  3744. margin-right: 1.875rem;
  3745. padding-right: 1.875rem;
  3746. border-right: 3px solid #000;
  3747. }
  3748. .section-heading {
  3749. border-top: 3px solid transparent;
  3750. border-bottom: 3px solid transparent;
  3751. box-sizing: border-box;
  3752. display: block;
  3753. font-size: 0.75rem;
  3754. padding: 1.0625rem;
  3755. width: 100%;
  3756. max-width: 1100px;
  3757. text-transform: uppercase;
  3758. }
  3759. .section-heading.section-heading-dark {
  3760. border-color: #000;
  3761. }
  3762. .section-heading.section-heading-light {
  3763. border-color: #fff;
  3764. color: #fff;
  3765. }
  3766. .section-heading-inline-nav-wrap {
  3767. display: -webkit-flex;
  3768. display: flex;
  3769. -webkit-flex-flow: row wrap;
  3770. flex-flow: row wrap;
  3771. -webkit-justify-content: space-around;
  3772. justify-content: space-around;
  3773. }
  3774. .section-heading-inline-nav-wrap .section-heading {
  3775. -webkit-flex: 4;
  3776. flex: 4;
  3777. }
  3778. .section-heading-inline-nav {
  3779. list-style: none;
  3780. display: -webkit-flex;
  3781. display: flex;
  3782. padding: .75em 0;
  3783. margin: 0;
  3784. }
  3785. .section-heading-inline-nav-item {
  3786. padding: 0;
  3787. }
  3788. .section-heading-inline-nav-item:last-child {
  3789. border-right: 3px solid #000;
  3790. }
  3791. .section-heading-inline-nav-item-btn.standard-btn {
  3792. border-width: 3px;
  3793. border-right: 0;
  3794. padding: 1.5em 2em;
  3795. color: inherit;
  3796. font-size: 0.75rem;
  3797. }
  3798. .tab-button-active .section-heading-inline-nav-item-btn.standard-btn {
  3799. background: #000 url("../assets/texture-noise@1x.png");
  3800. color: #fff;
  3801. border-color: inherit;
  3802. }
  3803. .media-view {
  3804. text-align: center;
  3805. -moz-transform-style: preserve-3d;
  3806. -webkit-transform-style: preserve-3d;
  3807. transform-style: preserve-3d;
  3808. }
  3809. .media-view iframe {
  3810. position: relative;
  3811. display: inline-block;
  3812. width: 100%;
  3813. height: 500px;
  3814. max-width: 100%}
  3815. .media-view-wrapper {
  3816. left: 0;
  3817. height: auto;
  3818. max-width: 56.25rem;
  3819. margin: auto;
  3820. position: absolute;
  3821. right: 0;
  3822. top: 50%;
  3823. text-align: center;
  3824. -moz-transform: translateY(-50%);
  3825. -ms-transform: translateY(-50%);
  3826. -webkit-transform: translateY(-50%);
  3827. transform: translateY(-50%);
  3828. vertical-align: middle;
  3829. width: 100%}
  3830. .media-view-panels {
  3831. height: auto;
  3832. position: relative;
  3833. width: 100%}
  3834. @media all and (min-width: 901px) {
  3835. .media-view-panels {
  3836. height: auto;
  3837. }
  3838. }.media-view-btn-container {
  3839. position: absolute;
  3840. height: 10em;
  3841. width: 5em;
  3842. right: 0;
  3843. top: -3.25rem;
  3844. z-index: 2;
  3845. }
  3846. .media-view-close-btn {
  3847. right: 0;
  3848. top: 0;
  3849. }
  3850. @media all and (min-width: 901px) {
  3851. .media-view-close-btn {
  3852. right: 1.5em;
  3853. }
  3854. }.media-view-next-btn, .media-view-prev-btn {
  3855. display: none;
  3856. }
  3857. @media all and (min-width: 901px) {
  3858. .media-view-next-btn, .media-view-prev-btn {
  3859. display: block;
  3860. }
  3861. }@media all and (min-width: 901px) {
  3862. .media-view-download .modal-btn.media-view-next-btn, .media-view-download .modal-btn.media-view-prev-btn {
  3863. display: none;
  3864. }
  3865. }.media-view-download .media-view-caption-text-copy {
  3866. display: none;
  3867. }
  3868. .media-view-panel {
  3869. height: 0;
  3870. left: 0;
  3871. opacity: 0;
  3872. overflow: hidden;
  3873. top: -32px;
  3874. -moz-transition: all 300ms ease;
  3875. -o-transition: all 300ms ease;
  3876. -webkit-transition: all 300ms ease;
  3877. transition: all 300ms ease;
  3878. width: 100%;
  3879. z-index: 0;
  3880. }
  3881. .media-view-panel.media-view-panel-active {
  3882. height: 100%;
  3883. opacity: 1;
  3884. overflow: auto;
  3885. z-index: 1;
  3886. }
  3887. .media-view-asset-image {
  3888. width: 100%;
  3889. max-width: 900px;
  3890. position: relative;
  3891. }
  3892. .media-view-caption {
  3893. height: 4em;
  3894. display: -webkit-flex;
  3895. display: flex;
  3896. margin-top: -0.5em;
  3897. width: 100%;
  3898. z-index: 2;
  3899. }
  3900. .media-view-asset-container-video .media-view-caption {
  3901. display: none;
  3902. }
  3903. .media-view-caption-text {
  3904. padding: 0 0 0 1em;
  3905. -webkit-flex: 3;
  3906. flex: 3;
  3907. color: #fff;
  3908. text-align: left;
  3909. background-color: #000;
  3910. }
  3911. .media-view-caption-text-title {
  3912. display: inline-block;
  3913. text-transform: uppercase;
  3914. font-family: "futura-pt", sans-serif;
  3915. letter-spacing: 0.1875rem;
  3916. margin-bottom: .25em;
  3917. font-size: 0.75rem;
  3918. padding-top: 1.5em;
  3919. }
  3920. .media-view-caption-text-copy {
  3921. color: #fff;
  3922. margin: 0;
  3923. font-size: 12px;
  3924. }
  3925. .media-view-social-links {
  3926. -webkit-flex: 1;
  3927. flex: 1;
  3928. -webkit-order: 2;
  3929. order: 2;
  3930. height: auto;
  3931. padding: 1em 0 0;
  3932. background-color: #000;
  3933. }
  3934. .media-view-subnav-social-network-link {
  3935. background: none;
  3936. color: #fff;
  3937. display: inline-block;
  3938. font-family: "futura-pt", sans-serif;
  3939. letter-spacing: 0.1875rem;
  3940. text-transform: uppercase;
  3941. text-indent: -9999px;
  3942. width: 100%;
  3943. margin: 0;
  3944. }
  3945. .media-view-subnav-social-network-link.twitter-icon {
  3946. background: url("../assets/icons/icons.png") -35px -247px;
  3947. width: 35px;
  3948. height: 35px;
  3949. }
  3950. .media-view-subnav-social-network-link.facebook-icon {
  3951. background: url("../assets/icons/icons.png") -175px -247px;
  3952. width: 35px;
  3953. height: 35px;
  3954. }
  3955. @media all and (min-width: 901px) {
  3956. .media-view-btn-container {
  3957. top: 0;
  3958. right: -5em;
  3959. }
  3960. .media-view-btn-container .modal-btn {
  3961. display: block;
  3962. }
  3963. .media-view-subnav-social-network-link {
  3964. margin: 0 .5em;
  3965. }
  3966. .media-view-wrapper {
  3967. width: 56.25rem;
  3968. max-width: 80%;
  3969. margin: 0 auto;
  3970. height: auto;
  3971. }
  3972. .media-view-panel {
  3973. height: 0;
  3974. }
  3975. .media-view-panel.media-view-panel-active {
  3976. height: auto;
  3977. }
  3978. .media-view-asset-image {
  3979. transform: none;
  3980. }
  3981. }.media-view-download-link {
  3982. background-image: url("/assets/modal-download.svg");
  3983. background-position: 50%;
  3984. background-repeat: no-repeat;
  3985. background-size: 30%;
  3986. background-color: #000;
  3987. display: none;
  3988. height: 100%;
  3989. width: 4.375rem;
  3990. margin-left: .25em;
  3991. -webkit-order: 3;
  3992. order: 3;
  3993. }
  3994. @media all and (min-width: 901px) {
  3995. .media-view-download-link {
  3996. display: block;
  3997. }
  3998. }.media-view-download-dropdown-list {
  3999. background: #000;
  4000. display: none;
  4001. position: absolute;
  4002. list-style: none;
  4003. margin: 0;
  4004. right: 0;
  4005. width: 12em;
  4006. padding: 1em;
  4007. z-index: -1;
  4008. overflow-y: hidden;
  4009. opacity: 0;
  4010. height: 0;
  4011. bottom: 4.25em;
  4012. -moz-transition: all 200ms ease;
  4013. -o-transition: all 200ms ease;
  4014. -webkit-transition: all 200ms ease;
  4015. transition: all 200ms ease;
  4016. }
  4017. @media all and (min-width: 901px) {
  4018. .media-view-download-dropdown-list {
  4019. display: -webkit-flex;
  4020. display: flex;
  4021. -webkit-flex-flow: column wrap;
  4022. flex-flow: column wrap;
  4023. height: 69px;
  4024. }
  4025. }.media-view-download-dropdown-list.media-view-download-dropdown-list-active {
  4026. height: 16em;
  4027. opacity: 1;
  4028. }
  4029. .media-view-download-dropdown-list-item {
  4030. border-top: 0.0625rem solid #eae9e4;
  4031. color: #fff;
  4032. font-family: "futura-pt", sans-serif;
  4033. letter-spacing: 0.1875rem;
  4034. text-align: center;
  4035. text-transform: uppercase;
  4036. width: 100%}
  4037. .media-view-download-dropdown-list-item .media-view-download-dropdown-list-item-section-link {
  4038. color: #fff;
  4039. display: block;
  4040. position: relative;
  4041. text-decoration: none;
  4042. transition: color .75s;
  4043. width: 100%;
  4044. z-index: 1;
  4045. margin: 0;
  4046. line-height: normal;
  4047. padding: 1em 0;
  4048. border-width: 0.0625rem;
  4049. font-size: 0.75rem;
  4050. }
  4051. .media-view-download-dropdown-list-item:first-child {
  4052. border-width: 0.1875rem;
  4053. }
  4054. .media-view-download-dropdown-list-item:last-child {
  4055. border-bottom: 0.1875rem solid #eae9e4;
  4056. }
  4057. .announcement-preorder {
  4058. max-width: 1100px;
  4059. display: -webkit-flex;
  4060. display: flex;
  4061. -webkit-flex-flow: column wrap;
  4062. flex-flow: column wrap;
  4063. -webkit-justify-content: space-around;
  4064. justify-content: space-around;
  4065. padding: 1rem;
  4066. }
  4067. @media all and (min-width: 1099px) {
  4068. .announcement-preorder {
  4069. padding: 2rem 0 0;
  4070. margin: 2rem auto 4em;
  4071. overflow: visible;
  4072. }
  4073. }.announcement-preorder-content {
  4074. padding-top: 2em;
  4075. }
  4076. @media all and (min-width: 901px) {
  4077. .announcement-preorder-content {
  4078. display: -webkit-flex;
  4079. display: flex;
  4080. -webkit-flex-flow: row wrap;
  4081. flex-flow: row wrap;
  4082. -webkit-justify-content: space-around;
  4083. justify-content: space-around;
  4084. padding-top: 3em;
  4085. }
  4086. }.announcement-preorder-summary {
  4087. -webkit-flex: 2;
  4088. flex: 2;
  4089. position: relative;
  4090. }
  4091. .announcement-preorder-summary .announcement-preorder-summary-image {
  4092. width: 100%;
  4093. z-index: 1;
  4094. position: relative;
  4095. top: -5em;
  4096. }
  4097. @media all and (min-width: 901px) {
  4098. .announcement-preorder-summary .announcement-preorder-summary-image {
  4099. top: 10em;
  4100. width: 55%;
  4101. left: 14em;
  4102. }
  4103. }.announcement-preorder-summary .announcement-preorder-copy-wrapper {
  4104. display: -webkit-flex;
  4105. display: flex;
  4106. -webkit-flex-flow: row wrap;
  4107. flex-flow: row wrap;
  4108. -webkit-justify-content: space-around;
  4109. justify-content: space-around;
  4110. position: absolute;
  4111. bottom: 1em;
  4112. z-index: 2;
  4113. }
  4114. @media all and (min-width: 901px) {
  4115. .announcement-preorder-summary .announcement-preorder-copy-wrapper {
  4116. bottom: -2em;
  4117. }
  4118. }.announcement-preorder-summary .announcement-preorder-copy {
  4119. -webkit-flex: 4 30%;
  4120. flex: 4 30%;
  4121. margin: 0;
  4122. }
  4123. .announcement-preorder-summary .announcement-preorder-title-image {
  4124. width: 100%}
  4125. @media all and (min-width: 901px) {
  4126. .announcement-preorder-summary .announcement-preorder-title-image {
  4127. margin-left: 1em;
  4128. position: absolute;
  4129. z-index: 2;
  4130. width: 70%}
  4131. }.announcement-preorder-summary .preorder-form {
  4132. position: relative;
  4133. top: -2em;
  4134. }
  4135. @media all and (min-width: 901px) {
  4136. .announcement-preorder-summary .preorder-form {
  4137. position: absolute;
  4138. top: auto;
  4139. bottom: -1em;
  4140. }
  4141. }@media all and (min-width: 901px) {
  4142. .announcement-preorder-summary {
  4143. padding: 0 0 1.5em;
  4144. }
  4145. }.announcement-preorder-aside {
  4146. width: 100%;
  4147. height: 0;
  4148. padding-bottom: 162%;
  4149. position: relative;
  4150. background-image: url("/assets/announcement-preorder/announcement-preorder-aside-banner.jpg");
  4151. background-repeat: no-repeat;
  4152. background-size: 100%;
  4153. margin: auto;
  4154. }
  4155. .announcement-preorder-aside .youtube-icon {
  4156. background: url("/assets/announcement-preorder/announcement-preorder-aside-youtube-logo.png") 50% 50% no-repeat;
  4157. background-size: 50%}
  4158. .announcement-preorder-aside .twitch-icon {
  4159. background: url("/assets/announcement-preorder/announcement-preorder-aside-twitch-logo.png") 50% 50% no-repeat;
  4160. background-size: 50%}
  4161. @media all and (min-width: 901px) {
  4162. .announcement-preorder-aside {
  4163. max-width: 310px;
  4164. height: 500px;
  4165. padding: 0;
  4166. }
  4167. }.announcement-preorder-aside-links {
  4168. position: absolute;
  4169. bottom: 0;
  4170. height: 16%;
  4171. width: 100%;
  4172. display: -webkit-flex;
  4173. display: flex;
  4174. }
  4175. .announcement-preorder-aside-link {
  4176. clip: auto;
  4177. color: transparent;
  4178. display: block;
  4179. height: 0;
  4180. margin: 0;
  4181. overflow: hidden;
  4182. padding: 0;
  4183. text-indent: 100%;
  4184. white-space: nowrap;
  4185. width: 0;
  4186. -webkit-flex: 1;
  4187. flex: 1;
  4188. height: auto;
  4189. -moz-transition: opacity 300ms ease;
  4190. -o-transition: opacity 300ms ease;
  4191. -webkit-transition: opacity 300ms ease;
  4192. transition: opacity 300ms ease;
  4193. }
  4194. .announcement-preorder-aside-link:hover {
  4195. opacity: 0.5;
  4196. }
  4197. .preorder-blimp-btn {
  4198. color: #000;
  4199. margin: 1rem auto 0;
  4200. width: 18em;
  4201. border-width: 2px;
  4202. letter-spacing: 0.09375rem;
  4203. font-size: 0.7em;
  4204. font-weight: 600;
  4205. padding-top: 12px;
  4206. }
  4207. .preorder-blimp-btn .preorder-blimp-icon {
  4208. width: 70px;
  4209. height: 52px;
  4210. left: -6.5em;
  4211. top: -.5em;
  4212. -moz-transform: scale(0.7, 0.7);
  4213. -ms-transform: scale(0.7, 0.7);
  4214. -webkit-transform: scale(0.7, 0.7);
  4215. transform: scale(0.7, 0.7);
  4216. }
  4217. @media all and (min-width: 901px) {
  4218. .preorder-blimp-btn {
  4219. display: none;
  4220. }
  4221. }.newsletter-promo-module {
  4222. display: -ms-flexbox;
  4223. -ms-flex-flow: column wrap;
  4224. -webkit-flex-flow: column wrap;
  4225. flex-flow: column wrap;
  4226. max-width: 1100px;
  4227. padding: 1rem;
  4228. }
  4229. @media all and (min-width: 1099px) {
  4230. .newsletter-promo-module {
  4231. padding: 0 0 0.25rem;
  4232. }
  4233. }.newsletter-promo-module-header {
  4234. display: -ms-flexbox;
  4235. -ms-flex-flow: row wrap;
  4236. -ms-flex-pack: start;
  4237. -ms-flex-align: center;
  4238. -ms-flex: 4;
  4239. display: -webkit-flex;
  4240. display: flex;
  4241. -webkit-flex-flow: row wrap;
  4242. flex-flow: row wrap;
  4243. -webkit-justify-content: space-around;
  4244. justify-content: space-around;
  4245. -webkit-flex: 4;
  4246. flex: 4;
  4247. margin: 1.5625rem 0 0.5rem;
  4248. }
  4249. .newsletter-promo-module-header:before, .newsletter-promo-module-header:after {
  4250. border: 0;
  4251. border-bottom: 3px solid #000;
  4252. width: 100%;
  4253. position: relative;
  4254. padding: 0;
  4255. margin: auto;
  4256. display: -ms-flexbox;
  4257. -ms-flex: 4;
  4258. -webkit-flex: 4;
  4259. flex: 4;
  4260. content: ''}
  4261. .newsletter-promo-module-header-text {
  4262. display: block;
  4263. font-family: "futura-pt-condensed", sans-serif;
  4264. font-weight: 400;
  4265. font-size: 0.875rem;
  4266. margin: 0 1em;
  4267. text-transform: uppercase;
  4268. }
  4269. @media all and (min-width: 901px) {
  4270. .newsletter-promo-module-header-text {
  4271. margin-right: 2em;
  4272. margin-left: 2em;
  4273. }
  4274. }.newsletter-promo-module-content {
  4275. padding: 1rem;
  4276. margin-bottom: 0.5rem;
  4277. background: #000 url("/assets/texture-noise@1x.png");
  4278. display: -ms-flexbox;
  4279. -ms-flex-flow: row wrap;
  4280. -ms-flex-pack: start;
  4281. -ms-flex-align: center;
  4282. display: -webkit-flex;
  4283. display: flex;
  4284. -webkit-flex-flow: row wrap;
  4285. flex-flow: row wrap;
  4286. -webkit-justify-content: space-around;
  4287. justify-content: space-around;
  4288. position: relative;
  4289. }
  4290. @media all and (min-width: 901px) {
  4291. .newsletter-promo-module-content {
  4292. padding-left: 2em;
  4293. padding-right: 2em;
  4294. }
  4295. }.newsletter-promo-module-content:before {
  4296. background-image: url("/assets/newsletter-sign-up-tower.svg");
  4297. background-repeat: no-repeat;
  4298. width: 100%;
  4299. height: 100%;
  4300. content: "";
  4301. display: block;
  4302. position: absolute;
  4303. margin: auto;
  4304. right: 1em;
  4305. background-position: 100% 0;
  4306. max-width: 50px;
  4307. background-size: 90%}
  4308. @media all and (min-width: 901px) {
  4309. .newsletter-promo-module-content: before {
  4310. top: 0;
  4311. background-position: 50%;
  4312. background-size: inherit;
  4313. right: 0;
  4314. width: 100%;
  4315. max-width: none;
  4316. }
  4317. }.newsletter-promo-module-text {
  4318. box-sizing: border-box;
  4319. color: #eae9e4;
  4320. display: block;
  4321. font-family: "schoolbook-web", serif;
  4322. font-size: 14px;
  4323. line-height: 1.3em;
  4324. margin: 0 0 1em;
  4325. min-height: 2.25rem;
  4326. padding-right: 5rem;
  4327. width: 100%}
  4328. @media all and (min-width: 901px) {
  4329. .newsletter-promo-module-text {
  4330. min-height: 0;
  4331. margin: .4rem 0 0;
  4332. width: 50%}
  4333. }.newsletter-promo-module-form {
  4334. box-sizing: border-box;
  4335. display: -webkit-flex;
  4336. display: flex;
  4337. -webkit-flex-flow: row wrap;
  4338. flex-flow: row wrap;
  4339. position: relative;
  4340. text-align: right;
  4341. padding-right: 100px;
  4342. width: 100%}
  4343. @media all and (min-width: 901px) {
  4344. .newsletter-promo-module-form {
  4345. padding-left: 5rem;
  4346. padding-right: 130px;
  4347. width: 50%}
  4348. }.newsletter-promo-module-form-field-input {
  4349. border: none;
  4350. border-radius: 0;
  4351. display: inline-block;
  4352. font-family: "schoolbook-web", serif;
  4353. font-size: 12px;
  4354. height: 30px;
  4355. line-height: 29px;
  4356. padding: 0 10px;
  4357. width: 100%}
  4358. .newsletter-promo-module-form-field-input:-moz-placeholder {
  4359. color: #000;
  4360. }
  4361. .newsletter-promo-module-form-field-input::-moz-placeholder {
  4362. color: #000;
  4363. }
  4364. .newsletter-promo-module-form-field-input:-ms-input-placeholder {
  4365. color: #000;
  4366. }
  4367. .newsletter-promo-module-form-field-input::-webkit-input-placeholder {
  4368. color: #000;
  4369. }
  4370. .newsletter-promo-module-form-label.form-label {
  4371. clip: auto;
  4372. color: transparent;
  4373. display: block;
  4374. height: 0;
  4375. margin: 0;
  4376. overflow: hidden;
  4377. padding: 0;
  4378. text-indent: 100%;
  4379. white-space: nowrap;
  4380. width: 0;
  4381. }
  4382. .newsletter-promo-module-form-signup-btn.standard-btn {
  4383. box-sizing: content-box;
  4384. border-color: #fff;
  4385. cursor: pointer;
  4386. font-size: 10px;
  4387. height: 10px;
  4388. line-height: 10px;
  4389. padding: 8px 0;
  4390. position: absolute;
  4391. right: 0;
  4392. top: 0;
  4393. width: 100px;
  4394. overflow-y: hidden;
  4395. }
  4396. .newsletter-promo-locale-ru .newsletter-promo-module-form-signup-btn.standard-btn {
  4397. padding: 8px;
  4398. font-size: 7px;
  4399. }
  4400. @media all and (min-width: 901px) {
  4401. .newsletter-promo-module-form-signup-btn.standard-btn {
  4402. width: 130px;
  4403. }
  4404. }.newsletter-promo-module-form-signup-btn-text {
  4405. display: block;
  4406. position: relative;
  4407. -moz-animation: buttonMouseOff 600ms ease-out;
  4408. -webkit-animation: buttonMouseOff 600ms ease-out;
  4409. animation: buttonMouseOff 600ms ease-out;
  4410. }
  4411. .newsletter-promo-module-form-signup-btn:hover .newsletter-promo-module-form-signup-btn-text {
  4412. -moz-animation: buttonMouseOn 200ms ease-in-out;
  4413. -webkit-animation: buttonMouseOn 200ms ease-in-out;
  4414. animation: buttonMouseOn 200ms ease-in-out;
  4415. }
  4416. .promo-feature {
  4417. max-width: 1100px;
  4418. display: -webkit-flex;
  4419. display: flex;
  4420. -webkit-flex-flow: column wrap;
  4421. flex-flow: column wrap;
  4422. -webkit-justify-content: space-around;
  4423. justify-content: space-around;
  4424. padding: 1rem;
  4425. }
  4426. @media all and (min-width: 1099px) {
  4427. .promo-feature {
  4428. padding: 2rem 0 0;
  4429. margin: 2rem auto 4em;
  4430. overflow: visible;
  4431. }
  4432. }@media all and (min-width: 901px) {
  4433. .promo-feature-content {
  4434. display: -webkit-flex;
  4435. display: flex;
  4436. -webkit-flex-flow: row wrap;
  4437. flex-flow: row wrap;
  4438. -webkit-justify-content: space-around;
  4439. justify-content: space-around;
  4440. margin-bottom: 3em;
  4441. }
  4442. }.promo-feature-summary {
  4443. -webkit-flex: 2;
  4444. flex: 2;
  4445. position: relative;
  4446. }
  4447. .promo-feature-summary .promo-feature-summary-image {
  4448. width: 100%;
  4449. z-index: 1;
  4450. position: relative;
  4451. top: -9em;
  4452. }
  4453. @media all and (min-width: 901px) {
  4454. .promo-feature-summary .promo-feature-summary-image {
  4455. top: 2em;
  4456. width: 90%;
  4457. left: 3em;
  4458. }
  4459. }.promo-feature-summary .promo-feature-copy-wrapper {
  4460. display: -webkit-flex;
  4461. display: flex;
  4462. -webkit-flex-flow: row wrap;
  4463. flex-flow: row wrap;
  4464. -webkit-justify-content: space-around;
  4465. justify-content: space-around;
  4466. position: absolute;
  4467. bottom: 1em;
  4468. z-index: 2;
  4469. }
  4470. @media all and (min-width: 901px) {
  4471. .promo-feature-summary .promo-feature-copy-wrapper {
  4472. bottom: -2em;
  4473. }
  4474. }.promo-feature-summary .promo-feature-copy {
  4475. -webkit-flex: 4 30%;
  4476. flex: 4 30%;
  4477. margin: 0;
  4478. }
  4479. .promo-feature-summary .promo-feature-title-image {
  4480. margin-left: -1em;
  4481. width: 100%}
  4482. @media all and (min-width: 901px) {
  4483. .promo-feature-summary .promo-feature-title-image {
  4484. position: absolute;
  4485. z-index: 2;
  4486. width: 50%}
  4487. }.promo-feature-summary .standard-btn {
  4488. -webkit-flex: 1 20%;
  4489. flex: 1 20%;
  4490. margin: 0 13em;
  4491. background: none;
  4492. color: #000;
  4493. }
  4494. @media all and (min-width: 901px) {
  4495. .promo-feature-summary .standard-btn {
  4496. display: table;
  4497. }
  4498. }@media all and (max-width: 901px) {
  4499. .promo-feature-summary .promo-feature-copy {
  4500. -webkit-flex: 1 100%;
  4501. flex: 1 100%;
  4502. margin: 3em 0 1em;
  4503. line-height: 1.5rem;
  4504. }
  4505. .promo-feature-summary .standard-btn {
  4506. -webkit-flex: 4 100%;
  4507. flex: 4 100%;
  4508. margin: 0 6em;
  4509. min-width: 11.0625rem;
  4510. }
  4511. }@media all and (min-width: 901px) {
  4512. .promo-feature-summary {
  4513. padding: 0 0 1.5em;
  4514. }
  4515. }.promo-feature-merchandise {
  4516. max-width: 278px;
  4517. max-height: 500px;
  4518. position: relative;
  4519. top: 2rem;
  4520. outline-offset: -1rem;
  4521. }
  4522. .promo-feature-merchandise .promo-feature-merchandise-heading {
  4523. font-size: 1.5625rem;
  4524. font-family: "futura-pt", sans-serif;
  4525. margin: 0 1em 1em;
  4526. }
  4527. .promo-feature-merchandise .promo-feature-merchandise-image {
  4528. display: block;
  4529. height: auto;
  4530. position: relative;
  4531. width: 100%}
  4532. @media all and (min-width: 901px) {
  4533. .promo-feature-merchandise .promo-feature-merchandise-image {
  4534. width: 75%;
  4535. margin: 0 auto;
  4536. }
  4537. }.promo-feature-merchandise .standard-btn {
  4538. margin: 0 6em 1em;
  4539. background: none;
  4540. color: #fff;
  4541. min-width: 11.0625rem;
  4542. }
  4543. @media all and (min-width: 901px) {
  4544. .promo-feature-merchandise .standard-btn {
  4545. margin: auto;
  4546. -webkit-justify-content: center;
  4547. justify-content: center;
  4548. max-width: 105px;
  4549. }
  4550. }.promo-feature-merchandise:before {
  4551. content: '';
  4552. display: block;
  4553. width: 5.5em;
  4554. height: 2em;
  4555. background: url("../assets/vault-tec-icon.svg") no-repeat 0;
  4556. background-size: 100%;
  4557. position: absolute;
  4558. top: 2em;
  4559. left: 50%;
  4560. text-align: center;
  4561. margin-left: -2.75em;
  4562. }
  4563. @media all and (max-width: 901px) {
  4564. .promo-feature-merchandise {
  4565. -webkit-flex: 1 100%;
  4566. flex: 1 100%;
  4567. max-width: none;
  4568. max-height: none;
  4569. margin-bottom: 1em;
  4570. }
  4571. .promo-feature-merchandise .promo-copy {
  4572. -webkit-flex: 1 100%;
  4573. flex: 1 100%;
  4574. margin: 3em 0 1em;
  4575. }
  4576. }.simulation-hero {
  4577. height: 570px;
  4578. padding: 1rem;
  4579. position: relative;
  4580. margin-top: 2.5rem;
  4581. margin-bottom: 1rem;
  4582. width: 100%}
  4583. @media all and (min-width: 901px) {
  4584. .simulation-hero {
  4585. margin-top: 3rem;
  4586. padding-top: 3rem;
  4587. margin-bottom: 3rem;
  4588. }
  4589. }@media all and (min-width: 1099px) {
  4590. .simulation-hero {
  4591. height: 660px;
  4592. }
  4593. }.simulation-hero-heading {
  4594. display: block;
  4595. position: relative;
  4596. width: 100%;
  4597. z-index: 3;
  4598. margin: 1rem auto;
  4599. }
  4600. .simulation-hero-background-image {
  4601. background: #000;
  4602. display: block;
  4603. height: auto;
  4604. min-height: 570px;
  4605. left: 0;
  4606. position: absolute;
  4607. top: 0;
  4608. width: 100%;
  4609. max-width: 100%;
  4610. z-index: 0;
  4611. }
  4612. @media all and (min-width: 901px) {
  4613. .simulation-hero-background-image {
  4614. min-width: 1280px;
  4615. }
  4616. }.simulation-hero-content {
  4617. left: 0;
  4618. position: absolute;
  4619. text-align: center;
  4620. top: 50%;
  4621. -moz-transform: translateY(-50%);
  4622. -ms-transform: translateY(-50%);
  4623. -webkit-transform: translateY(-50%);
  4624. transform: translateY(-50%);
  4625. width: 100%;
  4626. z-index: 2;
  4627. }
  4628. .simulation-hero-game-logo {
  4629. width: 250px;
  4630. margin-top: 5rem;
  4631. }
  4632. @media all and (min-width: 901px) {
  4633. .simulation-hero-game-logo {
  4634. width: auto;
  4635. margin-top: 10rem;
  4636. }
  4637. }.simulation-hero-title {
  4638. color: #fff;
  4639. font-family: "futura-pt", sans-serif;
  4640. font-weight: bold;
  4641. font-size: 60px;
  4642. text-shadow: 4px 3px 4px #000;
  4643. text-transform: uppercase;
  4644. display: block;
  4645. margin: 0 auto;
  4646. }
  4647. @media all and (min-width: 901px) {
  4648. .simulation-hero-title {
  4649. font-size: 70px;
  4650. margin: 1rem 0 0;
  4651. }
  4652. }.simulation-hero-copy {
  4653. color: #fff;
  4654. margin: 0 2em;
  4655. font-size: 15px;
  4656. line-height: 1.5em;
  4657. }
  4658. @media all and (min-width: 370px) {
  4659. .simulation-hero-copy {
  4660. margin: 2em 2em 1em;
  4661. }
  4662. }@media all and (min-width: 901px) {
  4663. .simulation-hero-copy {
  4664. width: 28em;
  4665. margin: 2rem auto 1rem;
  4666. }
  4667. }.simulation-hero-more-link {
  4668. color: #faed7b;
  4669. display: block;
  4670. font-family: "futura-pt", sans-serif;
  4671. font-size: 0.75rem;
  4672. font-weight: bold;
  4673. margin-bottom: 20px;
  4674. text-transform: uppercase;
  4675. }
  4676. .simulation-hero-preorder-btn {
  4677. display: inline-block;
  4678. border-color: #fff;
  4679. color: #fff;
  4680. min-width: 11.0625rem;
  4681. }
  4682. .simulation-platforms-heading {
  4683. clip: auto;
  4684. color: transparent;
  4685. display: block;
  4686. height: 0;
  4687. margin: 0;
  4688. overflow: hidden;
  4689. padding: 0;
  4690. text-indent: 100%;
  4691. white-space: nowrap;
  4692. width: 0;
  4693. }
  4694. .simulation-hero-platforms {
  4695. margin: 1em 0;
  4696. padding: 0 2em;
  4697. }
  4698. @media all and (min-width: 901px) {
  4699. .simulation-hero-platforms {
  4700. margin: 3em auto;
  4701. width: 30em;
  4702. position: relative;
  4703. }
  4704. }.simulation-hero-badge-image {
  4705. display: block;
  4706. margin: 6rem auto 0;
  4707. width: 70px;
  4708. }
  4709. @media all and (min-width: 901px) {
  4710. .simulation-hero-badge-image {
  4711. width: auto;
  4712. margin: 10rem auto 0;
  4713. }
  4714. }.promo-spike-module {
  4715. max-width: 1100px;
  4716. padding: 1rem;
  4717. position: relative;
  4718. }
  4719. @media all and (min-width: 1099px) {
  4720. .promo-spike-module {
  4721. padding: 0;
  4722. margin-bottom: 2rem;
  4723. }
  4724. }.promo-spike:before {
  4725. display: none;
  4726. }
  4727. .promo-spike-feature-image {
  4728. width: 100%}
  4729. .promo-spike-preorder-btn.standard-btn {
  4730. border-color: #fff;
  4731. font-size: 8px;
  4732. padding: 1em;
  4733. position: absolute;
  4734. right: 2em;
  4735. bottom: 50%;
  4736. -moz-transform: translateY(50%);
  4737. -ms-transform: translateY(50%);
  4738. -webkit-transform: translateY(50%);
  4739. transform: translateY(50%);
  4740. }
  4741. @media all and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1099px) {
  4742. .promo-spike-preorder-btn.standard-btn {
  4743. -moz-transform: none;
  4744. -ms-transform: none;
  4745. -webkit-transform: none;
  4746. transform: none;
  4747. bottom: 20%}
  4748. }@media all and (min-width: 321px) {
  4749. .promo-spike-preorder-btn.standard-btn {
  4750. font-size: 10px;
  4751. }
  4752. }@media all and (min-width: 901px) {
  4753. .promo-spike-preorder-btn.standard-btn {
  4754. padding: 1.5em 5em;
  4755. right: 4em;
  4756. }
  4757. }@media all and (min-width: 1099px) {
  4758. .promo-spike-preorder-btn.standard-btn {
  4759. right: 7em;
  4760. }
  4761. }.lead-in-module {
  4762. display: -ms-flexbox;
  4763. -ms-flex-wrap: wrap;
  4764. -ms-flex-direction: column;
  4765. display: -webkit-flex;
  4766. display: flex;
  4767. -webkit-flex-flow: row wrap;
  4768. flex-flow: row wrap;
  4769. max-width: 1100px;
  4770. -webkit-justify-content: space-between;
  4771. justify-content: space-between;
  4772. padding: 2rem 1rem 0;
  4773. }
  4774. @media all and (min-width: 1099px) {
  4775. .lead-in-module {
  4776. padding: 2rem 0 0;
  4777. }
  4778. }.lead-in-copy {
  4779. margin-left: 1.25em;
  4780. padding-left: 1.25em;
  4781. line-height: 1.5em;
  4782. font-size: 15px;
  4783. border-left: 2px solid #333;
  4784. -ms-flex: 1 1 auto;
  4785. -ms-flex-direction: row;
  4786. }
  4787. .lead-in-heading {
  4788. font-size: 1.375rem;
  4789. line-height: 1em;
  4790. letter-spacing: .01em;
  4791. margin-top: 0;
  4792. -ms-flex: 0 1 auto;
  4793. -ms-flex-direction: row;
  4794. }
  4795. @media all and (min-width: 901px) {
  4796. .lead-in-heading {
  4797. font-size: 3rem;
  4798. margin: 0 0 .5em;
  4799. }
  4800. }.lead-in-heading-subtext {
  4801. display: block;
  4802. font-family: "futura-pt-condensed", sans-serif;
  4803. font-weight: 400;
  4804. font-size: 12px;
  4805. }
  4806. @media all and (min-width: 901px) {
  4807. .lead-in-intro {
  4808. display: -ms-flexbox;
  4809. -ms-flex-direction: column;
  4810. -ms-flex: 6;
  4811. text-align: left;
  4812. -webkit-flex: 6;
  4813. flex: 6;
  4814. -webkit-align-self: center;
  4815. align-self: center;
  4816. padding-right: 2rem;
  4817. }
  4818. }.lead-in-aside {
  4819. text-align: center;
  4820. }
  4821. @media all and (min-width: 901px) {
  4822. .lead-in-aside {
  4823. display: -ms-flexbox;
  4824. -ms-flex-direction: row;
  4825. -ms-flex: 3;
  4826. -webkit-flex: 3;
  4827. flex: 3;
  4828. max-width: 100%;
  4829. margin: 0 0 0 1em;
  4830. }
  4831. }.lead-in-aside .lead-in-aside-image {
  4832. width: 100%}
  4833. .lead-in-aside.big-lead-in-aside {
  4834. display: -ms-flexbox;
  4835. -ms-flex-direction: row;
  4836. -ms-flex: 2;
  4837. -webkit-flex: 2;
  4838. flex: 2;
  4839. margin: 0 0.5em;
  4840. }
  4841. .big-lead-in-module-wrapper {
  4842. padding: 1rem 1.0625rem;
  4843. max-width: 1100px;
  4844. margin: auto;
  4845. }
  4846. @media all and (max-width: 901px) {
  4847. .preorder-lead-in-module .big-lead-in-module-wrapper {
  4848. padding: 2rem 0.5rem;
  4849. }
  4850. }.big-lead-in-module {
  4851. padding: 1rem 0;
  4852. }
  4853. .big-lead-in-heading-title {
  4854. display: block;
  4855. font-family: "SouthernAire", serif;
  4856. text-transform: none;
  4857. font-weight: normal;
  4858. line-height: .5em;
  4859. }
  4860. .big-lead-in-pack-art {
  4861. width: 100%}
  4862. .big-lead-in-preorder-btn {
  4863. color: #000;
  4864. display: inline-block;
  4865. margin: 0 auto;
  4866. border-width: 3px;
  4867. }
  4868. @media all and (min-width: 901px) {
  4869. .big-lead-in-preorder-btn {
  4870. display: block;
  4871. font-size: 13px;
  4872. }
  4873. }.big-lead-in-preorder-icon {
  4874. width: 70px;
  4875. height: 52px;
  4876. left: -7em;
  4877. top: -5px;
  4878. -moz-transform: scale(0.7, 0.7);
  4879. -ms-transform: scale(0.7, 0.7);
  4880. -webkit-transform: scale(0.7, 0.7);
  4881. transform: scale(0.7, 0.7);
  4882. }
  4883. @media all and (min-width: 901px) {
  4884. .big-lead-in-preorder-icon {
  4885. visibility: hidden;
  4886. }
  4887. }.big-lead-in-snippet {
  4888. margin: 2em 0;
  4889. }
  4890. .big-lead-in-snippet:before {
  4891. top: -0.8em;
  4892. }
  4893. @media all and (min-width: 901px) {
  4894. .big-lead-in-snippet {
  4895. margin-top: 2em;
  4896. margin-bottom: 1em;
  4897. padding-bottom: 1.1em;
  4898. }
  4899. }.big-lead-in-preorder-platform-logos {
  4900. display: -webkit-flex;
  4901. display: flex;
  4902. -webkit-flex-flow: row wrap;
  4903. flex-flow: row wrap;
  4904. -webkit-justify-content: space-around;
  4905. justify-content: space-around;
  4906. list-style: none;
  4907. margin: 2em 0 0;
  4908. padding: 0;
  4909. vertical-align: middle;
  4910. }
  4911. @media all and (min-width: 901px) {
  4912. .big-lead-in-preorder-platform-logos {
  4913. -webkit-justify-content: space-between;
  4914. justify-content: space-between;
  4915. margin: 1.5em 0 0;
  4916. }
  4917. }.big-lead-in-preorder-platform-logo {
  4918. margin: 0.5em 0.5em 0;
  4919. }
  4920. .big-lead-in-preorder-platform-logo .icon {
  4921. display: inline-block;
  4922. }
  4923. @media all and (min-width: 901px) {
  4924. .big-lead-in-preorder-platform-logo .icon.ps4-icon-black, .big-lead-in-preorder-platform-logo .icon.xbox-one-icon-black {
  4925. width: 80px;
  4926. height: 15px;
  4927. }
  4928. .big-lead-in-preorder-platform-logo .icon.pc-icon-black {
  4929. width: 22px;
  4930. height: 22px;
  4931. }
  4932. }@media all and (min-width: 901px) {
  4933. .big-lead-in-module-wrapper {
  4934. display: -ms-flexbox;
  4935. -ms-flex-flow: row wrap;
  4936. -ms-flex-pack: start;
  4937. -ms-flex-align: start;
  4938. display: -webkit-flex;
  4939. display: flex;
  4940. -webkit-flex-flow: row wrap;
  4941. flex-flow: row wrap;
  4942. -webkit-justify-content: space-around;
  4943. justify-content: space-around;
  4944. width: 100%}
  4945. }.carousel-module {
  4946. background-color: #000;
  4947. background-image: url("../assets/texture-noise@1x.png");
  4948. padding: 2.5rem 1rem 1rem;
  4949. text-align: center;
  4950. width: 100%}
  4951. .carousel-module-wrapper {
  4952. margin: 0 auto;
  4953. max-width: 1100px;
  4954. overflow: hidden;
  4955. position: relative;
  4956. }
  4957. .carousel-heading {
  4958. color: #fff;
  4959. display: inline-block;
  4960. margin: 0 auto 2em;
  4961. position: relative;
  4962. text-align: center;
  4963. width: auto;
  4964. min-width: 150px;
  4965. }
  4966. @media all and (min-width: 901px) {
  4967. .carousel-heading {
  4968. margin-bottom: 3em;
  4969. }
  4970. }.carousel-panels-wrapper {
  4971. position: relative;
  4972. margin: 0 auto;
  4973. width: 100%}
  4974. .carousel-panels {
  4975. -moz-transition: -moz-transform 0.6s ease-in-out;
  4976. -o-transition: -o-transform 0.6s ease-in-out;
  4977. -webkit-transition: -webkit-transform 0.6s ease-in-out;
  4978. transition: transform 0.6s ease-in-out;
  4979. width: 9999px;
  4980. }
  4981. .carousel-panels:after {
  4982. clear: both;
  4983. content: '';
  4984. display: block;
  4985. }
  4986. .carousel-panel {
  4987. max-width: 1100px;
  4988. float: left;
  4989. opacity: 0;
  4990. max-height: 1px;
  4991. -moz-transition: opacity 1.4s ease, max-height 3s ease;
  4992. -o-transition: opacity 1.4s ease, max-height 3s ease;
  4993. -webkit-transition: opacity 1.4s ease, max-height 3s ease;
  4994. transition: opacity 1.4s ease, max-height 3s ease;
  4995. }
  4996. .carousel-panel-active {
  4997. max-height: initial;
  4998. opacity: 1;
  4999. }
  5000. .carousel-panel-heading, .carousel-panel-description {
  5001. color: #fff;
  5002. }
  5003. .carousel-panel-heading {
  5004. margin: 1.5em 0 0;
  5005. }
  5006. .carousel-panel-description {
  5007. max-width: 570px;
  5008. margin: 0.5em auto 0;
  5009. }
  5010. .carousel-panel-image-wrapper {
  5011. overflow: hidden;
  5012. height: 280px;
  5013. width: 100%;
  5014. position: relative;
  5015. }
  5016. .carousel-panel-image {
  5017. width: auto;
  5018. max-width: 100%;
  5019. height: auto;
  5020. }
  5021. @media all and (min-width: 901px) {
  5022. .carousel-panel-image {
  5023. max-width: 880px;
  5024. min-height: 328px;
  5025. padding: 0 60px;
  5026. }
  5027. }.carousel-arrow {
  5028. background-image: url("/assets/icons/carousel-arrow.svg");
  5029. background-repeat: no-repeat;
  5030. display: none;
  5031. color: #fff;
  5032. cursor: pointer;
  5033. height: 42px;
  5034. position: absolute;
  5035. text-indent: -9999px;
  5036. opacity: 1;
  5037. top: 240px;
  5038. width: 30px;
  5039. -moz-transition: opacity 0.6s ease;
  5040. -o-transition: opacity 0.6s ease;
  5041. -webkit-transition: opacity 0.6s ease;
  5042. transition: opacity 0.6s ease;
  5043. }
  5044. @media all and (min-width: 901px) {
  5045. .carousel-arrow {
  5046. display: block;
  5047. }
  5048. .carousel-arrow:hover {
  5049. opacity: 0.8;
  5050. }
  5051. }.carousel-arrow-left {
  5052. left: 50px;
  5053. }
  5054. .carousel-arrow-right {
  5055. right: 50px;
  5056. -moz-transform: rotate(180deg);
  5057. -ms-transform: rotate(180deg);
  5058. -webkit-transform: rotate(180deg);
  5059. transform: rotate(180deg);
  5060. }
  5061. .carousel-arrow-disabled {
  5062. opacity: 0.2;
  5063. cursor: default;
  5064. }
  5065. .carousel-nav {
  5066. margin: 0;
  5067. padding: 1.5em 0 1em;
  5068. position: relative;
  5069. text-align: center;
  5070. }
  5071. @media all and (min-width: 901px) {
  5072. .carousel-nav {
  5073. padding-top: 2em;
  5074. padding-bottom: 2em;
  5075. }
  5076. }.carousel-nav-item {
  5077. cursor: pointer;
  5078. display: inline-block;
  5079. padding: 5px;
  5080. vertical-align: middle;
  5081. }
  5082. .carousel-nav-item:before {
  5083. border-radius: 50%;
  5084. border: 1px solid #fff;
  5085. content: '';
  5086. display: block;
  5087. height: 6px;
  5088. width: 6px;
  5089. }
  5090. .carousel-nav-item-active:before {
  5091. background-color: #fff;
  5092. height: 10px;
  5093. width: 10px;
  5094. }
  5095. .more-simulations-module {
  5096. display: -webkit-flex;
  5097. display: flex;
  5098. -webkit-flex-flow: row wrap;
  5099. flex-flow: row wrap;
  5100. max-width: 1100px;
  5101. -webkit-justify-content: space-between;
  5102. justify-content: space-between;
  5103. }
  5104. @media all and (max-width: 1099px) {
  5105. .more-simulations-module {
  5106. padding: 1rem;
  5107. }
  5108. }@media all and (min-width: 901px) {
  5109. .more-simulations-module {
  5110. margin-bottom: 2em;
  5111. }
  5112. }.more-simulations-feature {
  5113. position: relative;
  5114. width: 100%;
  5115. text-align: center;
  5116. }
  5117. @media all and (max-width: 901px) {
  5118. .more-simulations-feature: first-of-type {
  5119. border-bottom: 2px solid #000;
  5120. padding-bottom: 2em;
  5121. margin-bottom: 1em;
  5122. }
  5123. }@media all and (min-width: 901px) {
  5124. .more-simulations-feature {
  5125. text-align: right;
  5126. width: 45%}
  5127. .more-simulations-feature:first-of-type::after {
  5128. background: #000 url("../assets/texture-noise@1x.png");
  5129. height: 90%;
  5130. width: 3px;
  5131. content: '';
  5132. display: block;
  5133. position: absolute;
  5134. bottom: 2.5em;
  5135. right: -1em;
  5136. }
  5137. }.more-simulations-feature-image {
  5138. max-width: 100%}
  5139. @media all and (min-width: 901px) {
  5140. .more-simulations-feature-image {
  5141. max-width: none;
  5142. max-height: 360px;
  5143. }
  5144. }.more-simulations-copy-wrapper {
  5145. text-align: left;
  5146. top: -1em;
  5147. position: relative;
  5148. }
  5149. @media all and (min-width: 901px) {
  5150. .more-simulations-copy-wrapper {
  5151. top: -2em;
  5152. }
  5153. }.more-simulations-copy-text {
  5154. width: 100%}
  5155. @media all and (min-width: 901px) {
  5156. .more-simulations-copy-text {
  5157. width: 85%}
  5158. }.more-simulations-feature-heading {
  5159. font-size: 2.25rem;
  5160. letter-spacing: normal;
  5161. line-height: 2.5625rem;
  5162. margin: 0;
  5163. }
  5164. @media all and (min-width: 901px) {
  5165. .more-simulations-feature-heading {
  5166. font-size: 2.5625rem;
  5167. }
  5168. }.more-simulations-feature-series-title {
  5169. font-family: "SouthernAire", serif;
  5170. font-size: 1em;
  5171. font-weight: normal;
  5172. line-height: 0.45em;
  5173. letter-spacing: normal;
  5174. text-transform: none;
  5175. display: block;
  5176. }
  5177. .more-simulations-buttons {
  5178. display: -webkit-flex;
  5179. display: flex;
  5180. -webkit-flex-flow: row wrap;
  5181. flex-flow: row wrap;
  5182. -webkit-justify-content: flex-start;
  5183. justify-content: flex-start;
  5184. }
  5185. @media all and (min-width: 901px) {
  5186. .more-simulations-buttons {
  5187. width: 70%}
  5188. }.more-simulations-btn {
  5189. display: block;
  5190. width: 49%;
  5191. max-width: 15em;
  5192. position: relative;
  5193. }
  5194. .more-simulations-btn:first-of-type {
  5195. margin-right: .5em;
  5196. }
  5197. @media all and (min-width: 901px) {
  5198. .more-simulations-btn {
  5199. width: 43%;
  5200. margin: 0 1rem 0 0;
  5201. }
  5202. }.app-footer {
  5203. display: -webkit-flex;
  5204. display: flex;
  5205. -webkit-flex-flow: column wrap;
  5206. flex-flow: column wrap;
  5207. display: none;
  5208. background: #ecebe8 url("../assets/texture-noise@1x.png") repeat;
  5209. }
  5210. @media all and (min-width: 901px) {
  5211. .app-footer {
  5212. padding: 0;
  5213. }
  5214. }.app-footer.app-footer-active {
  5215. display: block;
  5216. }
  5217. .app-footer-header {
  5218. display: -ms-flexbox;
  5219. -ms-flex-flow: row wrap;
  5220. -ms-flex-pack: start;
  5221. -ms-flex-align: center;
  5222. display: -webkit-flex;
  5223. display: flex;
  5224. -webkit-flex-flow: row wrap;
  5225. flex-flow: row wrap;
  5226. -webkit-justify-content: space-around;
  5227. justify-content: space-around;
  5228. max-width: 1100px;
  5229. text-align: center;
  5230. font-size: 0.875rem;
  5231. font-family: "futura-pt-condensed", sans-serif;
  5232. font-weight: 400;
  5233. text-transform: uppercase;
  5234. padding: 1rem;
  5235. -webkit-flex: 4;
  5236. flex: 4;
  5237. width: 100%;
  5238. box-sizing: border-box;
  5239. }
  5240. @media all and (min-width: 901px) {
  5241. .app-footer-header {
  5242. margin: 1.5625rem auto 0.5rem;
  5243. }
  5244. }@media all and (min-width: 1099px) {
  5245. .app-footer-header {
  5246. padding: 0;
  5247. }
  5248. }.app-footer-header .vt-icon {
  5249. display: block;
  5250. margin: 0 2em;
  5251. }
  5252. @media all and (max-width: 420px) {
  5253. .app-footer-header .vt-icon {
  5254. -moz-transform: scale(0.75, 0.75);
  5255. -ms-transform: scale(0.75, 0.75);
  5256. -webkit-transform: scale(0.75, 0.75);
  5257. transform: scale(0.75, 0.75);
  5258. }
  5259. }.app-footer-header:before, .app-footer-header:after {
  5260. border: 0;
  5261. border-bottom: 3px solid #000;
  5262. width: 100%;
  5263. position: relative;
  5264. padding: 0;
  5265. margin: auto;
  5266. display: -ms-flexbox;
  5267. -ms-flex: 4;
  5268. -webkit-flex: 4;
  5269. flex: 4;
  5270. content: ''}
  5271. .app-footer-list-wrapper {
  5272. box-sizing: border-box;
  5273. margin: -0.5em auto auto;
  5274. list-style: none;
  5275. display: -ms-flexbox;
  5276. -ms-flex-direction: row;
  5277. -ms-flex-wrap: nowrap;
  5278. -ms-flex-pack: justify;
  5279. -ms-flex-align: start;
  5280. -webkit-justify-content: space-between;
  5281. justify-content: space-between;
  5282. display: -webkit-flex;
  5283. display: flex;
  5284. -webkit-flex-flow: column wrap;
  5285. flex-flow: column wrap;
  5286. max-width: 1100px;
  5287. padding: 0 1em;
  5288. width: 100%;
  5289. -webkit-align-items: flex-start;
  5290. align-items: flex-start;
  5291. }
  5292. @media all and (min-width: 901px) {
  5293. .app-footer-list-wrapper {
  5294. -webkit-flex-direction: row;
  5295. flex-direction: row;
  5296. margin: 0 auto;
  5297. }
  5298. }@media all and (min-width: 1099px) {
  5299. .app-footer-list-wrapper {
  5300. padding: 0 0 1em;
  5301. }
  5302. }.app-footer-list {
  5303. font-family: "futura-pt", sans-serif;
  5304. list-style: none;
  5305. text-transform: uppercase;
  5306. line-height: 1.3em;
  5307. border-bottom: 2px solid #000;
  5308. width: 100%;
  5309. padding: 0;
  5310. text-align: center;
  5311. }
  5312. .app-footer-list:first-of-type {
  5313. margin-top: -.5em;
  5314. }
  5315. .app-footer-list:nth-last-of-type(2) {
  5316. border-bottom-width: 3px;
  5317. }
  5318. .app-footer-list:last-of-type {
  5319. border: none;
  5320. }
  5321. @media all and (min-width: 901px) {
  5322. .app-footer-list {
  5323. border: none;
  5324. width: auto;
  5325. padding: 0.4rem;
  5326. text-align: left;
  5327. display: -ms-flexbox;
  5328. -ms-flex-item-align: baseline;
  5329. -ms-flex: 1;
  5330. -webkit-flex: 1;
  5331. flex: 1;
  5332. }
  5333. .app-footer-list:first-of-type {
  5334. margin-top: 0;
  5335. }
  5336. }@media all and (min-width: 901px) {
  5337. .app-footer-list-goods, .app-footer-list-social, .app-footer-list-other {
  5338. display: block;
  5339. }
  5340. }.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 {
  5341. font-weight: bold;
  5342. }
  5343. .app-footer-list-other .app-footer-split-list {
  5344. display: block;
  5345. margin-top: .75em;
  5346. }
  5347. @media all and (min-width: 901px) {
  5348. .app-footer-list-other .app-footer-split-list {
  5349. margin-top: 0;
  5350. }
  5351. }.app-footer-list-other .app-footer-list-item {
  5352. display: inline;
  5353. position: relative;
  5354. font-size: .5rem;
  5355. padding-left: 1.25em;
  5356. }
  5357. @media all and (max-width: 420px) {
  5358. .app-footer-list-other .app-footer-list-item {
  5359. padding-left: .75em;
  5360. }
  5361. }@media all and (min-width: 901px) {
  5362. .app-footer-list-other .app-footer-list-item {
  5363. display: block;
  5364. padding: 0;
  5365. font-size: 0.75rem;
  5366. }
  5367. }.app-footer-list-other .app-footer-list-item:before {
  5368. position: relative;
  5369. content: '';
  5370. display: inline-block;
  5371. height: .3em;
  5372. width: .3em;
  5373. background: #000;
  5374. border-radius: 100%;
  5375. left: -.4em;
  5376. top: -.25em;
  5377. }
  5378. @media all and (min-width: 420px) {
  5379. .app-footer-list-other .app-footer-list-item: before {
  5380. left: -.65em;
  5381. }
  5382. }@media all and (min-width: 901px) {
  5383. .app-footer-list-other .app-footer-list-item: before {
  5384. visibility: hidden;
  5385. display: none;
  5386. }
  5387. }.app-footer-list-item:first-of-type:before {
  5388. display: none;
  5389. }
  5390. .app-footer-list-social {
  5391. border: none;
  5392. }
  5393. .app-footer-list-social .app-footer-list-subhead:first-child {
  5394. display: none;
  5395. }
  5396. .app-footer-list-support.app-footer-list {
  5397. display: block;
  5398. }
  5399. @media all and (min-width: 901px) {
  5400. .app-footer-list-support.app-footer-list {
  5401. display: none;
  5402. }
  5403. }.app-footer-split-list {
  5404. display: -ms-flexbox;
  5405. -ms-flex-flow: row wrap;
  5406. -ms-flex-pack: start;
  5407. -ms-flex-align: center;
  5408. align-content: flex-start;
  5409. -webkit-flex-flow: column;
  5410. flex-flow: column;
  5411. justify-content: space-around;
  5412. line-height: 1.375rem;
  5413. list-style: none;
  5414. margin: 0;
  5415. padding: 0;
  5416. display: none;
  5417. }
  5418. @media all and (min-width: 901px) {
  5419. .app-footer-split-list {
  5420. display: -ms-flexbox;
  5421. display: -webkit-inline-flex;
  5422. display: inline-flex;
  5423. justify-content: flex-start;
  5424. }
  5425. }.app-footer-list-subhead, .app-footer-list-item {
  5426. width: 100%;
  5427. font-size: 0.75rem;
  5428. }
  5429. .app-footer-list-subhead, .app-footer-list-subhead-link {
  5430. color: #000;
  5431. font-family: "futura-pt", sans-serif;
  5432. font-size: 0.75rem;
  5433. font-weight: bold;
  5434. text-transform: uppercase;
  5435. text-decoration: none;
  5436. }
  5437. .app-footer-list-subhead-link {
  5438. box-sizing: border-box;
  5439. display: block;
  5440. padding: 1em;
  5441. width: 100%}
  5442. @media all and (min-width: 901px) {
  5443. .app-footer-list-subhead-link {
  5444. padding: 0;
  5445. display: inline;
  5446. position: relative;
  5447. }
  5448. .app-footer-list-subhead-link:after {
  5449. content: ' ';
  5450. display: block;
  5451. margin-top: 0.25rem;
  5452. height: 2px;
  5453. width: 0;
  5454. -moz-transition: width 300ms ease-in, background-color 300ms ease-in;
  5455. -o-transition: width 300ms ease-in, background-color 300ms ease-in;
  5456. -webkit-transition: width 300ms ease-in, background-color 300ms ease-in;
  5457. transition: width 300ms ease-in, background-color 300ms ease-in;
  5458. }
  5459. .app-footer-list-subhead-link:hover:after {
  5460. background-color: #000;
  5461. width: 100%}
  5462. .app-footer-list-subhead-link:after {
  5463. position: absolute;
  5464. bottom: -2px;
  5465. left: 0;
  5466. }
  5467. }.app-footer-list-item.app-footer-list-subhead {
  5468. height: 1.375rem;
  5469. }
  5470. .app-footer-list-item-link {
  5471. font-family: "futura-pt", sans-serif;
  5472. text-decoration: none;
  5473. color: inherit;
  5474. position: relative;
  5475. }
  5476. @media all and (min-width: 901px) {
  5477. .app-footer-list-item-link: after {
  5478. content: ' ';
  5479. display: block;
  5480. margin-top: 0.25rem;
  5481. height: 2px;
  5482. width: 0;
  5483. -moz-transition: width 300ms ease-in, background-color 300ms ease-in;
  5484. -o-transition: width 300ms ease-in, background-color 300ms ease-in;
  5485. -webkit-transition: width 300ms ease-in, background-color 300ms ease-in;
  5486. transition: width 300ms ease-in, background-color 300ms ease-in;
  5487. }
  5488. .app-footer-list-item-link:hover:after {
  5489. background-color: #000;
  5490. width: 100%}
  5491. .app-footer-list-item-link:after {
  5492. position: absolute;
  5493. bottom: -2px;
  5494. left: 0;
  5495. }
  5496. }.app-footer-copyright {
  5497. box-sizing: border-box;
  5498. margin: 0 auto;
  5499. list-style: none;
  5500. max-width: 1100px;
  5501. display: -ms-flexbox;
  5502. -ms-flex-flow: row wrap;
  5503. -ms-flex-pack: start;
  5504. -ms-flex-align: center;
  5505. display: -webkit-flex;
  5506. display: flex;
  5507. -webkit-flex-flow: row wrap;
  5508. flex-flow: row wrap;
  5509. -webkit-justify-content: space-around;
  5510. justify-content: space-around;
  5511. text-transform: uppercase;
  5512. padding: 1em;
  5513. -webkit-align-items: center;
  5514. align-items: center;
  5515. width: 100%}
  5516. @media all and (min-width: 1099px) {
  5517. .app-footer-copyright {
  5518. padding: 0;
  5519. }
  5520. }.app-footer-copyright:before, .app-footer-copyright:after {
  5521. border: 0;
  5522. border-bottom: 3px solid #000;
  5523. width: 100%;
  5524. border-style: dotted;
  5525. border-bottom-width: 2px;
  5526. position: relative;
  5527. content: '';
  5528. display: block;
  5529. }
  5530. @media all and (min-width: 901px) {
  5531. .app-footer-copyright: before, .app-footer-copyright:after {
  5532. border-style: solid;
  5533. border-bottom-width: 3px;
  5534. }
  5535. }.app-footer-copyright-item {
  5536. display: -ms-flexbox;
  5537. -ms-flex-flow: row wrap;
  5538. -ms-flex-pack: start;
  5539. -ms-flex-align: center;
  5540. -ms-flex: 3;
  5541. -webkit-flex: 3 100%;
  5542. flex: 3 100%;
  5543. padding: .5em 0 0;
  5544. display: -webkit-flex;
  5545. display: flex;
  5546. -webkit-align-items: center;
  5547. align-items: center;
  5548. }
  5549. .app-footer-copyright-item:first-of-type {
  5550. margin: .5em 0;
  5551. }
  5552. @media all and (min-width: 901px) {
  5553. .app-footer-copyright-item {
  5554. margin: .25em 0;
  5555. padding: .5em;
  5556. display: -ms-flexbox;
  5557. -ms-flex: 1;
  5558. -webkit-flex: 1;
  5559. flex: 1;
  5560. }
  5561. .app-footer-copyright-item:first-of-type {
  5562. margin: 0;
  5563. }
  5564. .app-footer-copyright-item:last-of-type {
  5565. padding: 0 0 0 1.5em;
  5566. border-left: 2px dotted #000;
  5567. display: -ms-flexbox;
  5568. -ms-flex: 4;
  5569. -webkit-flex: 4;
  5570. flex: 4;
  5571. }
  5572. }.app-footer-copyright-icon {
  5573. display: inline-block;
  5574. }
  5575. .app-footer-copyright-icon.icon.esrb-privacy-icon-large {
  5576. width: 107px;
  5577. height: 40px;
  5578. margin: 0 .5em 0 0;
  5579. background-size: 100%}
  5580. @media all and (min-width: 901px) {
  5581. .app-footer-copyright-icon.icon.esrb-privacy-icon-large {
  5582. width: 160px;
  5583. height: 60px;
  5584. margin: 0 1em 0 0;
  5585. }
  5586. }.app-footer-copyright-icon.icon.esrb-rating-icon-large {
  5587. width: 80px;
  5588. height: 40px;
  5589. margin: 0 .5em 0 0;
  5590. background-size: 100%}
  5591. @media all and (min-width: 901px) {
  5592. .app-footer-copyright-icon.icon.esrb-rating-icon-large {
  5593. width: 120px;
  5594. height: 60px;
  5595. margin: 0 1em 0 0;
  5596. }
  5597. }.app-footer-copyright-icon.icon.beth-soft-icon {
  5598. width: 110px;
  5599. height: 1.0625rem;
  5600. margin: 0 .5em 0 0;
  5601. }
  5602. .app-footer-copyright-icon.icon.beth-studios-icon {
  5603. width: 74px;
  5604. height: 35px;
  5605. margin: 0 1em 0 0;
  5606. }
  5607. .app-footer-copyright-text {
  5608. font-family: "futura-pt", sans-serif;
  5609. font-size: 0.625rem;
  5610. padding: 0;
  5611. -ms-flex-direction: row;
  5612. -ms-flex: 0 1 auto;
  5613. }
  5614. @media all and (min-width: 901px) {
  5615. .app-footer-copyright-text {
  5616. line-height: 1em;
  5617. padding: 0;
  5618. margin: .9em 0;
  5619. font-weight: 600;
  5620. }
  5621. }.app-footer-copyright-logos {
  5622. display: -ms-flexbox;
  5623. -ms-flex-flow: row wrap;
  5624. -ms-flex-pack: start;
  5625. -ms-flex-align: center;
  5626. -ms-flex-direction: row;
  5627. display: -webkit-flex;
  5628. display: flex;
  5629. -webkit-flex-flow: row wrap;
  5630. flex-flow: row wrap;
  5631. -webkit-justify-content: initial;
  5632. justify-content: initial;
  5633. box-sizing: border-box;
  5634. list-style: none;
  5635. margin: 0 auto 1em;
  5636. max-width: 1100px;
  5637. padding: 1rem;
  5638. vertical-align: middle;
  5639. width: 100%}
  5640. @media all and (min-width: 901px) {
  5641. .app-footer-copyright-logos {
  5642. margin-top: 1.5em;
  5643. margin-bottom: 2em;
  5644. }
  5645. }@media all and (min-width: 1099px) {
  5646. .app-footer-copyright-logos {
  5647. padding: 0;
  5648. }
  5649. }.app-footer-copyright-logo {
  5650. display: -ms-inline-flexbox;
  5651. -ms-flex: 0 1 auto;
  5652. -ms-flex-align: center;
  5653. display: -webkit-inline-flex;
  5654. display: inline-flex;
  5655. }
  5656. .app-footer-copyright-logo:first-of-type {
  5657. -ms-flex: 47%;
  5658. -webkit-flex: 1 47%;
  5659. flex: 1 47%;
  5660. margin-bottom: 1.5em;
  5661. max-width: 150px;
  5662. margin-left: .25em;
  5663. margin-right: .25em;
  5664. }
  5665. @media all and (min-width: 480px) {
  5666. .app-footer-copyright-logo: first-of-type {
  5667. margin-bottom: 0;
  5668. }
  5669. }.app-footer-copyright-logo:nth-of-type(2) {
  5670. -webkit-justify-content: flex-start;
  5671. justify-content: flex-start;
  5672. margin-bottom: 1.5em;
  5673. }
  5674. @media all and (max-width: 480px) {
  5675. .app-footer-copyright-logo: nth-of-type(2) {
  5676. -webkit-flex: 1 45%;
  5677. flex: 1 45%}
  5678. }@media all and (min-width: 480px) {
  5679. .app-footer-copyright-logo: nth-of-type(2) {
  5680. margin-bottom: 0;
  5681. }
  5682. }.app-footer-copyright-logo .rating-2-icon {
  5683. padding-bottom: 1.5em;
  5684. }
  5685. @media all and (max-width: 480px) {
  5686. .app-footer-copyright-logo .rating-2-icon {
  5687. -webkit-flex: none;
  5688. flex: none;
  5689. }
  5690. }@media all and (min-width: 480px) {
  5691. .app-footer-copyright-logo .rating-2-icon {
  5692. padding: 0;
  5693. }
  5694. }.app-footer-copyright-logo .icon {
  5695. display: inline-block;
  5696. margin: 0 .25em;
  5697. -ms-flex-pack: center;
  5698. -ms-flex-align: center;
  5699. -webkit-align-self: center;
  5700. align-self: center;
  5701. }
  5702. .app-footer-copyright-logo .rating-icon {
  5703. max-height: 46px;
  5704. background-size: contain;
  5705. }
  5706. @media all and (min-width: 768px) {
  5707. .app-footer-copyright-logo: first-of-type, .app-footer-copyright-logo:nth-of-type(2) {
  5708. margin: 0;
  5709. }
  5710. }@media all and (min-width: 901px) {
  5711. .app-footer-copyright-logo {
  5712. margin: 0 .5em;
  5713. -ms-flex: 0 1 auto;
  5714. -webkit-flex: initial;
  5715. flex: initial;
  5716. max-width: none;
  5717. }
  5718. .app-footer-copyright-logo:first-of-type, .app-footer-copyright-logo:nth-of-type(2) {
  5719. -ms-flex: 0 1 auto;
  5720. -webkit-flex: initial;
  5721. flex: initial;
  5722. }
  5723. .app-footer-copyright-logo .rating-icon {
  5724. background-position: 50%}
  5725. }.app-footer-locale-de-de .app-footer-copyright-logo:nth-of-type(2) {
  5726. flex: none;
  5727. }
  5728. .vt-footer {
  5729. display: -ms-flexbox;
  5730. -ms-flex-flow: row wrap;
  5731. -ms-flex-pack: center;
  5732. -ms-flex-align: center;
  5733. display: -webkit-flex;
  5734. display: flex;
  5735. -webkit-flex-flow: row wrap;
  5736. flex-flow: row wrap;
  5737. -webkit-justify-content: space-around;
  5738. justify-content: space-around;
  5739. background: #000 url("../assets/texture-noise@1x.png");
  5740. box-sizing: border-box;
  5741. color: #fff;
  5742. padding: 1rem;
  5743. padding-bottom: 2rem;
  5744. width: 100%}
  5745. @media all and (min-width: 901px) {
  5746. .vt-footer {
  5747. padding-bottom: 10.9375rem;
  5748. padding-top: 1.875rem;
  5749. }
  5750. }.vt-footer-copy {
  5751. font-family: "schoolbook-web", serif;
  5752. color: #fff;
  5753. font-size: 0.75rem;
  5754. line-height: 1.25rem;
  5755. text-align: justify;
  5756. padding: 0;
  5757. position: relative;
  5758. width: 100%;
  5759. max-width: 1100px;
  5760. }
  5761. .vt-footer-heading {
  5762. font-family: "futura-pt", sans-serif;
  5763. font-size: 0.625rem;
  5764. font-weight: bold;
  5765. letter-spacing: 0.1875rem;
  5766. text-transform: uppercase;
  5767. }
  5768. @media all and (max-width: 420px) {
  5769. .vt-footer-heading {
  5770. font-size: 8px;
  5771. }
  5772. .vt-footer-heading:first-child {
  5773. border-right: 1px solid #fff;
  5774. padding-right: 1rem;
  5775. }
  5776. }.vt-wrap {
  5777. display: -ms-flexbox;
  5778. -ms-flex-flow: row wrap;
  5779. -ms-flex-pack: start;
  5780. -ms-flex-align: center;
  5781. display: -webkit-flex;
  5782. display: flex;
  5783. -webkit-flex-flow: row wrap;
  5784. flex-flow: row wrap;
  5785. -webkit-justify-content: initial;
  5786. justify-content: initial;
  5787. max-width: 1100px;
  5788. list-style: none;
  5789. margin: 0;
  5790. padding: 0 0 .75em;
  5791. width: 100%;
  5792. border-bottom: 3px solid #fff;
  5793. }
  5794. .app-footer-locale-en-us .vt-item:last-child {
  5795. display: block;
  5796. }
  5797. .vt-item {
  5798. margin-right: 1rem;
  5799. -webkit-align-self: center;
  5800. align-self: center;
  5801. }
  5802. .vt-item:last-child {
  5803. display: none;
  5804. margin-right: 0;
  5805. border-left: 1px solid #fff;
  5806. padding-left: 2em;
  5807. }
  5808. .vt-item .icon {
  5809. -moz-transform: scale(0.8, 0.8);
  5810. -ms-transform: scale(0.8, 0.8);
  5811. -webkit-transform: scale(0.8, 0.8);
  5812. transform: scale(0.8, 0.8);
  5813. }
  5814. .vt-item .vt-footer-heading-tel {
  5815. color: #fff;
  5816. text-decoration: none;
  5817. }
  5818. @media all and (max-width: 420px) {
  5819. .vt-item {
  5820. margin-right: 0;
  5821. }
  5822. .vt-item:nth-of-type(2) {
  5823. margin-right: 1.5em;
  5824. }
  5825. }.special-module {
  5826. position: relative;
  5827. }
  5828. @media all and (min-width: 901px) {
  5829. .special-module {
  5830. padding-left: 0;
  5831. padding-right: 0;
  5832. padding-top: 4rem;
  5833. }
  5834. }.special-module-wrapper {
  5835. margin: 0 auto;
  5836. max-width: 1100px;
  5837. padding: 0 1rem;
  5838. }
  5839. .special-module-asset-container {
  5840. position: relative;
  5841. }
  5842. .special-module-text {
  5843. display: block;
  5844. margin: 0 auto;
  5845. position: relative;
  5846. width: 100%;
  5847. max-width: 370px;
  5848. }
  5849. .special-video-wrapper {
  5850. background-image: url("/assets/special/special-module-projector-bg-desktop.png");
  5851. border-bottom: 5px solid #000;
  5852. position: relative;
  5853. }
  5854. .special-video-wrapper-top {
  5855. width: 83%;
  5856. margin-top: 14%;
  5857. margin-left: 9%;
  5858. box-sizing: border-box;
  5859. position: absolute;
  5860. vertical-align: middle;
  5861. top: 0;
  5862. }
  5863. .special-video-wrapper-middle {
  5864. width: 100%;
  5865. padding-bottom: 75%}
  5866. .fallout-3-special-module .special-video-wrapper {
  5867. background-image: url("/assets/special/special-module-tv-bg-desktop.png");
  5868. }
  5869. .fallout-3-special-module .special-video-wrapper-top {
  5870. width: 72%}
  5871. .special-module-play-btn {
  5872. position: absolute;
  5873. right: 50%;
  5874. top: 50%;
  5875. margin-top: -40px;
  5876. margin-right: -40px;
  5877. transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
  5878. opacity: 0;
  5879. visibility: hidden;
  5880. z-index: 1;
  5881. }
  5882. .special-module-has-video .special-module-play-btn {
  5883. opacity: 1;
  5884. visibility: visible;
  5885. }
  5886. .special-video-player-active .special-module-play-btn {
  5887. opacity: 0;
  5888. visibility: hidden;
  5889. }
  5890. .special-cover-image {
  5891. height: auto;
  5892. left: 0;
  5893. opacity: 0;
  5894. position: absolute;
  5895. top: 0;
  5896. transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
  5897. visibility: hidden;
  5898. width: 100%}
  5899. .special-cover-image.special-cover-image-active {
  5900. opacity: 1;
  5901. visibility: visible;
  5902. }
  5903. .special-video-player-active .special-cover-image {
  5904. opacity: 0;
  5905. visibility: hidden;
  5906. }
  5907. .special-video-player {
  5908. display: block;
  5909. width: 100%;
  5910. height: 100%;
  5911. position: absolute;
  5912. left: 0;
  5913. top: 0;
  5914. background: #ebeae5;
  5915. }
  5916. .special-video-player iframe {
  5917. display: block;
  5918. width: 100%;
  5919. height: 100%;
  5920. position: absolute;
  5921. left: 0;
  5922. top: 0;
  5923. }
  5924. .special-video-player-active iframe {
  5925. z-index: 3;
  5926. }
  5927. .special-link-wrap {
  5928. position: relative;
  5929. -webkit-flex: 2;
  5930. flex: 2;
  5931. padding: 2em;
  5932. }
  5933. .special-links {
  5934. font-family: "futura-pt-condensed", sans-serif;
  5935. font-weight: 400;
  5936. text-transform: uppercase;
  5937. font-size: 20px;
  5938. margin: 0 auto;
  5939. max-width: 333px;
  5940. padding: 0;
  5941. text-align: center;
  5942. }
  5943. @media all and (min-width: 901px) {
  5944. .special-links {
  5945. font-size: 22px;
  5946. max-width: 250px;
  5947. }
  5948. }.special-link {
  5949. display: inline-block;
  5950. list-style: none;
  5951. margin: .1rem 0;
  5952. padding: .3rem 2rem .3rem 1rem;
  5953. position: relative;
  5954. text-align: left;
  5955. width: 80%;
  5956. -moz-transition: width, 0.5s;
  5957. -o-transition: width, 0.5s;
  5958. -webkit-transition: width, 0.5s;
  5959. transition: width, 0.5s;
  5960. }
  5961. @media all and (min-width: 901px) {
  5962. .special-link {
  5963. width: 60%}
  5964. }.special-link::after {
  5965. content: '';
  5966. display: block;
  5967. position: absolute;
  5968. width: 0;
  5969. top: 0;
  5970. left: 0;
  5971. -moz-transition: width, 0.5s;
  5972. -o-transition: width, 0.5s;
  5973. -webkit-transition: width, 0.5s;
  5974. transition: width, 0.5s;
  5975. }
  5976. .special-link::before {
  5977. content: '';
  5978. display: block;
  5979. position: absolute;
  5980. height: 0%;
  5981. width: 0;
  5982. right: 110%;
  5983. -moz-transition: all, 0.6s;
  5984. -o-transition: all, 0.6s;
  5985. -webkit-transition: all, 0.6s;
  5986. transition: all, 0.6s;
  5987. }
  5988. .special-link:hover, .special-active-link {
  5989. color: #fff;
  5990. cursor: pointer;
  5991. }
  5992. .special-link:hover span, .special-active-link span {
  5993. position: relative;
  5994. z-index: 2;
  5995. }
  5996. .special-link:hover .hilite, .special-active-link .hilite {
  5997. color: #faed7b;
  5998. padding: 0;
  5999. }
  6000. .special-link:hover::before, .special-active-link::before {
  6001. border-top: .9em solid transparent;
  6002. border-bottom: .9em solid transparent;
  6003. border-left: 0.5em solid #000;
  6004. right: -.5em;
  6005. top: 0;
  6006. }
  6007. .special-link:hover::after, .special-active-link::after {
  6008. width: 100%;
  6009. height: 100%;
  6010. background: #000 url("../assets/texture-noise@1x.png");
  6011. }
  6012. .special-link:hover .special-link-highlighted-text, .special-active-link .special-link-highlighted-text {
  6013. -moz-transition: all, 0.6s;
  6014. -o-transition: all, 0.6s;
  6015. -webkit-transition: all, 0.6s;
  6016. transition: all, 0.6s;
  6017. color: #faed7b;
  6018. }
  6019. @media all and (min-width: 901px) {
  6020. .special-module-asset-container {
  6021. display: -webkit-flex;
  6022. display: flex;
  6023. -webkit-flex-flow: row wrap;
  6024. flex-flow: row wrap;
  6025. position: relative;
  6026. -webkit-justify-content: flex-start;
  6027. justify-content: flex-start;
  6028. height: 37.5rem;
  6029. }
  6030. .special-module-text {
  6031. -webkit-order: 1;
  6032. order: 1;
  6033. height: 155px;
  6034. width: 331px;
  6035. margin-top: 4.5em;
  6036. }
  6037. .special-video-wrapper {
  6038. -webkit-flex: 1 40%;
  6039. flex: 1 40%;
  6040. -webkit-order: 2;
  6041. order: 2;
  6042. margin-left: 2.5rem;
  6043. border: 0;
  6044. }
  6045. .special-link-wrap {
  6046. position: absolute;
  6047. top: 14em;
  6048. }
  6049. }.special-module-asset-video-modal {
  6050. text-align: center;
  6051. -moz-transform-style: preserve-3d;
  6052. -webkit-transform-style: preserve-3d;
  6053. transform-style: preserve-3d;
  6054. }
  6055. .special-module-asset-video-modal div {
  6056. height: 100%;
  6057. width: 100%}
  6058. .special-module-asset-video-modal iframe {
  6059. position: relative;
  6060. top: 50%;
  6061. transform: translateY(-50%);
  6062. display: inline-block;
  6063. max-width: 100%}
  6064. .previous-simulations-module {
  6065. margin: auto;
  6066. max-width: 1100px;
  6067. padding: 1rem;
  6068. position: relative;
  6069. width: 100%}
  6070. @media all and (min-width: 1099px) {
  6071. .previous-simulations-module {
  6072. padding: 2rem 0;
  6073. }
  6074. }.previous-simulations-module-content {
  6075. display: -webkit-flex;
  6076. display: flex;
  6077. -webkit-flex-flow: row wrap;
  6078. flex-flow: row wrap;
  6079. -webkit-justify-content: space-between;
  6080. justify-content: space-between;
  6081. width: 100%}
  6082. .previous-simulations-module-link {
  6083. width: 100%;
  6084. margin-bottom: 20px;
  6085. position: relative;
  6086. }
  6087. @media all and (min-width: 901px) {
  6088. .previous-simulations-module-link {
  6089. margin-bottom: 32px;
  6090. width: 48%}
  6091. .previous-simulations-module-link .previous-simulations-module-link:nth-child(odd) {
  6092. margin-right: 32px;
  6093. }
  6094. }.previous-simulations-module-image {
  6095. position: relative;
  6096. z-index: 0;
  6097. width: 100%}
  6098. .previous-simulations-platforms {
  6099. position: absolute;
  6100. bottom: 1.5em;
  6101. left: 0;
  6102. z-index: 1;
  6103. }
  6104. .add-ons-module {
  6105. width: 100%;
  6106. position: relative;
  6107. background: #000 url("/assets/texture-noise@1x.png");
  6108. }
  6109. .add-ons-module-wrapper {
  6110. padding: 2rem 1rem 0;
  6111. max-width: 1100px;
  6112. margin: auto;
  6113. }
  6114. @media all and (min-width: 901px) {
  6115. .add-ons-module-wrapper {
  6116. padding-top: 2rem;
  6117. }
  6118. }.add-on-list {
  6119. padding: 0;
  6120. color: #fff;
  6121. display: -webkit-flex;
  6122. display: flex;
  6123. -webkit-flex-flow: row wrap;
  6124. flex-flow: row wrap;
  6125. -webkit-justify-content: space-between;
  6126. justify-content: space-between;
  6127. list-style: none;
  6128. }
  6129. @media all and (min-width: 901px) {
  6130. .add-on-list {
  6131. -webkit-justify-content: space-between;
  6132. justify-content: space-between;
  6133. }
  6134. }.add-on-list .standard-btn {
  6135. background-color: #fff;
  6136. color: #000;
  6137. font-weight: bold;
  6138. display: inline-block;
  6139. }
  6140. .add-on-item {
  6141. box-sizing: border-box;
  6142. display: block;
  6143. height: auto;
  6144. margin-bottom: 3em;
  6145. padding-left: 1em;
  6146. padding-right: 1em;
  6147. text-align: center;
  6148. width: 100%}
  6149. @media all and (min-width: 901px) {
  6150. .add-on-item {
  6151. margin: 0 auto;
  6152. width: 30%;
  6153. padding-left: 0;
  6154. padding-right: 0;
  6155. }
  6156. }.add-on-cover-art {
  6157. width: 100%}
  6158. @media all and (min-width: 901px) {
  6159. .add-on-cover-art {
  6160. max-width: 238px;
  6161. padding-left: 0;
  6162. padding-right: 0;
  6163. }
  6164. }.add-on-title {
  6165. font-size: 0.6875rem;
  6166. margin-top: 3em;
  6167. }
  6168. .add-on-summary {
  6169. font-size: 0.8125rem;
  6170. color: #fff;
  6171. margin-bottom: 2em;
  6172. }
  6173. .add-ons-module-asset-container {
  6174. position: relative;
  6175. height: 38.125rem;
  6176. -webkit-justify-content: flex-start;
  6177. justify-content: flex-start;
  6178. }
  6179. @media all and (min-width: 901px) {
  6180. .add-on-list-single {
  6181. margin: 6em 0;
  6182. }
  6183. .add-on-list-single .add-on-item {
  6184. display: -ms-flexbox;
  6185. -ms-flex-flow: row wrap;
  6186. -ms-flex-pack: start;
  6187. -ms-flex-align: start;
  6188. display: -webkit-flex;
  6189. display: flex;
  6190. -webkit-flex-flow: row wrap;
  6191. flex-flow: row wrap;
  6192. -webkit-justify-content: space-around;
  6193. justify-content: space-around;
  6194. padding: 0;
  6195. width: 100%}
  6196. .add-on-list-single .add-on-image {
  6197. border: 1px dashed #d9d9d9;
  6198. display: -ms-flexbox;
  6199. -ms-flex-direction: row;
  6200. -ms-flex: 2;
  6201. -webkit-flex: 2;
  6202. flex: 2;
  6203. margin: 0 8em 0 1em;
  6204. padding: 1.5em;
  6205. position: relative;
  6206. width: auto;
  6207. }
  6208. .add-on-list-single .add-on-image:before {
  6209. content: '';
  6210. background: url("/assets/icons/scissor.svg") no-repeat;
  6211. width: 64px;
  6212. height: 23px;
  6213. display: inline-block;
  6214. position: absolute;
  6215. right: 0;
  6216. top: -1.25em;
  6217. }
  6218. .add-on-list-single .add-on-copy {
  6219. display: -ms-flexbox;
  6220. -ms-flex-direction: column;
  6221. -ms-flex: 6;
  6222. text-align: left;
  6223. -webkit-flex: 6;
  6224. flex: 6;
  6225. -webkit-align-self: center;
  6226. align-self: center;
  6227. padding-right: 2rem;
  6228. }
  6229. .add-on-list-single .add-on-title {
  6230. font-size: 3em;
  6231. margin: 0;
  6232. }
  6233. .add-on-list-single .add-on-summary {
  6234. font-size: 15px;
  6235. }
  6236. }.media-module-more-btn {
  6237. display: none;
  6238. margin: 0 auto;
  6239. }
  6240. .media-module-btn-active {
  6241. display: block;
  6242. }
  6243. .media-module {
  6244. width: 100%;
  6245. position: relative;
  6246. }
  6247. .media-module-wrapper {
  6248. padding: 2rem 1rem 0;
  6249. max-width: 1100px;
  6250. margin: auto;
  6251. }
  6252. .media-featured-item-container {
  6253. margin-bottom: 1em;
  6254. }
  6255. @media all and (min-width: 901px) {
  6256. .media-featured-item-container {
  6257. margin-bottom: 0;
  6258. }
  6259. }.media-featured-item-text-image {
  6260. display: block;
  6261. width: 100%;
  6262. max-width: 550px;
  6263. margin: 0 auto;
  6264. }
  6265. .media-module-inline-nav {
  6266. display: none;
  6267. }
  6268. @media all and (min-width: 901px) {
  6269. .media-module-inline-nav {
  6270. display: inherit;
  6271. }
  6272. }.media-module-item {
  6273. cursor: pointer;
  6274. display: block;
  6275. height: auto;
  6276. margin-bottom: 1em;
  6277. text-align: center;
  6278. position: relative;
  6279. width: 48%}
  6280. @media all and (min-width: 901px) {
  6281. .media-module-item {
  6282. width: 23%;
  6283. margin-right: 2%;
  6284. margin-bottom: 2em;
  6285. -webkit-order: 2;
  6286. order: 2;
  6287. }
  6288. .media-module-item:nth-of-type(1) {
  6289. -webkit-order: 1;
  6290. order: 1;
  6291. }
  6292. }.media-module-panel {
  6293. right: 0;
  6294. }
  6295. @media all and (min-width: 901px) {
  6296. .media-module-panel {
  6297. padding-top: 60px;
  6298. }
  6299. .media-module-panel:first-of-type .media-module-panel {
  6300. max-width: 48%}
  6301. }.media-module-panel:first-of-type {
  6302. margin-left: 0;
  6303. }
  6304. .media-module-panel:first-of-type .media-module-item {
  6305. width: 100%;
  6306. margin-left: 0;
  6307. }
  6308. .media-module-panel:first-of-type .media-module-more-btn {
  6309. display: none;
  6310. }
  6311. .media-module-panel:first-of-type .media-module-item:nth-child(odd) {
  6312. padding: 0;
  6313. }
  6314. @media all and (min-width: 901px) {
  6315. .media-module-panel: first-of-type .media-module-item, .media-module-panel:first-of-type .media-featured-item-container {
  6316. width: 48%;
  6317. margin-bottom: 2em;
  6318. }
  6319. }.media-module-inner-panel {
  6320. display: -webkit-flex;
  6321. display: flex;
  6322. -webkit-flex-flow: row wrap;
  6323. flex-flow: row wrap;
  6324. -webkit-justify-content: flex-start;
  6325. justify-content: flex-start;
  6326. color: #fff;
  6327. list-style: none;
  6328. padding: 0;
  6329. }
  6330. @media all and (min-width: 901px) {
  6331. .media-module-inner-panel {
  6332. margin-right: -2%}
  6333. }.media-module-item-image {
  6334. width: 100%}
  6335. .media-module-play-btn {
  6336. background-position: center;
  6337. bottom: 0;
  6338. left: 0;
  6339. margin: auto;
  6340. padding: 0;
  6341. position: absolute;
  6342. right: 0;
  6343. top: 0;
  6344. text-indent: -9999px;
  6345. width: 77px;
  6346. max-width: 50%;
  6347. max-height: 50%}
  6348. .media-module-dropdown {
  6349. display: -webkit-flex;
  6350. display: flex;
  6351. }
  6352. .media-module-dropdown .dropdown-wrapper {
  6353. margin-bottom: 1rem;
  6354. width: 100%}
  6355. .media-module-dropdown .form-dropdown-container {
  6356. background: #000 url("/assets/texture-noise@1x.png");
  6357. }
  6358. .media-module-dropdown .form-dropdown-container:before {
  6359. content: none;
  6360. }
  6361. .media-module-dropdown .form-dropdown-value {
  6362. border-right: 1px solid #fff;
  6363. line-height: 1rem;
  6364. }
  6365. @media all and (min-width: 901px) {
  6366. .media-module-dropdown {
  6367. display: none;
  6368. }
  6369. }.media-module-panel-fetching-more .media-module-more-btn {
  6370. -moz-animation: rotatePageLoadCog 4.5s linear infinite;
  6371. -webkit-animation: rotatePageLoadCog 4.5s linear infinite;
  6372. animation: rotatePageLoadCog 4.5s linear infinite;
  6373. -moz-animation-play-state: running;
  6374. -webkit-animation-play-state: running;
  6375. animation-play-state: running;
  6376. background-image: url("/assets/cog.svg");
  6377. background-color: transparent;
  6378. background-size: contain;
  6379. border: none;
  6380. height: 40px;
  6381. text-indent: -9999px;
  6382. -moz-transition: opacity 600ms ease-in-out;
  6383. -o-transition: opacity 600ms ease-in-out;
  6384. -webkit-transition: opacity 600ms ease-in-out;
  6385. transition: opacity 600ms ease-in-out;
  6386. width: 40px;
  6387. }
  6388. .simulation-media-text-image {
  6389. margin-top: 0.5em;
  6390. }
  6391. @media all and (min-width: 901px) {
  6392. .simulation-media-text-image {
  6393. -webkit-order: 1;
  6394. order: 1;
  6395. margin-right: 2%;
  6396. margin-top: -2em;
  6397. }
  6398. }@media all and (min-width: 901px) {
  6399. .goodie-bag-featured-item {
  6400. display: block;
  6401. align-self: center;
  6402. -webkit-order: 2;
  6403. order: 2;
  6404. }
  6405. .goodie-bag-featured-item+.media-module-item {
  6406. -webkit-order: 1;
  6407. order: 1;
  6408. }
  6409. .goodie-bag-featured-item .media-featured-item-text-image {
  6410. display: block;
  6411. max-width: 440px;
  6412. margin: 0 auto;
  6413. }
  6414. }.goodie-bag-item {
  6415. position: relative;
  6416. }
  6417. .goodie-bag-download-wrapper {
  6418. opacity: 0;
  6419. position: absolute;
  6420. top: 0;
  6421. left: 0;
  6422. right: 0;
  6423. bottom: 4px;
  6424. background-color: rgba(0, 0, 0, 0.9);
  6425. -moz-transition: opacity 0.3s ease-in-out;
  6426. -o-transition: opacity 0.3s ease-in-out;
  6427. -webkit-transition: opacity 0.3s ease-in-out;
  6428. transition: opacity 0.3s ease-in-out;
  6429. width: 100%;
  6430. height: 100%}
  6431. .goodie-bag-download-wrapper:hover {
  6432. opacity: 1;
  6433. }
  6434. .goodie-bag-download-btn {
  6435. border-color: #fff;
  6436. color: #fff;
  6437. display: inline-block;
  6438. top: 50%;
  6439. position: relative;
  6440. -moz-transform: translateY(-50%);
  6441. -ms-transform: translateY(-50%);
  6442. -webkit-transform: translateY(-50%);
  6443. transform: translateY(-50%);
  6444. margin: auto;
  6445. padding-left: 40px;
  6446. }
  6447. .goodie-bag-download-btn:before {
  6448. background-image: url("/assets/icons/download-asset-button.svg");
  6449. background-repeat: no-repeat;
  6450. background-position: center;
  6451. background-size: contain;
  6452. content: '';
  6453. display: block;
  6454. position: absolute;
  6455. height: 15px;
  6456. left: 20px;
  6457. width: 15px;
  6458. }
  6459. .social-media-feed {
  6460. display: -webkit-flex;
  6461. display: flex;
  6462. -webkit-flex-flow: column wrap;
  6463. flex-flow: column wrap;
  6464. max-width: 1100px;
  6465. padding: 0 1rem 1rem;
  6466. -webkit-justify-content: space-between;
  6467. justify-content: space-between;
  6468. }
  6469. @media all and (min-width: 901px) {
  6470. .social-media-feed {
  6471. -webkit-flex-flow: row wrap;
  6472. flex-flow: row wrap;
  6473. }
  6474. }@media all and (min-width: 1099px) {
  6475. .social-media-feed {
  6476. padding: 0;
  6477. }
  6478. }.social-media-feed .section-heading-inline-nav-wrap {
  6479. width: 100%}
  6480. .social-media-feed-section-heading-inline-nav {
  6481. display: none;
  6482. }
  6483. .social-media-feed-section-heading-inline-nav.social-media-feed-section-heading-inline-nav-active {
  6484. display: -webkit-flex;
  6485. display: flex;
  6486. }
  6487. .social-media-feed-dropdown {
  6488. margin: .5em 0 .25em;
  6489. width: 100%}
  6490. .social-media-feed-dropdown .form-dropdown-container {
  6491. background: #fff;
  6492. height: 2em;
  6493. padding-right: 48px;
  6494. }
  6495. .social-media-feed-dropdown .form-dropdown-container:before {
  6496. border: none;
  6497. height: 2.25rem;
  6498. width: 3rem;
  6499. right: 0;
  6500. top: 0;
  6501. background: #000;
  6502. z-index: inherit;
  6503. }
  6504. .social-media-feed-dropdown .form-dropdown-option {
  6505. padding: 1em;
  6506. }
  6507. @media all and (min-width: 901px) {
  6508. .social-media-feed-dropdown .form-dropdown-option {
  6509. display: block;
  6510. }
  6511. }@media all and (min-width: 901px) {
  6512. .social-media-feed-spike {
  6513. -webkit-flex-flow: row wrap;
  6514. flex-flow: row wrap;
  6515. -webkit-order: 1;
  6516. order: 1;
  6517. width: 28%}
  6518. .social-media-feed-spike .spike.spike-heading {
  6519. font-size: 2.5em;
  6520. }
  6521. }.social-media-feed-networks {
  6522. -webkit-flex-flow: row wrap;
  6523. flex-flow: row wrap;
  6524. -webkit-justify-content: space-between;
  6525. justify-content: space-between;
  6526. display: -webkit-flex;
  6527. display: flex;
  6528. list-style: none;
  6529. margin: 2em auto 3em;
  6530. max-width: 400px;
  6531. padding: 0 2em;
  6532. }
  6533. .social-media-feed-networks .social-media-feed-network {
  6534. box-sizing: border-box;
  6535. display: -webkit-flex;
  6536. display: flex;
  6537. width: 30%;
  6538. min-width: 35px;
  6539. text-align: center;
  6540. padding: 1em 0 .5em;
  6541. }
  6542. @media all and (min-width: 901px) {
  6543. .social-media-feed-networks {
  6544. margin: 2em 1.5em 3em;
  6545. padding: 0;
  6546. }
  6547. }.social-media-feed-network-link {
  6548. margin: 0 auto;
  6549. min-width: 35px;
  6550. -moz-transition: opacity 300ms ease;
  6551. -o-transition: opacity 300ms ease;
  6552. -webkit-transition: opacity 300ms ease;
  6553. transition: opacity 300ms ease;
  6554. }
  6555. .social-media-feed-network-link:hover {
  6556. opacity: 0.5;
  6557. }
  6558. .social-media-feed-panels {
  6559. background: #fff;
  6560. box-sizing: border-box;
  6561. height: auto;
  6562. min-height: 200px;
  6563. width: 100%;
  6564. position: relative;
  6565. }
  6566. @media all and (min-width: 901px) {
  6567. .social-media-feed-panels {
  6568. border: 1rem solid transparent;
  6569. -webkit-order: 2;
  6570. order: 2;
  6571. width: 70%}
  6572. }.social-media-feed-panels-container {
  6573. height: auto;
  6574. width: 100%}
  6575. .social-media-feed-panels-container:before {
  6576. background: url("/assets/texture-cog-dark.png") no-repeat center center;
  6577. content: ' ';
  6578. display: block;
  6579. height: 92px;
  6580. margin-left: -45px;
  6581. margin-top: -45px;
  6582. left: 50%;
  6583. top: 50%;
  6584. position: absolute;
  6585. width: 92px;
  6586. -moz-animation: rotatePageLoadCog 4.5s linear infinite;
  6587. -webkit-animation: rotatePageLoadCog 4.5s linear infinite;
  6588. animation: rotatePageLoadCog 4.5s linear infinite;
  6589. visibility: visible;
  6590. z-index: 10;
  6591. }
  6592. .social-media-feed-panels-container.social-media-feed-panels-container-active:before {
  6593. -moz-animation-play-state: paused;
  6594. -webkit-animation-play-state: paused;
  6595. animation-play-state: paused;
  6596. visibility: hidden;
  6597. }
  6598. .social-media-feed-panel {
  6599. background: #fff;
  6600. opacity: 0;
  6601. height: 0;
  6602. transition: opacity 300ms ease-in-out, visibility 300ms ease-in-out;
  6603. visibility: hidden;
  6604. width: 100%;
  6605. position: relative;
  6606. z-index: 1;
  6607. pointer-events: none;
  6608. }
  6609. .social-media-feed-panel.social-media-feed-panel-active {
  6610. height: auto;
  6611. opacity: 1;
  6612. overflow-x: hidden;
  6613. pointer-events: all;
  6614. visibility: visible;
  6615. z-index: 2;
  6616. }
  6617. #twitter-widget-0 {
  6618. margin: 0 !important;
  6619. width: 100% !important;
  6620. }
  6621. .instagram-media {
  6622. max-width: 100% !important;
  6623. }
  6624. .vine-embed {
  6625. display: block;
  6626. margin: 0 auto;
  6627. }
  6628. .fb_iframe_widget {
  6629. width: 100%}
  6630. .fb_iframe_widget iframe[style], .fb_iframe_widget span[style] {
  6631. width: 100% !important;
  6632. }
  6633. .survival-guide-module {
  6634. margin: 0 auto;
  6635. padding: 1em 1rem 4rem;
  6636. }
  6637. @media all and (min-width: 901px) {
  6638. .survival-guide-module {
  6639. padding-bottom: 2rem;
  6640. }
  6641. }.survival-guide-module-wrapper {
  6642. padding: 0;
  6643. max-width: 1100px;
  6644. margin: 0 auto;
  6645. }
  6646. .survival-guide-module-image {
  6647. display: block;
  6648. height: auto;
  6649. margin-bottom: 0.4em;
  6650. width: 100%}
  6651. .survival-guide-module-content {
  6652. margin-top: 3em;
  6653. padding: 0 0 1px;
  6654. position: relative;
  6655. width: 100%}
  6656. .survival-guide-module-content.snippet:before {
  6657. display: none;
  6658. }
  6659. .survival-guide-module-copy {
  6660. margin: 0;
  6661. padding: 0;
  6662. }
  6663. .survival-guide-separator.snippet-separator {
  6664. position: initial;
  6665. margin: 1rem 0;
  6666. }
  6667. .survival-guide-separator.snippet-separator:before {
  6668. background-image: url("/assets/icons/scissor-full.svg");
  6669. background-position: bottom;
  6670. background-size: 60%;
  6671. bottom: -0.85em;
  6672. height: 15px;
  6673. right: 2em;
  6674. }
  6675. .survival-guide-separator:last-of-type {
  6676. display: none;
  6677. }
  6678. .survival-guide-module-panel-heading {
  6679. font-family: "futura-pt-condensed", sans-serif;
  6680. font-weight: 500;
  6681. font-size: 27px;
  6682. letter-spacing: 0.04em;
  6683. line-height: 34px;
  6684. margin: 0 0 2rem;
  6685. }
  6686. @media all and (min-width: 901px) {
  6687. .survival-guide-module-panel-heading {
  6688. font-size: 34px;
  6689. }
  6690. }.survival-guide-module-inner-heading {
  6691. display: block;
  6692. width: auto;
  6693. position: relative;
  6694. margin: -1.4em 2rem 1rem;
  6695. background: #000 url("/assets/texture-noise@1x.png");
  6696. }
  6697. .survival-guide-module-inner-heading:before, .survival-guide-module-inner-heading:after {
  6698. content: '';
  6699. border-top: 22px solid transparent;
  6700. border-bottom: 22px solid transparent;
  6701. display: block;
  6702. position: absolute;
  6703. top: 0;
  6704. bottom: 0;
  6705. }
  6706. .survival-guide-module-inner-heading:after {
  6707. width: 0;
  6708. height: 0;
  6709. border-left: 18px solid #000;
  6710. right: -1.1em;
  6711. }
  6712. .survival-guide-module-inner-heading:before {
  6713. width: 0;
  6714. height: 0;
  6715. border-right: 18px solid #000;
  6716. left: -1.1em;
  6717. }
  6718. .survival-guide-module-inner-subheading {
  6719. display: block;
  6720. font-family: "futura-pt-condensed", sans-serif;
  6721. font-weight: 500;
  6722. font-size: 12px;
  6723. padding: 0.4rem 1rem 0;
  6724. position: relative;
  6725. text-align: left;
  6726. }
  6727. @media all and (min-width: 901px) {
  6728. .survival-guide-module-inner-subheading: after {
  6729. content: '';
  6730. background-image: url("/assets/icons/star-black.svg");
  6731. background-position: center;
  6732. display: block;
  6733. height: 20px;
  6734. margin: 5px auto 0;
  6735. width: 20px;
  6736. }
  6737. }.survival-guide-module-inner-content {
  6738. display: -webkit-flex;
  6739. display: flex;
  6740. -webkit-flex-flow: column wrap;
  6741. flex-flow: column wrap;
  6742. }
  6743. .survival-guide-module-panel {
  6744. position: relative;
  6745. padding: 0 1rem 1rem;
  6746. }
  6747. .survival-guide-module-panel-subheading {
  6748. display: block;
  6749. font-family: "futura-pt", sans-serif;
  6750. font-size: 1em;
  6751. font-weight: bold;
  6752. margin-bottom: 0.6rem;
  6753. text-transform: uppercase;
  6754. }
  6755. .survival-guide-module-inner-heading-text {
  6756. color: #ecebe8;
  6757. font-family: "FilmotypeGlenlake", serif;
  6758. font-size: 2.2rem;
  6759. display: block;
  6760. letter-spacing: 0.05em;
  6761. text-align: center;
  6762. text-transform: uppercase;
  6763. width: 100%;
  6764. padding-top: .25em;
  6765. }
  6766. .survival-guide-module-figure {
  6767. font-family: "futura-pt", sans-serif;
  6768. font-size: .5rem;
  6769. font-weight: bold;
  6770. position: absolute;
  6771. right: 1rem;
  6772. text-transform: uppercase;
  6773. }
  6774. .survival-guide-module-panel:first-of-type .survival-guide-module-figure {
  6775. top: 12rem;
  6776. }
  6777. .survival-guide-module-figure:nth-of-type(2) {
  6778. top: 4.5rem;
  6779. }
  6780. .survival-guide-module-figure-letter {
  6781. font-size: 2rem;
  6782. }
  6783. @media all and (min-width: 901px) {
  6784. .survival-guide-module-inner-content {
  6785. -webkit-flex-flow: row wrap;
  6786. flex-flow: row wrap;
  6787. }
  6788. .survival-guide-separator {
  6789. display: none;
  6790. }
  6791. .survival-guide-module-inner-heading {
  6792. height: 6.25rem;
  6793. top: -3.1rem;
  6794. margin: 0 9rem;
  6795. }
  6796. .survival-guide-module-inner-heading:before, .survival-guide-module-inner-heading:after {
  6797. border-top-width: 50px;
  6798. border-bottom-width: 50px;
  6799. }
  6800. .survival-guide-module-inner-heading:before {
  6801. border-right-width: 40px;
  6802. left: -2.5rem;
  6803. }
  6804. .survival-guide-module-inner-heading:after {
  6805. border-left-width: 40px;
  6806. right: -2.5rem;
  6807. }
  6808. .survival-guide-module-inner-subheading {
  6809. text-align: center;
  6810. margin: -3rem 0 2rem;
  6811. }
  6812. .survival-guide-module-inner-heading-text {
  6813. font-size: 110px;
  6814. padding-top: 6px;
  6815. }
  6816. .survival-guide-module-content {
  6817. margin-top: 6rem;
  6818. }
  6819. .survival-guide-module-content.snippet:before {
  6820. display: block;
  6821. left: 1.5rem;
  6822. top: -0.8rem;
  6823. }
  6824. .survival-guide-module-panel {
  6825. box-sizing: border-box;
  6826. width: 50%;
  6827. padding: 0 2em;
  6828. }
  6829. .survival-guide-module-panel:first-child {
  6830. border-right: 2px solid #000;
  6831. margin-bottom: 1.4em;
  6832. padding-bottom: 0.6em;
  6833. }
  6834. .survival-guide-module-panel:first-of-type .survival-guide-module-figure {
  6835. top: 18rem;
  6836. right: 3rem;
  6837. }
  6838. .survival-guide-module-figure:nth-of-type(2) {
  6839. top: 7.5rem;
  6840. right: 3rem;
  6841. }
  6842. }.newsletter-page {
  6843. background: rgba(0, 0, 0, 0.8);
  6844. box-sizing: border-box;
  6845. height: 100%;
  6846. width: 100%;
  6847. overflow: auto;
  6848. }
  6849. .newsletter-iframe {
  6850. left: 0;
  6851. top: 0;
  6852. opacity: 0;
  6853. position: absolute;
  6854. visibility: hidden;
  6855. }
  6856. .newsletter-page-form-wrapper {
  6857. height: 100%;
  6858. margin: 0 auto;
  6859. left: 0;
  6860. position: relative;
  6861. top: 0;
  6862. max-width: 900px;
  6863. width: 100%;
  6864. overflow: visible;
  6865. }
  6866. .newsletter-page-form-wrapper .form-field {
  6867. position: relative;
  6868. display: block;
  6869. margin: 2em 0;
  6870. }
  6871. .newsletter-page-form-wrapper .form-text-field-input {
  6872. background-color: #fff;
  6873. box-sizing: border-box;
  6874. }
  6875. .newsletter-page-form-wrapper .form-field:first-of-type {
  6876. margin-top: 1.5rem;
  6877. }
  6878. @media all and (min-width: 901px) {
  6879. .newsletter-page-form-wrapper {
  6880. padding-right: 6em;
  6881. }
  6882. }.newsletter-page-close-btn.modal-close-btn-animated {
  6883. border-color: #000;
  6884. right: 2em;
  6885. top: 2em;
  6886. }
  6887. @media all and (min-width: 901px) {
  6888. .newsletter-page-close-btn.modal-close-btn-animated {
  6889. border-color: #fff;
  6890. right: 0;
  6891. top: 3em;
  6892. }
  6893. }.newsletter-page-close-btn.modal-close-btn-animated .modal-close-btn-animated-text {
  6894. background-image: url("/assets/icons/close-black.svg");
  6895. background-repeat: no-repeat;
  6896. }
  6897. @media all and (min-width: 901px) {
  6898. .newsletter-page-close-btn.modal-close-btn-animated .modal-close-btn-animated-text {
  6899. background-image: url("/assets/icons/close-white.svg");
  6900. }
  6901. }.newsletter-page-form-field-platforms .form-field-divider {
  6902. margin-bottom: .5rem;
  6903. }
  6904. .newsletter-page-form-field-platforms .form-checkbox-label {
  6905. display: -webkit-inline-flex;
  6906. display: inline-flex;
  6907. width: 32%}
  6908. .newsletter-page-form {
  6909. box-sizing: border-box;
  6910. display: block;
  6911. height: 100%;
  6912. left: 0;
  6913. opacity: 1;
  6914. position: absolute;
  6915. top: 0;
  6916. -moz-transition: translate 100ms linear, opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  6917. -o-transition: translate 100ms linear, opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  6918. -webkit-transition: translate 100ms linear, opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  6919. transition: translate 100ms linear, opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  6920. overflow: visible;
  6921. width: 100%;
  6922. z-index: 1;
  6923. }
  6924. @media all and (min-width: 901px) {
  6925. .newsletter-page-form {
  6926. height: auto;
  6927. max-width: 900px;
  6928. padding: 2em 0;
  6929. }
  6930. .newsletter-page-form .form-field:first-of-type {
  6931. margin-top: .25rem;
  6932. }
  6933. }.newsletter-page-form-success .newsletter-page-form, .newsletter-page-form-error .newsletter-page-form {
  6934. opacity: 0;
  6935. display: none;
  6936. z-index: 0;
  6937. }
  6938. @media all and (min-width: 901px) {
  6939. .newsletter-page-form.form-error {
  6940. -moz-animation: shake 300ms ease;
  6941. -webkit-animation: shake 300ms ease;
  6942. animation: shake 300ms ease;
  6943. }
  6944. }.newsletter-page-success-content, .newsletter-page-error-content {
  6945. box-sizing: border-box;
  6946. position: absolute;
  6947. opacity: 0;
  6948. left: 0;
  6949. top: 0;
  6950. visibility: hidden;
  6951. height: 100%;
  6952. min-height: 690px;
  6953. z-index: 0;
  6954. width: 100%;
  6955. margin: 0 auto;
  6956. -moz-transition: opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  6957. -o-transition: opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  6958. -webkit-transition: opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  6959. transition: opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  6960. }
  6961. .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 {
  6962. display: none;
  6963. }
  6964. @media all and (min-width: 901px) {
  6965. .newsletter-page-success-content, .newsletter-page-error-content {
  6966. height: auto;
  6967. max-width: 900px;
  6968. margin-top: 2rem;
  6969. position: absolute;
  6970. }
  6971. .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 {
  6972. display: none;
  6973. }
  6974. .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 {
  6975. display: block;
  6976. font-size: 0.625rem;
  6977. letter-spacing: 0.2em;
  6978. }
  6979. }.newsletter-page-form-success .newsletter-page-success-content {
  6980. opacity: 1;
  6981. visibility: visible;
  6982. z-index: 1;
  6983. }
  6984. .newsletter-page-locale-en-us .newsletter-page-success-copy:last-of-type, .newsletter-page-locale-en-gb .newsletter-page-success-copy:last-of-type {
  6985. visibility: visible;
  6986. }
  6987. .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 {
  6988. display: block;
  6989. }
  6990. .newsletter-page-form-error .newsletter-page-error-content {
  6991. opacity: 1;
  6992. visibility: visible;
  6993. z-index: 1;
  6994. }
  6995. .newsletter-page-success-copy {
  6996. line-height: 1.5em;
  6997. }
  6998. .newsletter-page-success-copy:first-of-type {
  6999. margin-top: 8rem;
  7000. }
  7001. .newsletter-page-success-copy:last-of-type {
  7002. margin-bottom: 11rem;
  7003. }
  7004. @media all and (min-width: 901px) {
  7005. .newsletter-page-success-copy: first-of-type {
  7006. margin-top: 10rem;
  7007. }
  7008. .newsletter-page-success-copy:last-of-type {
  7009. margin-bottom: 18rem;
  7010. }
  7011. }.newsletter-page-success-copy-outro {
  7012. position: relative;
  7013. }
  7014. .newsletter-page-success-copy-sign-off.newsletter-page-success-copy-sign-off-image-true {
  7015. clip: auto;
  7016. color: transparent;
  7017. display: block;
  7018. height: 0;
  7019. margin: 0;
  7020. overflow: hidden;
  7021. padding: 0;
  7022. text-indent: 100%;
  7023. white-space: nowrap;
  7024. width: 0;
  7025. background: url("/assets/overseer-signature.png") no-repeat;
  7026. background-size: 100% 100%;
  7027. display: block;
  7028. height: 50px;
  7029. width: 200px;
  7030. }
  7031. @media all and (min-width: 901px) {
  7032. .newsletter-page-success-copy-sign-off.newsletter-page-success-copy-sign-off-image-true {
  7033. height: 96px;
  7034. width: 383px;
  7035. }
  7036. }.newsletter-page-error-copy {
  7037. line-height: 1.5em;
  7038. padding-top: 50%;
  7039. text-align: center;
  7040. }
  7041. @media all and (min-width: 901px) {
  7042. .newsletter-page-error-copy {
  7043. padding: 0 0 50%;
  7044. -moz-transform: translateY(40%);
  7045. -ms-transform: translateY(40%);
  7046. -webkit-transform: translateY(40%);
  7047. transform: translateY(40%);
  7048. }
  7049. }.newsletter-page-content {
  7050. background: #ecebe8 url("../assets/texture-noise@1x.png");
  7051. padding: 1em;
  7052. }
  7053. .newsletter-page-content.newsletter-page-content-intro {
  7054. padding-top: 8.5em;
  7055. text-align: center;
  7056. border-bottom: 1px dashed #333;
  7057. }
  7058. @media all and (min-width: 901px) {
  7059. .newsletter-page-content.newsletter-page-content-intro {
  7060. padding-top: 6.5em;
  7061. }
  7062. }.newsletter-page-content.newsletter-page-form-footer {
  7063. background: #000 url("/assets/texture-noise@1x.png");
  7064. }
  7065. .newsletter-page-form.newsletter-page-form-success .newsletter-page-content, .newsletter-page-form.newsletter-page-form-error .newsletter-page-content {
  7066. display: none;
  7067. }
  7068. .newsletter-page-content .vt-icon {
  7069. margin: 0 auto 1em;
  7070. }
  7071. .newsletter-page-content .form-field-divider {
  7072. padding-top: 2em;
  7073. border-top: 3px solid #000;
  7074. }
  7075. .newsletter-page-content .form-field-column {
  7076. box-sizing: border-box;
  7077. display: inline-block;
  7078. padding-top: 1.5em;
  7079. vertical-align: top;
  7080. width: 48%}
  7081. .newsletter-page-content .form-radio-label {
  7082. margin-top: 1em;
  7083. }
  7084. @media all and (min-width: 901px) {
  7085. .newsletter-page-content {
  7086. padding: 1.5em 1.5em 1em;
  7087. }
  7088. }.newsletter-page-content-intro:after, .newsletter-page-success-content:after, .newsletter-page-error-content:after {
  7089. background: url("../assets/vault-tec-icon-black.svg") no-repeat 0;
  7090. content: "";
  7091. display: block;
  7092. position: absolute;
  7093. height: 8em;
  7094. width: 8em;
  7095. left: 50%;
  7096. top: 2em;
  7097. background-size: 100%;
  7098. margin-left: -4em;
  7099. }
  7100. @media all and (min-width: 901px) {
  7101. .newsletter-page-content-intro: after, .newsletter-page-success-content:after, .newsletter-page-error-content:after {
  7102. top: -2em;
  7103. width: 10em;
  7104. height: 10em;
  7105. margin-left: -5em;
  7106. }
  7107. }.newsletter-page-content-column {
  7108. position: relative;
  7109. }
  7110. @media all and (min-width: 901px) {
  7111. .newsletter-page-content-column {
  7112. width: 48%;
  7113. display: inline-block;
  7114. vertical-align: top;
  7115. }
  7116. .newsletter-page-content-column:last-of-type {
  7117. margin-left: 1.5em;
  7118. }
  7119. }.newsletter-page-heading {
  7120. text-align: center;
  7121. display: block;
  7122. font-family: "futura-pt-condensed", sans-serif;
  7123. font-weight: 500;
  7124. letter-spacing: .25em;
  7125. text-transform: uppercase;
  7126. font-size: 1.0625rem;
  7127. }
  7128. .newsletter-page-form-success .newsletter-page-heading {
  7129. position: relative;
  7130. top: 6rem;
  7131. font-family: "futura-pt-condensed", sans-serif;
  7132. font-weight: 500;
  7133. }
  7134. @media all and (min-width: 901px) {
  7135. .newsletter-page-form-success .newsletter-page-heading {
  7136. top: 3.5em;
  7137. }
  7138. }.newsletter-page-form-error .newsletter-page-heading {
  7139. padding-bottom: 2em;
  7140. }
  7141. .newsletter-page-subtext {
  7142. text-align: center;
  7143. }
  7144. .newsletter-page-form-date-container .form-field-number-input {
  7145. background: none;
  7146. border: none;
  7147. font-size: 2em;
  7148. display: inline;
  7149. overflow: visible;
  7150. position: relative;
  7151. z-index: 2;
  7152. font-family: "futura-pt", sans-serif;
  7153. font-weight: bold;
  7154. padding-left: 0;
  7155. }
  7156. .newsletter-page-form-date-container .form-field-number-input.newsletter-page-form-birth-year-text-field {
  7157. width: 3.25em;
  7158. }
  7159. .newsletter-page-form-date-container .form-field-number-input.newsletter-page-form-birth-day-text-field {
  7160. width: 1.4em;
  7161. }
  7162. .newsletter-page-form-date-container .form-field-number-input.newsletter-page-form-birth-month-text-field {
  7163. width: 1.9em;
  7164. }
  7165. .form-field-error .newsletter-page-form-date-container .form-field-number-input:-moz-placeholder {
  7166. color: #bd0100;
  7167. }
  7168. .form-field-error .newsletter-page-form-date-container .form-field-number-input::-moz-placeholder {
  7169. color: #bd0100;
  7170. }
  7171. .form-field-error .newsletter-page-form-date-container .form-field-number-input:-ms-input-placeholder {
  7172. color: #bd0100;
  7173. }
  7174. .form-field-error .newsletter-page-form-date-container .form-field-number-input::-webkit-input-placeholder {
  7175. color: #bd0100;
  7176. }
  7177. .newsletter-page-form-date-container .form-field-number-input:-moz-placeholder {
  7178. color: #000;
  7179. }
  7180. .newsletter-page-form-date-container .form-field-number-input::-moz-placeholder {
  7181. color: #000;
  7182. }
  7183. .newsletter-page-form-date-container .form-field-number-input:-ms-input-placeholder {
  7184. color: #000;
  7185. }
  7186. .newsletter-page-form-date-container .form-field-number-input::-webkit-input-placeholder {
  7187. color: #000;
  7188. }
  7189. .newsletter-page-form-date-container .form-field-number-input:focus:-moz-placeholder {
  7190. color: transparent;
  7191. text-shadow: none;
  7192. }
  7193. .newsletter-page-form-date-container .form-field-number-input:focus::-moz-placeholder {
  7194. color: transparent;
  7195. text-shadow: none;
  7196. }
  7197. .newsletter-page-form-date-container .form-field-number-input:focus:-ms-input-placeholder {
  7198. color: transparent;
  7199. text-shadow: none;
  7200. }
  7201. .newsletter-page-form-date-container .form-field-number-input:focus::-webkit-input-placeholder {
  7202. color: transparent;
  7203. text-shadow: none;
  7204. }
  7205. .newsletter-page-form-birth-field-container:after {
  7206. content: '/';
  7207. font-size: 2em;
  7208. }
  7209. .newsletter-page-form-text-field-label {
  7210. display: none;
  7211. }
  7212. .newsletter-page-form-checkbox-label {
  7213. color: #fff;
  7214. }
  7215. .newsletter-page-form-checkbox-label .form-checkbox-input {
  7216. top: .25em;
  7217. }
  7218. .newsletter-page-form-checkbox-label:before {
  7219. top: .25em;
  7220. border-color: #fff;
  7221. }
  7222. .newsletter-page-form-footer {
  7223. padding: 3em 1em;
  7224. }
  7225. .newsletter-page-form-footer .form-field-error .newsletter-page-form-checkbox-label {
  7226. color: #bd0100;
  7227. }
  7228. .newsletter-page-form-footer .form-field-error .newsletter-page-form-checkbox-label:before {
  7229. border-color: #bd0100;
  7230. }
  7231. .newsletter-page-form-footer .form-checkbox-checked:after {
  7232. background-image: url(../assets/icons/icons.png);
  7233. background-position: 0px -213px;
  7234. width: 39px;
  7235. height: 34px;
  7236. bottom: auto;
  7237. top: -0.65em;
  7238. }
  7239. .newsletter-page-form-footer .newsletter-page-form-footer-icon {
  7240. height: 16px;
  7241. width: 111px;
  7242. margin: 0 0 1em;
  7243. }
  7244. .newsletter-page-form-footer .newsletter-page-form-submit-btn {
  7245. background: #ecebe8 url("/assets/texture-noise@1x.png");
  7246. border: none;
  7247. -moz-border-radius: 0;
  7248. -webkit-border-radius: 0;
  7249. border-radius: 0;
  7250. box-sizing: content-box;
  7251. color: #000;
  7252. cursor: pointer;
  7253. font-size: 0.75rem;
  7254. line-height: 10px;
  7255. margin: 2em auto;
  7256. padding: 0.8em 2.5em;
  7257. width: 130px;
  7258. overflow-y: hidden;
  7259. }
  7260. @media all and (min-width: 901px) {
  7261. .newsletter-page-form-footer .newsletter-page-form-submit-btn {
  7262. padding: 1em 3.4em;
  7263. position: absolute;
  7264. right: 0;
  7265. top: 0;
  7266. width: auto;
  7267. }
  7268. }.newsletter-page-form-footer .newsletter-page-form-submit-btn:hover .newsletter-page-form-submit-btn-text {
  7269. -moz-animation: buttonMouseOn 200ms ease-in-out;
  7270. -webkit-animation: buttonMouseOn 200ms ease-in-out;
  7271. animation: buttonMouseOn 200ms ease-in-out;
  7272. }
  7273. .newsletter-page-form-footer .newsletter-page-form-submit-btn-text {
  7274. display: block;
  7275. position: relative;
  7276. padding: 0.5em 0;
  7277. -moz-animation: buttonMouseOff 500ms ease-out;
  7278. -webkit-animation: buttonMouseOff 500ms ease-out;
  7279. animation: buttonMouseOff 500ms ease-out;
  7280. }
  7281. @media all and (min-width: 901px) {
  7282. .newsletter-page-form-footer {
  7283. padding: 2em 1.5em;
  7284. }
  7285. }.newsletter-page-success-footer, .newsletter-page-error-footer {
  7286. display: -webkit-flex;
  7287. display: flex;
  7288. -webkit-flex-flow: row wrap;
  7289. flex-flow: row wrap;
  7290. -webkit-justify-content: space-around;
  7291. justify-content: space-around;
  7292. margin: 1.5625rem 0 0.5rem;
  7293. text-align: center;
  7294. font-size: 0.875rem;
  7295. font-family: "futura-pt-condensed", sans-serif;
  7296. font-weight: 400;
  7297. text-transform: uppercase;
  7298. -webkit-flex: 4;
  7299. flex: 4;
  7300. }
  7301. .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 {
  7302. display: block;
  7303. margin: 0 2em;
  7304. }
  7305. .newsletter-page-success-footer:before, .newsletter-page-success-footer:after, .newsletter-page-error-footer:before, .newsletter-page-error-footer:after {
  7306. border: 0;
  7307. border-bottom: 3px solid #000;
  7308. width: 100%;
  7309. position: relative;
  7310. padding: 0;
  7311. margin: auto;
  7312. display: -ms-flexbox;
  7313. -ms-flex: 4;
  7314. -webkit-flex: 4;
  7315. flex: 4;
  7316. border-width: 1px;
  7317. content: ''}
  7318. @media all and (max-width: 901px) {
  7319. .newsletter-page-success-footer, .newsletter-page-error-footer {
  7320. position: absolute;
  7321. width: 95%;
  7322. bottom: 2em;
  7323. }
  7324. }.preorder-featured-media {
  7325. -moz-animation-play-state: paused;
  7326. -webkit-animation-play-state: paused;
  7327. animation-play-state: paused;
  7328. margin-bottom: 1em;
  7329. }
  7330. .preorder-featured-media .featured-media-asset-background-image {
  7331. height: auto;
  7332. width: 100%}
  7333. @media all and (min-width: 901px) {
  7334. .preorder-featured-media .featured-media-asset-background-image {
  7335. height: 100%;
  7336. max-height: 358px;
  7337. width: 100%}
  7338. }@media all and (min-width: 901px) {
  7339. .preorder-featured-media .featured-media-asset-text {
  7340. max-width: 400px;
  7341. margin-left: -200px;
  7342. }
  7343. }.preorder-lead-in-module, .announcement-preorder {
  7344. overflow: visible;
  7345. padding: .5rem 1rem 0;
  7346. }
  7347. @media all and (min-width: 1099px) {
  7348. .preorder-lead-in-module, .announcement-preorder {
  7349. padding: 2rem 0 0;
  7350. }
  7351. }.preorder-lead-in-module .preorder-lead-in-pack-art, .announcement-preorder .preorder-lead-in-pack-art {
  7352. margin-bottom: 1em;
  7353. max-width: 100%}
  7354. @media all and (min-width: 901px) {
  7355. .preorder-lead-in-module .preorder-lead-in-pack-art, .announcement-preorder .preorder-lead-in-pack-art {
  7356. max-height: 290px;
  7357. height: 100%;
  7358. width: auto;
  7359. margin-bottom: 1em;
  7360. }
  7361. }.preorder-lead-in-module .preorder-lead-in-release-date, .announcement-preorder .preorder-lead-in-release-date {
  7362. font-size: .75em;
  7363. text-align: center;
  7364. margin: 3em 0 0;
  7365. }
  7366. @media all and (min-width: 901px) {
  7367. .preorder-lead-in-module .preorder-lead-in-release-date, .announcement-preorder .preorder-lead-in-release-date {
  7368. margin: 3em 0 2em 2.75em;
  7369. position: absolute;
  7370. left: 0;
  7371. bottom: 6em;
  7372. }
  7373. }@media all and (min-width: 901px) {
  7374. .preorder-lead-in-module .big-lead-in-copy, .announcement-preorder .big-lead-in-copy {
  7375. margin-bottom: 4em;
  7376. }
  7377. }.preorder-lead-in-module .preorder-lead-in-submit-btn.standard-btn, .announcement-preorder .preorder-lead-in-submit-btn.standard-btn {
  7378. position: relative;
  7379. width: 100%;
  7380. max-height: 4em;
  7381. font-size: 0.75rem;
  7382. margin-bottom: 1em;
  7383. }
  7384. @media all and (min-width: 901px) {
  7385. .preorder-lead-in-module .preorder-lead-in-submit-btn.standard-btn, .announcement-preorder .preorder-lead-in-submit-btn.standard-btn {
  7386. width: auto;
  7387. margin: 0 6em 0 auto;
  7388. }
  7389. }@media all and (min-width: 1099px) {
  7390. .preorder-lead-in-module .preorder-lead-in-submit-btn.standard-btn, .announcement-preorder .preorder-lead-in-submit-btn.standard-btn {
  7391. min-width: 230px;
  7392. }
  7393. }.preorder-lead-in-module .preorder-lead-in-submit-btn.standard-btn:disabled, .announcement-preorder .preorder-lead-in-submit-btn.standard-btn:disabled {
  7394. cursor: default;
  7395. }
  7396. .preorder-lead-in-module .form-dropdown-container, .announcement-preorder .form-dropdown-container {
  7397. height: 3em;
  7398. background: #000 url("/assets/texture-noise@1x.png");
  7399. text-align: left;
  7400. }
  7401. @media all and (min-width: 901px) {
  7402. .preorder-lead-in-module .form-dropdown-container, .announcement-preorder .form-dropdown-container {
  7403. width: 200px;
  7404. margin-right: 1em;
  7405. }
  7406. }@media all and (min-width: 1099px) {
  7407. .preorder-lead-in-module .form-dropdown-container, .announcement-preorder .form-dropdown-container {
  7408. width: 230px;
  7409. }
  7410. }.preorder-lead-in-module .form-dropdown-container:before, .announcement-preorder .form-dropdown-container:before {
  7411. background: transparent;
  7412. border-top-color: #fff;
  7413. right: 1.5em;
  7414. top: 1.4em;
  7415. }
  7416. .preorder-lead-in-module .form-field-disabled, .announcement-preorder .form-field-disabled {
  7417. background-color: #82817f;
  7418. border-color: #82817f;
  7419. color: #fff;
  7420. opacity: .7;
  7421. }
  7422. .preorder-lead-in-module .form-dropdown-options-container, .announcement-preorder .form-dropdown-options-container {
  7423. background: transparent;
  7424. }
  7425. .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 {
  7426. background: url("/assets/texture-noise@1x.png");
  7427. height: auto;
  7428. display: block;
  7429. font-size: 0.75rem;
  7430. font-family: "futura-pt", sans-serif;
  7431. font-weight: bold;
  7432. letter-spacing: 0.1875rem;
  7433. padding: 1.4em 2em 1.2em;
  7434. text-transform: uppercase;
  7435. text-decoration: none;
  7436. color: #fff;
  7437. text-align: left;
  7438. }
  7439. .preorder-lead-in-module .form-dropdown-value-container, .announcement-preorder .form-dropdown-value-container {
  7440. text-align: center;
  7441. }
  7442. @media all and (min-width: 901px) {
  7443. .preorder-lead-in-module .form-dropdown-value-container, .announcement-preorder .form-dropdown-value-container {
  7444. text-align: left;
  7445. }
  7446. }.preorder-lead-in-module .form-dropdown-option, .announcement-preorder .form-dropdown-option {
  7447. background-color: #000;
  7448. margin: 0;
  7449. position: relative;
  7450. }
  7451. .preorder-lead-in-module .form-dropdown-option:before, .announcement-preorder .form-dropdown-option:before {
  7452. border-bottom: 1px solid #fff;
  7453. content: '';
  7454. display: block;
  7455. left: 0;
  7456. margin: 2.5em 10% 0;
  7457. bottom: 0;
  7458. width: 80%;
  7459. position: absolute;
  7460. }
  7461. .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 {
  7462. border-width: 3px;
  7463. }
  7464. .preorder-lead-in-module .form-dropdown-option:last-child:before, .announcement-preorder .form-dropdown-option:last-child:before {
  7465. border-bottom: none;
  7466. }
  7467. .preorder-active-select:after {
  7468. content: '';
  7469. display: block;
  7470. position: absolute;
  7471. right: 1em;
  7472. top: 2em;
  7473. border-top: 4px solid #fff;
  7474. border-left: 4px solid transparent;
  7475. border-right: 4px solid transparent;
  7476. }
  7477. .preorder-lead-in-aside, .preorder-form {
  7478. max-width: 22em;
  7479. margin: 0 auto;
  7480. }
  7481. @media all and (min-width: 901px) {
  7482. .preorder-lead-in-aside, .preorder-form {
  7483. max-height: 18em;
  7484. max-width: none;
  7485. text-align: right;
  7486. padding-bottom: 2em;
  7487. }
  7488. }@media all and (min-width: 901px) {
  7489. .preorder-lead-in-aside.preorder-lead-in-aside-content-large {
  7490. display: -ms-flexbox;
  7491. -ms-flex-direction: row;
  7492. -ms-flex: 6;
  7493. -webkit-flex: 6;
  7494. flex: 6;
  7495. max-height: none;
  7496. padding-left: 0;
  7497. padding-right: 0;
  7498. }
  7499. .preorder-lead-in-aside.preorder-lead-in-aside-content-large .preorder-lead-in-pack-art-large {
  7500. max-height: none;
  7501. height: auto;
  7502. }
  7503. }.preorder-lead-in-aside-content-small {
  7504. padding: 2em 2em 0;
  7505. }
  7506. @media all and (min-width: 901px) {
  7507. .preorder-lead-in-aside-content-small {
  7508. padding: 2em;
  7509. }
  7510. }.preorder-form {
  7511. padding: 0 2em;
  7512. }
  7513. @media all and (min-width: 901px) {
  7514. .preorder-form {
  7515. width: 100%;
  7516. max-width: none;
  7517. display: -ms-flexbox;
  7518. -ms-flex-align: start;
  7519. display: -webkit-flex;
  7520. display: flex;
  7521. padding: 0;
  7522. padding-left: 1em;
  7523. -webkit-justify-content: flex-start;
  7524. justify-content: flex-start;
  7525. }
  7526. }.preorder-form-field {
  7527. position: relative;
  7528. height: 4em;
  7529. }
  7530. .preorder-form-select-text {
  7531. display: block;
  7532. position: relative;
  7533. -moz-animation: buttonMouseOff 200ms ease-out;
  7534. -webkit-animation: buttonMouseOff 200ms ease-out;
  7535. animation: buttonMouseOff 200ms ease-out;
  7536. }
  7537. .preorder-lead-in-submit-btn:enabled:hover .preorder-form-select-text {
  7538. -moz-animation: buttonMouseOn 200ms ease-in-out;
  7539. -webkit-animation: buttonMouseOn 200ms ease-in-out;
  7540. animation: buttonMouseOn 200ms ease-in-out;
  7541. }
  7542. .apps-module {
  7543. max-width: 87.5rem;
  7544. margin: 0 auto 2rem;
  7545. padding: 0 1rem;
  7546. }
  7547. @media all and (min-width: 901px) {
  7548. .apps-module {
  7549. padding: 0 1rem;
  7550. }
  7551. }@media all and (min-width: 1099px) {
  7552. .apps-module {
  7553. padding: 0 9rem 4rem;
  7554. }
  7555. }.apps-page-header {
  7556. width: 100%;
  7557. max-width: 1102px;
  7558. left: 50%;
  7559. position: relative;
  7560. -moz-transform: translateX(-50%);
  7561. -ms-transform: translateX(-50%);
  7562. -webkit-transform: translateX(-50%);
  7563. transform: translateX(-50%);
  7564. }
  7565. .apps-module-sub-heading {
  7566. margin: 2em 1em;
  7567. }
  7568. @media all and (min-width: 901px) {
  7569. .apps-module-sub-heading {
  7570. margin: 3em 1em 0;
  7571. }
  7572. .apps-module:nth-of-type(2) .apps-module-sub-heading {
  7573. margin-left: 30rem;
  7574. }
  7575. }@media all and (min-width: 1099px) {
  7576. .apps-module: nth-of-type(2) .apps-module-sub-heading {
  7577. margin-left: 35rem;
  7578. }
  7579. }@media all and (min-width: 1280px) {
  7580. .apps-module-sub-heading {
  7581. margin: 6em 1em 0;
  7582. }
  7583. .apps-module:nth-of-type(2) .apps-module-sub-heading {
  7584. margin-left: 45rem;
  7585. }
  7586. }@media all and (min-width: 901px) {
  7587. .apps-module-desc-text {
  7588. margin-bottom: 5em;
  7589. width: 350px;
  7590. min-height: 12em;
  7591. }
  7592. .apps-module:nth-of-type(2) .apps-module-desc-text {
  7593. margin-left: 30rem;
  7594. }
  7595. }@media all and (min-width: 1099px) {
  7596. .apps-module: nth-of-type(2) .apps-module-desc-text {
  7597. margin-left: 35rem;
  7598. }
  7599. }@media all and (min-width: 1280px) {
  7600. .apps-module: nth-of-type(2) .apps-module-desc-text {
  7601. margin-left: 45rem;
  7602. }
  7603. }@media all and (min-width: 901px) {
  7604. .apps-module-device-images {
  7605. -moz-transform: scale(0.6, 0.6);
  7606. -ms-transform: scale(0.6, 0.6);
  7607. -webkit-transform: scale(0.6, 0.6);
  7608. transform: scale(0.6, 0.6);
  7609. position: absolute;
  7610. top: 4.25rem;
  7611. right: 5rem;
  7612. }
  7613. .apps-module:nth-of-type(2) .apps-module-device-images {
  7614. right: auto;
  7615. left: 0;
  7616. }
  7617. }@media all and (min-width: 1099px) {
  7618. .apps-module-device-images {
  7619. -moz-transform: scale(0.8, 0.8);
  7620. -ms-transform: scale(0.8, 0.8);
  7621. -webkit-transform: scale(0.8, 0.8);
  7622. transform: scale(0.8, 0.8);
  7623. }
  7624. }@media all and (min-width: 1280px) {
  7625. .apps-module-device-images {
  7626. -moz-transform: none;
  7627. -ms-transform: none;
  7628. -webkit-transform: none;
  7629. transform: none;
  7630. }
  7631. }.apps-module-device-image {
  7632. position: absolute;
  7633. right: -0.75em;
  7634. width: 100%;
  7635. top: -2.65em;
  7636. opacity: 0;
  7637. visibility: hidden;
  7638. -moz-transition: opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  7639. -o-transition: opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  7640. -webkit-transition: opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  7641. transition: opacity 400ms ease, visibility 400ms ease, z-index 401ms linear;
  7642. z-index: 1;
  7643. }
  7644. .apps-module-device-image.apps-module-device-image-active {
  7645. z-index: 2;
  7646. opacity: 1;
  7647. visibility: visible;
  7648. }
  7649. @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) {
  7650. .apps-module-device-image {
  7651. right: 2.25em;
  7652. width: 80%;
  7653. top: 2em;
  7654. }
  7655. }@media all and (min-width: 901px) {
  7656. .apps-module-device-image {
  7657. top: -3.05em;
  7658. right: 0;
  7659. width: 100%}
  7660. .apps-module:nth-of-type(2) .apps-module-device-image-phone-container .apps-module-device-image {
  7661. top: -2.9em;
  7662. }
  7663. .apps-module-device-image-tablet-container .apps-module-device-image {
  7664. top: -.75em;
  7665. right: 2.5em;
  7666. width: 90%}
  7667. }@media all and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  7668. .apps-module-device-image {
  7669. -moz-transform: scale(0.8, 0.8);
  7670. -ms-transform: scale(0.8, 0.8);
  7671. -webkit-transform: scale(0.8, 0.8);
  7672. transform: scale(0.8, 0.8);
  7673. top: 0;
  7674. }
  7675. .apps-module:nth-of-type(2) .apps-module-device-image-phone-container .apps-module-device-image {
  7676. top: 0;
  7677. }
  7678. .apps-module-device-image-tablet-container .apps-module-device-image {
  7679. top: -7em;
  7680. right: 0.5em;
  7681. width: 100%;
  7682. transform: none;
  7683. }
  7684. }.apps-module-device-image-phone-container {
  7685. background-image: url("/assets/apps-phone-bg.png");
  7686. width: 498px;
  7687. height: 264px;
  7688. position: relative;
  7689. }
  7690. .apps-module-device-image-phone-container:after {
  7691. background: url("/assets/texture-noise@1x.png");
  7692. content: '';
  7693. display: block;
  7694. position: absolute;
  7695. width: 100%;
  7696. height: 100%}
  7697. @media all and (min-width: 901px) {
  7698. .apps-module-device-image-phone-container {
  7699. position: absolute;
  7700. right: 14rem;
  7701. top: 16rem;
  7702. z-index: 2;
  7703. }
  7704. .apps-module:nth-of-type(2) .apps-module-device-image-phone-container {
  7705. right: auto;
  7706. }
  7707. }.apps-module-device-image-tablet-container {
  7708. background-image: url("/assets/apps-tablet-bg.png");
  7709. width: 928px;
  7710. height: 407px;
  7711. display: none;
  7712. }
  7713. .apps-module-device-image-tablet-container:after {
  7714. background: url("/assets/texture-noise@1x.png");
  7715. content: '';
  7716. display: block;
  7717. position: absolute;
  7718. width: 100%;
  7719. height: 100%}
  7720. @media all and (min-width: 901px) {
  7721. .apps-module-device-image-tablet-container {
  7722. display: block;
  7723. position: absolute;
  7724. width: 800px;
  7725. height: 320px;
  7726. right: -5rem;
  7727. z-index: 1;
  7728. background-size: 100%;
  7729. background-position: 0 -30px;
  7730. overflow-y: hidden;
  7731. }
  7732. .apps-module:nth-of-type(2) .apps-module-device-image-tablet-container {
  7733. right: auto;
  7734. }
  7735. }.apps-module-sub-heading-text-primary {
  7736. display: block;
  7737. font-family: "SouthernAire", serif;
  7738. font-size: 2.5em;
  7739. font-weight: normal;
  7740. letter-spacing: normal;
  7741. line-height: 0.45em;
  7742. text-transform: none;
  7743. }
  7744. .apps-module-sub-heading-text-secondary {
  7745. font-family: "futura-pt", sans-serif;
  7746. font-size: 2.25rem;
  7747. letter-spacing: normal;
  7748. line-height: 2.5625rem;
  7749. margin: 0;
  7750. }
  7751. .apps-module-download-heading {
  7752. font-family: "futura-pt", sans-serif;
  7753. font-size: 0.8em;
  7754. font-weight: bold;
  7755. letter-spacing: 0.1em;
  7756. text-transform: uppercase;
  7757. display: block;
  7758. width: 100%;
  7759. text-align: center;
  7760. margin: 0 0 2em;
  7761. }
  7762. @media all and (min-width: 901px) {
  7763. .apps-module-download-heading {
  7764. margin: 0 0 2em 1em;
  7765. text-align: left;
  7766. }
  7767. .apps-module:nth-of-type(2) .apps-module-download-heading {
  7768. margin-left: 30rem;
  7769. }
  7770. }@media all and (min-width: 1099px) {
  7771. .apps-module: nth-of-type(2) .apps-module-download-heading {
  7772. margin-left: 35rem;
  7773. }
  7774. }@media all and (min-width: 1280px) {
  7775. .apps-module: nth-of-type(2) .apps-module-download-heading {
  7776. margin-left: 45rem;
  7777. }
  7778. }.apps-module-download-btns {
  7779. display: -webkit-flex;
  7780. display: flex;
  7781. -webkit-flex-flow: row wrap;
  7782. flex-flow: row wrap;
  7783. -webkit-justify-content: space-around;
  7784. justify-content: space-around;
  7785. width: 18.5em;
  7786. margin: auto;
  7787. }
  7788. @media all and (min-width: 901px) {
  7789. .apps-module-download-btns {
  7790. -webkit-justify-content: space-between;
  7791. justify-content: space-between;
  7792. margin-left: 1em;
  7793. }
  7794. .apps-module:nth-of-type(2) .apps-module-download-btns {
  7795. margin-left: 30rem;
  7796. }
  7797. }@media all and (min-width: 1099px) {
  7798. .apps-module: nth-of-type(2) .apps-module-download-btns {
  7799. margin-left: 35rem;
  7800. }
  7801. }@media all and (min-width: 1280px) {
  7802. .apps-module: nth-of-type(2) .apps-module-download-btns {
  7803. margin-left: 45rem;
  7804. }
  7805. }.apps-module-download-btn {
  7806. width: 48%}
  7807. @media all and (min-width: 901px) {
  7808. .apps-module-download-btn {
  7809. max-width: 320px;
  7810. }
  7811. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement