Advertisement
Guest User

Untitled

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