6jarjar6

main.css

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