sonars

Untitled

May 22nd, 2020
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 82.58 KB | None | 0 0
  1. <html><head>
  2. <title></title>
  3.  
  4. <!-- Global site tag (gtag.js) - Google Analytics -->
  5. <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script><script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-142535036-1"></script>
  6. <script>
  7. window.dataLayer = window.dataLayer || [];
  8. function gtag(){dataLayer.push(arguments);}
  9. gtag('js', new Date());
  10. gtag('config', 'UA-142535036-1');
  11. </script>
  12.  
  13. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  14. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  15. <meta name="description" content="">
  16. <meta name="keywords" content="">
  17. <meta name="Robots" content="index, follow, all">
  18. <meta name="revisit-after" content="">
  19. <meta name="Author" content="">
  20. <meta name="viewport" content="width=device-width">
  21. <style type="text/css">@charset "UTF-8";
  22. /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
  23. /* Document
  24. ========================================================================== */
  25. /**
  26. * 1. Correct the line height in all browsers.
  27. * 2. Prevent adjustments of font size after orientation changes in iOS.
  28. */
  29. html {
  30. line-height: 1.15;
  31. /* 1 */
  32. -webkit-text-size-adjust: 100%;
  33. /* 2 */ }
  34.  
  35. /* Sections
  36. ========================================================================== */
  37. /**
  38. * Remove the margin in all browsers.
  39. */
  40. body {
  41. margin: 0; }
  42.  
  43. /**
  44. * Correct the font size and margin on `h1` elements within `section` and
  45. * `article` contexts in Chrome, Firefox, and Safari.
  46. */
  47. h1 {
  48. font-size: 2em;
  49. margin: 0.67em 0; }
  50.  
  51. /* Grouping content
  52. ========================================================================== */
  53. /**
  54. * 1. Add the correct box sizing in Firefox.
  55. * 2. Show the overflow in Edge and IE.
  56. */
  57. hr {
  58. box-sizing: content-box;
  59. /* 1 */
  60. height: 0;
  61. /* 1 */
  62. overflow: visible;
  63. /* 2 */ }
  64.  
  65. /**
  66. * 1. Correct the inheritance and scaling of font size in all browsers.
  67. * 2. Correct the odd `em` font sizing in all browsers.
  68. */
  69. pre {
  70. font-family: monospace, monospace;
  71. /* 1 */
  72. font-size: 1em;
  73. /* 2 */ }
  74.  
  75. /* Text-level semantics
  76. ========================================================================== */
  77. /**
  78. * Remove the gray background on active links in IE 10.
  79. */
  80. a {
  81. background-color: transparent; }
  82.  
  83. /**
  84. * 1. Remove the bottom border in Chrome 57-
  85. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  86. */
  87. abbr[title] {
  88. border-bottom: none;
  89. /* 1 */
  90. text-decoration: underline;
  91. /* 2 */
  92. text-decoration: underline dotted;
  93. /* 2 */ }
  94.  
  95. /**
  96. * Add the correct font weight in Chrome, Edge, and Safari.
  97. */
  98. b,
  99. strong {
  100. font-weight: bolder; }
  101.  
  102. /**
  103. * 1. Correct the inheritance and scaling of font size in all browsers.
  104. * 2. Correct the odd `em` font sizing in all browsers.
  105. */
  106. code,
  107. kbd,
  108. samp {
  109. font-family: monospace, monospace;
  110. /* 1 */
  111. font-size: 1em;
  112. /* 2 */ }
  113.  
  114. /**
  115. * Add the correct font size in all browsers.
  116. */
  117. small {
  118. font-size: 80%; }
  119.  
  120. /**
  121. * Prevent `sub` and `sup` elements from affecting the line height in
  122. * all browsers.
  123. */
  124. sub,
  125. sup {
  126. font-size: 75%;
  127. line-height: 0;
  128. position: relative;
  129. vertical-align: baseline; }
  130.  
  131. sub {
  132. bottom: -0.25em; }
  133.  
  134. sup {
  135. top: -0.5em; }
  136.  
  137. /* Embedded content
  138. ========================================================================== */
  139. /**
  140. * Remove the border on images inside links in IE 10.
  141. */
  142. img {
  143. border-style: none; }
  144.  
  145. /* Forms
  146. ========================================================================== */
  147. /**
  148. * 1. Change the font styles in all browsers.
  149. * 2. Remove the margin in Firefox and Safari.
  150. */
  151. button,
  152. input,
  153. optgroup,
  154. select,
  155. textarea {
  156. font-family: inherit;
  157. /* 1 */
  158. font-size: 100%;
  159. /* 1 */
  160. line-height: 1.15;
  161. /* 1 */
  162. margin: 0;
  163. /* 2 */ }
  164.  
  165. /**
  166. * Show the overflow in IE.
  167. * 1. Show the overflow in Edge.
  168. */
  169. button,
  170. input {
  171. /* 1 */
  172. overflow: visible; }
  173.  
  174. /**
  175. * Remove the inheritance of text transform in Edge, Firefox, and IE.
  176. * 1. Remove the inheritance of text transform in Firefox.
  177. */
  178. button,
  179. select {
  180. /* 1 */
  181. text-transform: none; }
  182.  
  183. /**
  184. * Correct the inability to style clickable types in iOS and Safari.
  185. */
  186. button,
  187. [type="button"],
  188. [type="reset"],
  189. [type="submit"] {
  190. -webkit-appearance: button; }
  191.  
  192. /**
  193. * Remove the inner border and padding in Firefox.
  194. */
  195. button::-moz-focus-inner,
  196. [type="button"]::-moz-focus-inner,
  197. [type="reset"]::-moz-focus-inner,
  198. [type="submit"]::-moz-focus-inner {
  199. border-style: none;
  200. padding: 0; }
  201.  
  202. /**
  203. * Restore the focus styles unset by the previous rule.
  204. */
  205. button:-moz-focusring,
  206. [type="button"]:-moz-focusring,
  207. [type="reset"]:-moz-focusring,
  208. [type="submit"]:-moz-focusring {
  209. outline: 1px dotted ButtonText; }
  210.  
  211. /**
  212. * Correct the padding in Firefox.
  213. */
  214. fieldset {
  215. padding: 0.35em 0.75em 0.625em; }
  216.  
  217. /**
  218. * 1. Correct the text wrapping in Edge and IE.
  219. * 2. Correct the color inheritance from `fieldset` elements in IE.
  220. * 3. Remove the padding so developers are not caught out when they zero out
  221. * `fieldset` elements in all browsers.
  222. */
  223. legend {
  224. box-sizing: border-box;
  225. /* 1 */
  226. color: inherit;
  227. /* 2 */
  228. display: table;
  229. /* 1 */
  230. max-width: 100%;
  231. /* 1 */
  232. padding: 0;
  233. /* 3 */
  234. white-space: normal;
  235. /* 1 */ }
  236.  
  237. /**
  238. * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  239. */
  240. progress {
  241. vertical-align: baseline; }
  242.  
  243. /**
  244. * Remove the default vertical scrollbar in IE 10+.
  245. */
  246. textarea {
  247. overflow: auto; }
  248.  
  249. /**
  250. * 1. Add the correct box sizing in IE 10.
  251. * 2. Remove the padding in IE 10.
  252. */
  253. [type="checkbox"],
  254. [type="radio"] {
  255. box-sizing: border-box;
  256. /* 1 */
  257. padding: 0;
  258. /* 2 */ }
  259.  
  260. /**
  261. * Correct the cursor style of increment and decrement buttons in Chrome.
  262. */
  263. [type="number"]::-webkit-inner-spin-button,
  264. [type="number"]::-webkit-outer-spin-button {
  265. height: auto; }
  266.  
  267. /**
  268. * 1. Correct the odd appearance in Chrome and Safari.
  269. * 2. Correct the outline style in Safari.
  270. */
  271. [type="search"] {
  272. -webkit-appearance: textfield;
  273. /* 1 */
  274. outline-offset: -2px;
  275. /* 2 */ }
  276.  
  277. /**
  278. * Remove the inner padding in Chrome and Safari on macOS.
  279. */
  280. [type="search"]::-webkit-search-decoration {
  281. -webkit-appearance: none; }
  282.  
  283. /**
  284. * 1. Correct the inability to style clickable types in iOS and Safari.
  285. * 2. Change font properties to `inherit` in Safari.
  286. */
  287. ::-webkit-file-upload-button {
  288. -webkit-appearance: button;
  289. /* 1 */
  290. font: inherit;
  291. /* 2 */ }
  292.  
  293. /* Interactive
  294. ========================================================================== */
  295. /*
  296. * Add the correct display in Edge, IE 10+, and Firefox.
  297. */
  298. details {
  299. display: block; }
  300.  
  301. /*
  302. * Add the correct display in all browsers.
  303. */
  304. summary {
  305. display: list-item; }
  306.  
  307. /* Misc
  308. ========================================================================== */
  309. /**
  310. * Add the correct display in IE 10+.
  311. */
  312. template {
  313. display: none; }
  314.  
  315. /**
  316. * Add the correct display in IE 10.
  317. */
  318. [hidden] {
  319. display: none; }
  320.  
  321. img {
  322. max-width: 100%; }
  323.  
  324. /* http://meyerweb.com/eric/tools/css/reset/
  325. v2.0 | 20110126
  326. License: none (public domain)
  327. */
  328. html, body, div, span, applet, object, iframe,
  329. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  330. a, abbr, acronym, address, big, cite, code,
  331. del, dfn, em, img, ins, kbd, q, s, samp,
  332. small, strike, strong, sub, sup, tt, var,
  333. b, u, i, center,
  334. dl, dt, dd, ol, ul, li,
  335. fieldset, form, label, legend,
  336. table, caption, tbody, tfoot, thead, tr, th, td,
  337. article, aside, canvas, details, embed,
  338. figure, figcaption, footer, header, hgroup,
  339. menu, nav, output, ruby, section, summary,
  340. time, mark, audio, video {
  341. margin: 0;
  342. padding: 0;
  343. border: 0;
  344. font-size: 100%;
  345. font: inherit;
  346. vertical-align: baseline; }
  347.  
  348. /* HTML5 display-role reset for older browsers */
  349. article, aside, details, figcaption, figure,
  350. footer, header, hgroup, menu, nav, section {
  351. display: block; }
  352.  
  353. body {
  354. line-height: 1; }
  355.  
  356. ol, ul {
  357. list-style: none; }
  358.  
  359. blockquote, q {
  360. quotes: none; }
  361.  
  362. blockquote:before, blockquote:after,
  363. q:before, q:after {
  364. content: '';
  365. content: none; }
  366.  
  367. table {
  368. border-collapse: collapse;
  369. border-spacing: 0; }
  370.  
  371. button {
  372. padding: 0;
  373. background: none; }
  374.  
  375. *:focus {
  376. outline: none; }
  377.  
  378. @font-face {
  379. font-family: 'Lato';
  380. src: url(/assets/fonts/Lato-Light.woff2) format("woff2"), url(/assets/fonts/Lato-Light.woff) format("woff");
  381. font-weight: 300;
  382. font-style: normal; }
  383.  
  384. @font-face {
  385. font-family: 'Lato';
  386. src: url(/assets/fonts/Lato-Regular.woff2) format("woff2"), url(/assets/fonts/Lato-Regular.woff) format("woff");
  387. font-weight: normal;
  388. font-style: normal; }
  389.  
  390. @font-face {
  391. font-family: 'Lato';
  392. src: url(/assets/fonts/Lato-Bold.woff2) format("woff2"), url(/assets/fonts/Lato-Bold.woff) format("woff");
  393. font-weight: bold;
  394. font-style: normal; }
  395.  
  396. @font-face {
  397. font-family: 'Lato';
  398. src: url(/assets/fonts/Lato-Black.woff2) format("woff2"), url(/assets/fonts/Lato-Black.woff) format("woff");
  399. font-weight: 900;
  400. font-style: normal; }
  401.  
  402. @font-face {
  403. font-family: 'Integral CF';
  404. src: url(/assets/fonts/IntegralCF-Regular.woff2) format("woff2"), url(/assets/fonts/IntegralCF-Regular.woff) format("woff");
  405. font-weight: normal;
  406. font-style: normal; }
  407.  
  408. @font-face {
  409. font-family: 'Integral CF';
  410. src: url(/assets/fonts/IntegralCF-Medium.woff2) format("woff2"), url(/assets/fonts/IntegralCF-Medium.woff) format("woff");
  411. font-weight: 500;
  412. font-style: normal; }
  413.  
  414. @font-face {
  415. font-family: 'Integral CF';
  416. src: url(/assets/fonts/IntegralCF-Bold.woff2) format("woff2"), url(/assets/fonts/IntegralCF-Bold.woff) format("woff");
  417. font-weight: bold;
  418. font-style: normal; }
  419.  
  420. @font-face {
  421. font-family: 'Digital-7';
  422. src: url(/assets/fonts/Digital-7.woff2) format("woff2"), url(/assets/fonts/Digital-7.woff) format("woff");
  423. font-weight: normal;
  424. font-style: normal; }
  425.  
  426. html {
  427. font: 14px/1.4 "Lato", Arial, sans-serif;
  428. color: #fff;
  429. background: #060d20;
  430. height: 100%;
  431. overflow-x: hidden;
  432. overflow-y: scroll; }
  433.  
  434. body {
  435. height: 100%; }
  436.  
  437. a {
  438. text-decoration: none;
  439. color: inherit; }
  440.  
  441. h1,
  442. h2,
  443. h2,
  444. h4,
  445. h5 {
  446. font-family: "Integral CF", Arial, sans-serif;
  447. font-weight: bold;
  448. color: #fff;
  449. line-height: 1; }
  450.  
  451. h1 {
  452. font-size: 2.14286rem;
  453. transform: skewX(-10deg);
  454. transform-origin: 0 100%; }
  455. @media (min-width: 768px) {
  456. h1 {
  457. font-size: 3.57143rem; } }
  458.  
  459. button {
  460. border: 0;
  461. outline: none;
  462. cursor: pointer;
  463. color: inherit; }
  464.  
  465. p {
  466. line-height: inherit; }
  467.  
  468. html {
  469. background: #000; }
  470.  
  471. h1,
  472. h2,
  473. h3,
  474. h4,
  475. h5 {
  476. transform: none; }
  477.  
  478. html {
  479. scroll-behavior: smooth; }
  480.  
  481. .main {
  482. padding: 20px;
  483. overflow: hidden; }
  484.  
  485. .main__content {
  486. position: relative;
  487. transform: translateX(0);
  488. transition: transform 0.4s; }
  489. .body--menu-opened .main__content {
  490. transform: translateX(-20%); }
  491.  
  492. .menu {
  493. position: fixed;
  494. top: 0;
  495. right: 0;
  496. bottom: 0;
  497. left: 0;
  498. z-index: 100;
  499. transition: visibility 0.4s;
  500. visibility: hidden;
  501. will-change: transform; }
  502. @media (min-width: 768px) {
  503. .menu {
  504. visibility: visible;
  505. bottom: auto; } }
  506. .body--menu-opened .menu {
  507. visibility: visible; }
  508.  
  509. .menu__logo {
  510. display: none; }
  511. @media (min-width: 768px) {
  512. .menu__logo {
  513. display: flex;
  514. align-items: center; } }
  515.  
  516. .menu__close {
  517. width: 40px;
  518. height: 40px;
  519. display: flex;
  520. flex: 0 0 auto;
  521. justify-content: center;
  522. align-items: center;
  523. margin: -10px -10px 20px auto; }
  524. @media (min-width: 768px) {
  525. .menu__close {
  526. display: none; } }
  527. .menu__close::before {
  528. font-size: 2rem;
  529. content: '\2715'; }
  530.  
  531. .menu__wrapper {
  532. width: 90vw;
  533. margin: 0 0 0 auto;
  534. padding: 30px;
  535. height: 100%;
  536. background: #000120;
  537. color: #fff;
  538. text-align: right;
  539. display: flex;
  540. flex-direction: column;
  541. box-sizing: border-box;
  542. box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  543. transform: translateX(100%) translateX(20px);
  544. transition: transform 0.4s; }
  545. @media (min-width: 768px) {
  546. .menu__wrapper {
  547. transform: none;
  548. flex-direction: row;
  549. background: none;
  550. box-shadow: none;
  551. width: auto;
  552. margin: auto;
  553. padding: 0 30px;
  554. max-width: 1400px; } }
  555. .body--menu-opened .menu__wrapper {
  556. transform: translateX(0); }
  557.  
  558. .menu__overlay {
  559. position: fixed;
  560. top: 0;
  561. right: 0;
  562. bottom: 0;
  563. left: 0;
  564. background: rgba(0, 0, 0, 0.6);
  565. z-index: -1;
  566. opacity: 0;
  567. transition: opacity 0.4s; }
  568. @media (min-width: 768px) {
  569. .menu__overlay {
  570. display: none; } }
  571. .body--menu-opened .menu__overlay {
  572. opacity: 1; }
  573.  
  574. .menu__list {
  575. font-size: 1.28571rem;
  576. flex: 1 0 auto;
  577. display: flex;
  578. flex-direction: column;
  579. padding: 40px 0 0;
  580. position: relative; }
  581. @media (min-width: 768px) {
  582. .menu__list {
  583. font-size: 1rem;
  584. max-width: 1350px;
  585. margin: 0 auto;
  586. padding: 25px 0;
  587. flex-direction: row;
  588. justify-content: flex-end;
  589. align-items: center; }
  590. .menu__list::before {
  591. display: block;
  592. content: '';
  593. position: absolute;
  594. bottom: 0;
  595. right: -30px;
  596. left: 20%;
  597. height: 1px;
  598. background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.2) 100%); } }
  599.  
  600. .menu__item {
  601. font-family: "Integral CF"; }
  602. * + .menu__item {
  603. margin-top: 1.4em; }
  604. @media (min-width: 768px) {
  605. * + .menu__item {
  606. margin-top: 0;
  607. margin-left: 40px; } }
  608. @media (min-width: 1024px) {
  609. * + .menu__item {
  610. margin-left: 60px; } }
  611. .menu__item--login {
  612. margin-top: auto; }
  613.  
  614. .menu__link {
  615. display: inline-block;
  616. transform: skewX(-10deg);
  617. margin: 0 0 3px; }
  618.  
  619. .header {
  620. position: relative;
  621. padding: 110% 0 50px;
  622. max-width: 1600px;
  623. margin: 0 auto; }
  624. @media (min-width: 768px) {
  625. .header {
  626. padding-top: 770px; } }
  627.  
  628. .header__background {
  629. background-image: url(/assets/gfx/dziki-face.jpg);
  630. background-repeat: no-repeat;
  631. background-size: 100% auto;
  632. background-position: 55% 0;
  633. position: absolute;
  634. height: 700px;
  635. top: -20px;
  636. left: -20px;
  637. right: -20px;
  638. z-index: -1; }
  639. @media (min-width: 768px) {
  640. .header__background {
  641. background-image: url(/assets/gfx/dziki-face-desktop.jpg);
  642. background-repeat: no-repeat;
  643. width: 1750px;
  644. height: 1136px;
  645. left: 0;
  646. right: auto;
  647. background-position: 50% 0;
  648. margin-left: -50px; } }
  649.  
  650. @media (min-width: 768px) {
  651. .header__box {
  652. position: absolute;
  653. top: -20px;
  654. left: -80px;
  655. z-index: 5;
  656. padding: 215px 130px 0 100px; }
  657. .header__box::before {
  658. background-image: url(/assets/gfx/title-background.png);
  659. background-repeat: no-repeat;
  660. content: '';
  661. display: block;
  662. position: absolute;
  663. top: 0;
  664. left: 0;
  665. width: 774px;
  666. height: 643px;
  667. z-index: -1; } }
  668.  
  669. .header__headline {
  670. position: relative;
  671. text-align: center;
  672. margin: 0 40px; }
  673. @media (min-width: 768px) {
  674. .header__headline {
  675. margin-bottom: 75px; } }
  676.  
  677. .header__headline-lights {
  678. background-image: url(/assets/gfx/dziki-trener-lights.png);
  679. background-repeat: no-repeat;
  680. position: absolute;
  681. top: 0;
  682. right: 0;
  683. bottom: 0;
  684. left: 0;
  685. background-size: contain;
  686. background-position: 50% 50%; }
  687.  
  688. .header__headline-eye {
  689. background-image: url(/assets/gfx/dziki-trener-eye.png);
  690. background-repeat: no-repeat;
  691. position: absolute;
  692. width: 5%;
  693. height: 12%;
  694. background-size: contain;
  695. transform-origin: 50% 0%;
  696. animation: infinite eye-anim 5s ease; }
  697.  
  698. @keyframes eye-anim {
  699. 0% {
  700. transform: scaleX(0.3) scaleY(1.2); }
  701. 25% {
  702. transform: scaleX(0.3) scaleY(1.2); }
  703. 50% {
  704. transform: scaleX(1.3) scaleY(1.2); }
  705. 65% {
  706. transform: scaleX(0.3) scaleY(1.2); }
  707. 100% {
  708. transform: scaleX(0.3) scaleY(1.2); } }
  709. .header__headline-eye--left {
  710. top: 27%;
  711. left: 19.5%; }
  712. .header__headline-eye--right {
  713. top: 27%;
  714. left: 69.25%; }
  715.  
  716. .header__particles {
  717. position: absolute;
  718. top: 0;
  719. right: 0;
  720. bottom: 0;
  721. left: 0;
  722. z-index: 6; }
  723.  
  724. .header__logo {
  725. max-width: 160px;
  726. display: block;
  727. margin: 0 auto 15px; }
  728. @media (min-width: 768px) {
  729. .header__logo {
  730. display: none; } }
  731.  
  732. .header-quote {
  733. font-size: 1.14286rem;
  734. margin: 2em 0 0;
  735. text-align: center;
  736. font-style: italic;
  737. line-height: 1.4; }
  738. @media (min-width: 768px) {
  739. .header-quote {
  740. font-size: 1.71429rem;
  741. display: flex;
  742. flex-direction: column;
  743. justify-content: center;
  744. height: 140px; } }
  745.  
  746. .header-quote__second-line {
  747. font-size: 1rem;
  748. display: block; }
  749. @media (min-width: 768px) {
  750. .header-quote__second-line {
  751. font-size: 1.42857rem; } }
  752.  
  753. .header-quote__author {
  754. text-align: center;
  755. margin: .6em 0 0; }
  756. .header-quote__author::before {
  757. content: '';
  758. display: inline-block;
  759. width: 10px;
  760. height: 1px;
  761. background: currentColor;
  762. vertical-align: middle;
  763. margin: 0 .5em 0 0; }
  764. @media (min-width: 768px) {
  765. .header-quote__author {
  766. font-size: 1rem;
  767. text-align: right;
  768. margin-right: 150px; } }
  769.  
  770. .header-cta {
  771. margin: 3em 0 0;
  772. text-align: center;
  773. padding-top: 25px; }
  774.  
  775. .footer {
  776. color: #7a859b;
  777. padding: 0 20px 20px;
  778. text-align: center;
  779. max-width: 1140px;
  780. margin: 0 auto; }
  781. @media (min-width: 768px) {
  782. .footer {
  783. font-size: 0.78571rem;
  784. text-transform: uppercase;
  785. display: flex;
  786. justify-content: space-between;
  787. align-items: center; } }
  788.  
  789. .footer__menu-item {
  790. position: relative;
  791. padding: 0 10px 0 0;
  792. margin: 3px 10px 0 0;
  793. display: inline-block; }
  794. @media (min-width: 768px) {
  795. .footer__menu-item {
  796. margin-top: 0; } }
  797. .footer__menu-item:last-child::before {
  798. display: none; }
  799. .footer__menu-item::before {
  800. content: '';
  801. display: block;
  802. height: .8em;
  803. width: 1px;
  804. background: currentColor;
  805. position: absolute;
  806. top: 50%;
  807. right: 0;
  808. margin: -.4em 0 0;
  809. opacity: .5; }
  810.  
  811. .footer__menu-link {
  812. display: inline-block;
  813. position: relative;
  814. padding: 4px; }
  815. @media (pointer: fine) {
  816. .footer__menu-link {
  817. transition: color .4s; }
  818. .footer__menu-link::before {
  819. content: '';
  820. display: block;
  821. height: 1px;
  822. position: absolute;
  823. top: 100%;
  824. left: 4px;
  825. right: 4px;
  826. background: currentColor;
  827. transform-origin: 0 0;
  828. transform: scaleX(0);
  829. transition: transform .3s; }
  830. .footer__menu-link:hover {
  831. color: #fff; }
  832. .footer__menu-link:hover::before {
  833. transform: scaleX(1); } }
  834.  
  835. .footer__copy {
  836. margin: 1.5em 0 0; }
  837. @media (min-width: 768px) {
  838. .footer__copy {
  839. margin-top: 0; } }
  840.  
  841. .mobile-bar {
  842. position: fixed;
  843. top: 0;
  844. left: 0;
  845. right: 0;
  846. height: 55px;
  847. background: rgba(0, 0, 0, 0.6);
  848. z-index: 80;
  849. padding: 0 8px;
  850. display: flex;
  851. align-items: center;
  852. font-family: "Integral CF"; }
  853. @media (min-width: 768px) {
  854. .mobile-bar {
  855. display: none; } }
  856.  
  857. .mobile-bar__enroll {
  858. margin: 0; }
  859.  
  860. .toggle-menu {
  861. width: 40px;
  862. height: 40px;
  863. padding: 10px;
  864. display: inline-block;
  865. position: absolute;
  866. top: 7px;
  867. right: 10px;
  868. z-index: 50; }
  869. @media (min-width: 768px) {
  870. .toggle-menu {
  871. display: none; } }
  872.  
  873. .toggle-menu__line {
  874. display: block;
  875. height: 3px;
  876. background: #fff; }
  877. * + .toggle-menu__line {
  878. margin-top: 4px; }
  879.  
  880. .button {
  881. font-size: 0.85714rem;
  882. display: inline-block;
  883. position: relative;
  884. z-index: 1;
  885. padding: .8em 1.2em .9em;
  886. font-family: "Integral CF";
  887. min-width: 110px;
  888. color: #fff; }
  889. .button::before {
  890. position: absolute;
  891. top: 0;
  892. left: 0;
  893. bottom: 0;
  894. right: 0;
  895. content: '';
  896. display: block;
  897. color: #fff;
  898. background: #001698;
  899. z-index: -2;
  900. transition: transform .4s, background .4s; }
  901. .button::after {
  902. position: absolute;
  903. top: 0;
  904. left: 0;
  905. bottom: 0;
  906. right: 0;
  907. content: '';
  908. display: block;
  909. background: #0025fe;
  910. z-index: -1;
  911. opacity: 0;
  912. transition: transform .4s, opacity .4s;
  913. transform: scaleX(0); }
  914. @media (pointer: fine) {
  915. .button:hover::after {
  916. transform: scaleX(1);
  917. opacity: 1; } }
  918. .button:disabled::before {
  919. background: #111; }
  920. .button--primary::before {
  921. background-color: #b00; }
  922. @media (pointer: fine) {
  923. .button--primary::after {
  924. background: #ff2222; } }
  925. .button--secondary::before {
  926. background-color: #19b200; }
  927. @media (pointer: fine) {
  928. .button--secondary::after {
  929. background: #20e500; } }
  930. .button--light::before {
  931. background-color: #1a8bd8; }
  932. @media (pointer: fine) {
  933. .button--light::after {
  934. background: #0f507d; } }
  935. .button--big {
  936. font-size: 1.07143rem;
  937. padding: 1em 1.6em 1.1em;
  938. min-width: 160px; }
  939. .button--bigger {
  940. font-size: 1.71429rem;
  941. padding: 1.2em 1.8em 1.3em;
  942. min-width: 220px; }
  943. .button--skewed-left::before {
  944. transform: skewX(10deg); }
  945. .button--skewed-left::after {
  946. transform: scaleX(0) skewX(10deg); }
  947. @media (pointer: fine) {
  948. .button--skewed-left:hover::after {
  949. transform: scaleX(1) skewX(10deg); } }
  950. .button--skewed-right::before {
  951. transform: skewX(-10deg); }
  952. .button--skewed-right::after {
  953. transform: scaleX(0) skewX(-10deg); }
  954. @media (pointer: fine) {
  955. .button--skewed-right:hover::after {
  956. transform: scaleX(1) skewX(-10deg); } }
  957.  
  958. .button__label {
  959. display: inline-block;
  960. transform: skewX(-10deg); }
  961.  
  962. .login-button {
  963. font-size: 1rem;
  964. position: relative;
  965. z-index: 1;
  966. color: #ffd02a;
  967. padding: .9em 1.4em;
  968. margin: 0;
  969. color: #fff;
  970. display: inline-block;
  971. margin: 0 0 3px;
  972. text-transform: uppercase; }
  973. @media (min-width: 768px) {
  974. .login-button {
  975. transform: skewX(-10deg); } }
  976. .login-button + .login-button {
  977. margin: 15px 0 0; }
  978. @media (min-width: 768px) {
  979. .login-button + .login-button {
  980. margin: 0 0 0 15px; } }
  981.  
  982. .login-button__background {
  983. position: absolute;
  984. top: 1px;
  985. left: 0;
  986. right: 0;
  987. bottom: 0;
  988. border: 2px solid #fffc79;
  989. z-index: -1; }
  990. .login-button__background::before, .login-button__background::after {
  991. content: '';
  992. display: block;
  993. position: absolute;
  994. left: 15%;
  995. right: 20%;
  996. height: 2px;
  997. background: linear-gradient(to right, #ff5d44 61%, #ff8c4b 62%, #ff8c4b);
  998. z-index: 2; }
  999. .login-button__background::before {
  1000. top: -2px; }
  1001. .login-button__background::after {
  1002. bottom: -2px; }
  1003. .login-button--alternate .login-button__background {
  1004. border: 2px solid #188cd9; }
  1005. .login-button--alternate .login-button__background::before, .login-button--alternate .login-button__background::after {
  1006. background: linear-gradient(to right, #0068af 61%, #76c7ff 62%, #76c7ff); }
  1007.  
  1008. .terms {
  1009. max-width: 1140px;
  1010. margin: 100px auto; }
  1011.  
  1012. .terms-title {
  1013. text-align: center;
  1014. padding-bottom: 15px; }
  1015.  
  1016. .terms-section {
  1017. margin: 25px 0; }
  1018.  
  1019. .terms-section__paragraph {
  1020. text-align: center;
  1021. padding-top: 15px;
  1022. padding-bottom: 5px; }
  1023.  
  1024. .terms-section__title {
  1025. padding-bottom: 15px; }
  1026. .terms-section__title:not(.terms-section__title--left) {
  1027. text-align: center; }
  1028.  
  1029. .terms-section__bullets {
  1030. line-height: 1.25em; }
  1031.  
  1032. .terms-section__bullets li {
  1033. padding-top: 5px;
  1034. padding-bottom: 5px; }
  1035.  
  1036. .terms-section__bullets--sub {
  1037. margin-left: 30px; }
  1038.  
  1039. .cookies-disclaimer {
  1040. position: fixed;
  1041. background: #161b2d;
  1042. color: #abb5da;
  1043. max-width: 800px;
  1044. bottom: 30px;
  1045. z-index: 10;
  1046. padding: 15px 50px 15px 25px;
  1047. border-radius: 10px;
  1048. left: 0;
  1049. right: 0;
  1050. margin: 0 auto;
  1051. line-height: 1.25em; }
  1052.  
  1053. .cookies-disclaimer__close {
  1054. background-image: url(/assets/gfx/close.png);
  1055. background-repeat: no-repeat;
  1056. width: 40px;
  1057. height: 40px;
  1058. transform: scale(0.5);
  1059. position: absolute;
  1060. right: 0px;
  1061. top: 5px;
  1062. cursor: pointer; }
  1063. .cookies-disclaimer__close:hover {
  1064. background-image: url(/assets/gfx/close-active.png);
  1065. background-repeat: no-repeat; }
  1066.  
  1067. .cookies-disclaimer a {
  1068. color: #0398fe; }
  1069. .cookies-disclaimer a:hover {
  1070. color: #fff; }
  1071.  
  1072. .modal {
  1073. position: fixed;
  1074. top: 0;
  1075. left: 0;
  1076. right: 0;
  1077. bottom: 0;
  1078. display: flex;
  1079. padding: 20px;
  1080. background: rgba(0, 0, 0, 0.6);
  1081. z-index: 1000; }
  1082.  
  1083. .modal__content {
  1084. font-size: 1.28571rem;
  1085. margin: auto;
  1086. max-width: 380px;
  1087. padding: 30px;
  1088. background: #151c2f;
  1089. line-height: 1.4;
  1090. border-radius: 10px; }
  1091. .modal__content * + p {
  1092. font-style: italic;
  1093. margin: 1em 0 0 0; }
  1094.  
  1095. .modal__footer {
  1096. margin: 40px 0 0;
  1097. padding: 0 0 10px;
  1098. text-align: center; }
  1099.  
  1100. .discount-box {
  1101. background-image: url(/assets/gfx/discount-box.png);
  1102. background-repeat: no-repeat;
  1103. background-position: 50% 0;
  1104. text-align: center;
  1105. padding: 55px 30px 20px;
  1106. margin: 0 -20px;
  1107. min-height: 530px;
  1108. box-sizing: border-box; }
  1109. @media (min-width: 768px) {
  1110. .discount-box {
  1111. background-image: url(/assets/gfx/discount-box-desktop.png);
  1112. background-repeat: no-repeat;
  1113. max-width: 1171px;
  1114. min-height: 254px;
  1115. padding: 42px 30px 20px;
  1116. margin: 0 auto 30px; } }
  1117.  
  1118. .discount-box__header {
  1119. font-size: 2rem;
  1120. color: #ee0000;
  1121. margin: 0 0 .8em;
  1122. font-family: inherit;
  1123. text-transform: uppercase;
  1124. font-weight: 900; }
  1125. @media (min-width: 768px) {
  1126. .discount-box__header {
  1127. font-size: 2.42857rem; } }
  1128.  
  1129. .discount-box__subheader {
  1130. display: none;
  1131. margin: 0 0 10px; }
  1132. @media (min-width: 768px) {
  1133. .discount-box__subheader {
  1134. font-size: 0.85714rem;
  1135. display: block;
  1136. opacity: .8;
  1137. text-transform: uppercase; } }
  1138.  
  1139. .discount-box__plan-name {
  1140. font-size: 2rem;
  1141. text-transform: uppercase;
  1142. font-family: "Integral CF";
  1143. margin: 0 0 1em; }
  1144. @media (min-width: 768px) {
  1145. .discount-box__plan-name {
  1146. text-align: left; } }
  1147. .discount-box__plan-name span {
  1148. font-size: .7em;
  1149. display: block;
  1150. margin: .1em 0 0; }
  1151.  
  1152. @media (min-width: 768px) {
  1153. .discount-box__sections {
  1154. display: flex;
  1155. justify-content: center; } }
  1156.  
  1157. @media (min-width: 768px) {
  1158. .discount-box__section {
  1159. padding: 0 30px;
  1160. position: relative; }
  1161. .discount-box__section::before {
  1162. content: '';
  1163. display: block;
  1164. position: absolute;
  1165. left: 0;
  1166. top: 30px;
  1167. height: 50px;
  1168. width: 1px;
  1169. background: currentColor;
  1170. opacity: .1; }
  1171. .discount-box__section:first-child::before {
  1172. display: none; } }
  1173.  
  1174. .discount-box__section--duration::after {
  1175. content: '';
  1176. display: block;
  1177. height: 1px;
  1178. background: currentColor;
  1179. opacity: .1;
  1180. margin: 30px 0; }
  1181. @media (min-width: 768px) {
  1182. .discount-box__section--duration::after {
  1183. display: none; } }
  1184.  
  1185. @media (min-width: 768px) {
  1186. .discount-box__section--plan {
  1187. padding-top: 30px;
  1188. padding-right: 70px; } }
  1189.  
  1190. .discount-box__section--enroll {
  1191. margin: 35px 0 0; }
  1192. @media (min-width: 768px) {
  1193. .discount-box__section--enroll {
  1194. margin: 0;
  1195. padding-top: 30px;
  1196. padding-left: 70px; } }
  1197.  
  1198. .discount-box__price {
  1199. font-size: 3.57143rem;
  1200. font-weight: 700; }
  1201.  
  1202. .discount-box__period {
  1203. font-size: 1.42857rem; }
  1204.  
  1205. .discount-box__total {
  1206. margin: .5em 0 0;
  1207. opacity: .8; }
  1208.  
  1209. .plans {
  1210. margin: 0 auto 50px;
  1211. position: relative;
  1212. z-index: 6; }
  1213.  
  1214. .plans__header {
  1215. text-align: center;
  1216. margin: 40px 0 30px; }
  1217. @media (min-width: 768px) {
  1218. .plans__header {
  1219. position: absolute;
  1220. z-index: 5;
  1221. top: 350px;
  1222. right: 20px; } }
  1223. @media (min-width: 1366px) {
  1224. .plans__header {
  1225. left: 50%;
  1226. top: 170px;
  1227. right: auto;
  1228. margin: 0 0 0 170px; } }
  1229.  
  1230. .plans-background__trainer, .plans-background__bear, .plans-background__forest, .plans-background__moon, .plans-background__stars {
  1231. position: absolute;
  1232. pointer-events: none;
  1233. will-change: transform;
  1234. left: 50%;
  1235. display: none; }
  1236. @media (min-width: 768px) {
  1237. .plans-background__trainer, .plans-background__bear, .plans-background__forest, .plans-background__moon, .plans-background__stars {
  1238. display: block; } }
  1239.  
  1240. .plans-background {
  1241. z-index: -1;
  1242. margin: 0 -20px; }
  1243. .plans-background::before {
  1244. background-image: url(/assets/gfx/landscape.png);
  1245. background-repeat: no-repeat;
  1246. background-size: 100% auto;
  1247. content: '';
  1248. display: block;
  1249. padding: 175% 0 0;
  1250. margin: 0 0 -160px; }
  1251. @media (min-width: 768px) {
  1252. .plans-background {
  1253. position: relative;
  1254. max-width: 1130px;
  1255. margin: 0 auto;
  1256. height: 750px; }
  1257. .plans-background::before {
  1258. display: none; } }
  1259.  
  1260. .plans-background__trainer {
  1261. background-image: url(/assets/gfx/dziki.png);
  1262. background-repeat: no-repeat;
  1263. width: 774px;
  1264. height: 782px;
  1265. z-index: 10;
  1266. top: 140px;
  1267. margin-left: -375px; }
  1268.  
  1269. .plans-background__bear {
  1270. background-image: url(/assets/gfx/bear.png);
  1271. background-repeat: no-repeat;
  1272. width: 1469px;
  1273. height: 1452px;
  1274. z-index: 9;
  1275. top: -454px;
  1276. margin-left: -720px; }
  1277.  
  1278. .plans-background__forest {
  1279. width: 3000px;
  1280. height: 565px;
  1281. z-index: 8;
  1282. top: -50px;
  1283. margin-left: -1500px; }
  1284. .plans-background__forest::after {
  1285. background-image: url(/assets/gfx/forest-trees.png);
  1286. background-repeat: no-repeat;
  1287. position: absolute;
  1288. top: 0;
  1289. bottom: 0;
  1290. left: 50%;
  1291. width: 1853px;
  1292. transform: translateX(-50%);
  1293. content: ''; }
  1294.  
  1295. .plans-background__forest-fog {
  1296. background-image: url(/assets/gfx/forest-fog.png);
  1297. background-repeat: repeat-x;
  1298. position: absolute;
  1299. top: 0;
  1300. right: 0;
  1301. bottom: 0;
  1302. left: 0;
  1303. opacity: .5; }
  1304.  
  1305. .plans-background__forest-fog--bgr {
  1306. animation: infinite forest-fog-anim-bgr 45s linear;
  1307. top: -100px; }
  1308.  
  1309. @keyframes forest-fog-anim-bgr {
  1310. 0% {
  1311. background-position: 0 0; }
  1312. 50% {
  1313. background-position: 926.5px 150px; }
  1314. 100% {
  1315. background-position: 1853px 0; } }
  1316.  
  1317. .plans-background__forest-fog--fgr {
  1318. animation: infinite forest-fog-anim-fgr 60s linear; }
  1319.  
  1320. @keyframes forest-fog-anim-fgr {
  1321. 0% {
  1322. background-position: 800px 0; }
  1323. 100% {
  1324. background-position: 2653px 0; } }
  1325.  
  1326. .plans-background__moon {
  1327. background-image: url(/assets/gfx/moon.png);
  1328. background-repeat: no-repeat;
  1329. width: 184px;
  1330. height: 184px;
  1331. z-index: 7;
  1332. top: -105px;
  1333. margin-left: -558px; }
  1334. .plans-background__moon::before {
  1335. position: absolute;
  1336. top: 52px;
  1337. left: 52px;
  1338. width: 80px;
  1339. height: 80px;
  1340. border-radius: 100%;
  1341. box-shadow: 0 0 100px 10px white;
  1342. animation: infinite moon-halo-anim 10s ease;
  1343. content: ''; }
  1344.  
  1345. @keyframes moon-halo-anim {
  1346. 0% {
  1347. opacity: 0; }
  1348. 50% {
  1349. opacity: 1; }
  1350. 100% {
  1351. opacity: 0; } }
  1352.  
  1353. .plans-background__stars {
  1354. background-image: url(/assets/gfx/stars.png);
  1355. background-repeat: no-repeat;
  1356. width: 1720px;
  1357. height: 1215px;
  1358. z-index: 1;
  1359. top: -500px;
  1360. margin-left: -975px; }
  1361.  
  1362. .plans-list {
  1363. margin: 0 -20px;
  1364. padding: 20px 0 0;
  1365. position: relative; }
  1366. @media (min-width: 768px) {
  1367. .plans-list {
  1368. margin-bottom: 50px;
  1369. padding: 70px 0 0;
  1370. overflow-x: auto;
  1371. min-height: 650px; } }
  1372.  
  1373. .plans-list__list {
  1374. display: flex;
  1375. flex-direction: column;
  1376. align-items: center; }
  1377. @media (min-width: 768px) {
  1378. .plans-list__list {
  1379. flex-direction: row;
  1380. align-items: flex-start; } }
  1381.  
  1382. .plans-list__spacer {
  1383. display: none; }
  1384. @media (min-width: 768px) {
  1385. .plans-list__spacer {
  1386. display: block;
  1387. flex: 1 0 10px;
  1388. height: 100px; } }
  1389.  
  1390. .plans-list__anchor {
  1391. position: absolute;
  1392. top: -120px; }
  1393.  
  1394. .plan-tile {
  1395. flex: 0 0 auto;
  1396. margin: 20px 20px 0;
  1397. max-width: 325px;
  1398. box-sizing: border-box;
  1399. position: relative;
  1400. z-index: 1;
  1401. padding: 0 10px;
  1402. height: 514px;
  1403. display: flex;
  1404. flex-direction: column;
  1405. justify-content: center; }
  1406. @media (min-width: 768px) {
  1407. .plan-tile {
  1408. margin: 0 50px;
  1409. height: auto;
  1410. max-width: none; } }
  1411. @media (min-width: 768px) {
  1412. .plan-tile--diet {
  1413. max-width: 260px;
  1414. margin-right: 70px;
  1415. margin-top: 10px; } }
  1416. .plan-tile--main {
  1417. order: -1;
  1418. height: 541px; }
  1419. @media (min-width: 768px) {
  1420. .plan-tile--main {
  1421. align-self: stretch;
  1422. max-width: 365px;
  1423. width: 100%;
  1424. order: 0;
  1425. height: auto; } }
  1426. @media (min-width: 768px) {
  1427. .plan-tile--training {
  1428. max-width: 280px;
  1429. margin-left: 80px;
  1430. margin-top: 10px; } }
  1431.  
  1432. .plan-tile__background {
  1433. background-image: url(/assets/gfx/plan-tile-secondary.png);
  1434. background-repeat: no-repeat;
  1435. position: absolute;
  1436. top: 0;
  1437. left: 50%;
  1438. z-index: -1;
  1439. width: 388px;
  1440. height: 100%;
  1441. margin-left: -194px; }
  1442. .plan-tile--main .plan-tile__background {
  1443. background-image: url(/assets/gfx/plan-tile-main.png);
  1444. background-repeat: no-repeat;
  1445. width: 443px;
  1446. margin-left: -221.5px; }
  1447. @media (min-width: 768px) {
  1448. .plan-tile--main .plan-tile__background {
  1449. background-image: url(/assets/gfx/plan-tile-main-desktop.png);
  1450. background-repeat: no-repeat;
  1451. width: 539px;
  1452. height: 694px;
  1453. margin-left: -270px;
  1454. top: -70px; } }
  1455. @media (min-width: 768px) {
  1456. .plan-tile--diet .plan-tile__background {
  1457. background-image: url(/assets/gfx/plan-tile-left-desktop.png);
  1458. background-repeat: no-repeat;
  1459. width: 365px;
  1460. height: 557px;
  1461. margin-left: -188px;
  1462. top: -30px; }
  1463. .plan-tile--training .plan-tile__background {
  1464. background-image: url(/assets/gfx/plan-tile-right-desktop.png);
  1465. background-repeat: no-repeat;
  1466. width: 363px;
  1467. height: 557px;
  1468. margin-left: -180px;
  1469. top: -20px; } }
  1470.  
  1471. .plan-tile__header {
  1472. font-size: 1.42857rem;
  1473. display: flex;
  1474. justify-content: space-between;
  1475. flex-flow: column;
  1476. align-items: center;
  1477. margin: 0 0 25px; }
  1478. @media (min-width: 768px) {
  1479. .plan-tile__header {
  1480. margin-left: 0; } }
  1481. .plan-tile--main .plan-tile__header {
  1482. margin-left: 0; }
  1483. @media (min-width: 768px) {
  1484. .plan-tile--main .plan-tile__header {
  1485. font-size: 1.57143rem;
  1486. margin-bottom: 40px; } }
  1487.  
  1488. .plan-tile__title {
  1489. font-family: "Integral CF";
  1490. font-weight: 700;
  1491. padding-bottom: 15px; }
  1492. .plan-tile__title .plan-tile__title--sub {
  1493. margin-top: 7px;
  1494. font-size: 1.14286rem; }
  1495.  
  1496. .plan-tile__price-list {
  1497. display: flex; }
  1498.  
  1499. .plan-tile__price {
  1500. font-size: 2em;
  1501. font-family: "Lato";
  1502. font-weight: 900;
  1503. text-align: center; }
  1504. @media (min-width: 768px) {
  1505. .plan-tile--main .plan-tile__price--old:before {
  1506. bottom: 18px; } }
  1507. .plan-tile__price--old {
  1508. position: relative;
  1509. font-weight: 800; }
  1510. .plan-tile__price--old:before {
  1511. content: " ";
  1512. display: block;
  1513. width: 85%;
  1514. border-top: 2px solid #f00;
  1515. height: 12px;
  1516. position: absolute;
  1517. bottom: 16px;
  1518. left: -2px;
  1519. transform: rotate(15deg); }
  1520. .plan-tile__price--new {
  1521. padding-left: 15px;
  1522. font-size: 2.4rem;
  1523. font-weight: 800;
  1524. color: #00ff05; }
  1525.  
  1526. .plan-tile__period {
  1527. font-size: 1rem;
  1528. color: #dce5f4;
  1529. font-weight: 400;
  1530. margin: .4em 0 0;
  1531. opacity: .8; }
  1532.  
  1533. .plan-tile__description {
  1534. margin: 0 auto; }
  1535.  
  1536. .plan-tile__paragraph {
  1537. line-height: 1.2;
  1538. color: #bfcadc; }
  1539. @media (min-width: 768px) {
  1540. .plan-tile__paragraph {
  1541. line-height: 1.4; } }
  1542. .plan-tile__paragraph + .plan-tile__paragraph {
  1543. margin-top: 20px; }
  1544. .plan-tile__paragraph--lead {
  1545. font-weight: bold;
  1546. color: #fff;
  1547. text-transform: uppercase; }
  1548. @media (min-width: 768px) {
  1549. .plan-tile__paragraph--lead {
  1550. margin-bottom: 30px; } }
  1551.  
  1552. .plan-tile__footer {
  1553. margin: 30px 0 0;
  1554. text-align: center; }
  1555. @media (min-width: 768px) {
  1556. .plan-tile__footer {
  1557. margin-top: 40px; } }
  1558.  
  1559. @media (min-width: 768px) {
  1560. .plan-variants {
  1561. margin: 0 -25px; } }
  1562.  
  1563. .plan-variants__subheader {
  1564. font-size: 1rem;
  1565. margin: -15px 0 15px;
  1566. font-family: "Integral CF";
  1567. text-align: center;
  1568. font-weight: 700;
  1569. font-size: 1.14286rem; }
  1570. @media (min-width: 768px) {
  1571. .plan-variants__subheader {
  1572. font-size: 1.42857rem; } }
  1573. .plan-variants__subheader .plan-variants__subheader--sub {
  1574. margin-top: 7px;
  1575. color: #ffdd3f;
  1576. font-size: 0.85714rem; }
  1577.  
  1578. .plan-variants__header {
  1579. font-size: 1.64286rem;
  1580. font-family: "Integral CF";
  1581. margin: 0 0 30px;
  1582. text-align: center;
  1583. font-weight: 700; }
  1584. @media (min-width: 768px) {
  1585. .plan-variants__header {
  1586. font-size: 2.14286rem;
  1587. margin-bottom: 50px; } }
  1588.  
  1589. .plan-variants__table {
  1590. font-size: 1.28571rem;
  1591. width: 100%;
  1592. border-collapse: collapse;
  1593. text-align: left; }
  1594.  
  1595. .plan-variants__table-row:hover {
  1596. background: #262e44; }
  1597.  
  1598. .plan-variants__table-row--wrapper {
  1599. display: table-row-group; }
  1600.  
  1601. .plan-variants__table-header {
  1602. font-size: 0.85714rem;
  1603. font-weight: 700;
  1604. text-align: inherit;
  1605. text-transform: uppercase;
  1606. color: #78819e;
  1607. padding: 0 15px 10px;
  1608. border-bottom: 3px solid #262e44; }
  1609. .plan-variants__table-header--center {
  1610. text-align: center; }
  1611. @media (min-width: 768px) {
  1612. .plan-variants__table-header:first-child {
  1613. padding-left: 35px; }
  1614. .plan-variants__table-header:last-child {
  1615. padding-right: 20px; } }
  1616.  
  1617. .plan-variants__table-cell {
  1618. padding: 22px 10px;
  1619. border-bottom: 1px solid #262e44;
  1620. vertical-align: middle; }
  1621. .plan-variants__table-cell--right {
  1622. text-align: right; }
  1623. .plan-variants__table-cell--center {
  1624. text-align: center; }
  1625. @media (min-width: 768px) {
  1626. .plan-variants__table-cell {
  1627. height: 52px; }
  1628. .plan-variants__table-cell:first-child {
  1629. padding-left: 35px; }
  1630. .plan-variants__table-cell:last-child {
  1631. padding-right: 20px; } }
  1632.  
  1633. .plan-variants__period {
  1634. font-family: "Integral CF"; }
  1635.  
  1636. .plan-variants__price {
  1637. font-weight: 700;
  1638. padding-left: 5px; }
  1639. .plan-variants__price--old {
  1640. position: relative;
  1641. display: inline-block;
  1642. margin: 0 auto; }
  1643. .plan-variants__price--old:before {
  1644. content: " ";
  1645. display: block;
  1646. width: 100%;
  1647. border-top: 2px solid rgba(255, 0, 0, 0.8);
  1648. height: 12px;
  1649. position: absolute;
  1650. bottom: -2px;
  1651. left: 0;
  1652. transform: rotate(15deg); }
  1653. .plan-variants__price--new {
  1654. font-size: 2.1rem;
  1655. color: #00ff05; }
  1656.  
  1657. .plan-variants__buy {
  1658. display: inline-block; }
  1659. @media (min-width: 768px) {
  1660. .plan-variants__buy {
  1661. display: none; } }
  1662. .plan-variants__buy::before {
  1663. display: inline-block;
  1664. content: '';
  1665. position: relative;
  1666. width: 25px;
  1667. height: 25px;
  1668. border: 2px solid #e00;
  1669. border-width: 2px 2px 0 0;
  1670. transform: rotate(45deg);
  1671. vertical-align: top; }
  1672.  
  1673. .plan-variants__labeled-buy {
  1674. font-size: 1rem;
  1675. display: none;
  1676. position: relative;
  1677. z-index: 1;
  1678. font-family: "Integral CF";
  1679. text-transform: uppercase;
  1680. padding: 10px 12px; }
  1681. @media (min-width: 768px) {
  1682. .plan-variants__labeled-buy {
  1683. display: inline-block; } }
  1684. .plan-variants__labeled-buy::before {
  1685. position: absolute;
  1686. top: 0;
  1687. left: 0;
  1688. bottom: 0;
  1689. right: 0;
  1690. display: block;
  1691. content: '';
  1692. background: #eb0001;
  1693. z-index: -1;
  1694. transform: skewX(-5deg); }
  1695.  
  1696. .meet-app {
  1697. position: relative;
  1698. margin: 0 auto;
  1699. max-width: 1230px; }
  1700. @media (min-width: 1024px) {
  1701. .meet-app {
  1702. margin-bottom: 100px; } }
  1703. .meet-app::before {
  1704. display: block;
  1705. content: '';
  1706. padding: 120% 0 0; }
  1707. @media (min-width: 768px) {
  1708. .meet-app::before {
  1709. padding: 450px 0 0; } }
  1710. @media (min-width: 1024px) {
  1711. .meet-app::before {
  1712. padding: 290px 0 0; } }
  1713.  
  1714. .meet-app__background {
  1715. background-image: url(/assets/gfx/meet-app.png);
  1716. background-repeat: no-repeat;
  1717. background-size: 100% auto;
  1718. position: absolute;
  1719. top: -50px;
  1720. left: -20px;
  1721. right: -20px;
  1722. z-index: -1; }
  1723. @media (min-width: 768px) {
  1724. .meet-app__background {
  1725. background-image: url(/assets/gfx/meet-app-desktop.png);
  1726. background-repeat: no-repeat;
  1727. left: 50%;
  1728. right: auto;
  1729. width: 1366px;
  1730. height: 953px;
  1731. margin-left: -703px;
  1732. transform-origin: 50% 0;
  1733. transform: scale(0.7); } }
  1734. @media (min-width: 1366px) {
  1735. .meet-app__background {
  1736. transform: none; } }
  1737. .meet-app__background::before {
  1738. display: block;
  1739. content: '';
  1740. padding: 120% 0 0; }
  1741. @media (min-width: 768px) {
  1742. .meet-app__background::before {
  1743. display: none; } }
  1744.  
  1745. .meet-app__header {
  1746. font-size: 2.85714rem;
  1747. margin: 0 0 30px;
  1748. text-align: center;
  1749. transform: skewX(-10deg); }
  1750. @media (min-width: 768px) {
  1751. .meet-app__header {
  1752. font-size: 4.64286rem;
  1753. text-align: left;
  1754. margin: 0 0 45px -.4em; } }
  1755. .meet-app__header > span {
  1756. display: block;
  1757. font-size: .5em; }
  1758. @media (min-width: 768px) {
  1759. .meet-app__header > span {
  1760. margin-left: 1.5em; } }
  1761.  
  1762. .meet-app__columns {
  1763. line-height: 1.5; }
  1764. @media (min-width: 768px) {
  1765. .meet-app__columns {
  1766. font-size: 1.14286rem;
  1767. display: flex;
  1768. justify-content: space-between;
  1769. align-items: center;
  1770. margin: -180px 20px 360px; } }
  1771.  
  1772. .meet-app__column {
  1773. color: #c0c9dc;
  1774. text-align: justify;
  1775. padding: 0 20px; }
  1776. @media (min-width: 768px) {
  1777. .meet-app__column {
  1778. max-width: 340px;
  1779. text-align: left; } }
  1780. .meet-app__column--right {
  1781. margin-top: 2em; }
  1782. @media (min-width: 768px) {
  1783. .meet-app__column--right {
  1784. margin-top: 200px;
  1785. width: 300px; } }
  1786.  
  1787. .meet-app__enroll {
  1788. text-align: center;
  1789. margin: 2em 0 0; }
  1790.  
  1791. @media (min-width: 768px) {
  1792. .meet-app__paragraph {
  1793. line-height: 1.5;
  1794. text-shadow: 0 0 1px #000; } }
  1795.  
  1796. .gallery__wrapper {
  1797. text-align: center;
  1798. margin: 50px 0 0; }
  1799. @media (min-width: 768px) {
  1800. .gallery__wrapper {
  1801. margin-bottom: 150px; } }
  1802. .gallery__wrapper .gallery__wrapper--cta {
  1803. margin-top: 25px; }
  1804. .gallery__wrapper .gallery__wrapper--title {
  1805. font-style: italic; }
  1806.  
  1807. .gallery {
  1808. margin: 50px 0 0;
  1809. position: relative;
  1810. z-index: 1; }
  1811.  
  1812. .gallery__background {
  1813. background-image: url(/assets/gfx/gallery-background.png);
  1814. background-repeat: no-repeat;
  1815. position: absolute;
  1816. top: 50px;
  1817. left: 50%;
  1818. margin: 0 0 0 -340px;
  1819. width: 676px;
  1820. height: 284px;
  1821. z-index: -1; }
  1822.  
  1823. .gallery__list {
  1824. max-width: 835px;
  1825. margin: 0 auto;
  1826. position: relative;
  1827. perspective: 900px; }
  1828.  
  1829. .gallery__item {
  1830. position: absolute;
  1831. top: 0;
  1832. left: 0;
  1833. transition: transform 0.4s, opacity 0.4s;
  1834. cursor: pointer; }
  1835. .gallery__item[data-offset='0'] {
  1836. position: relative;
  1837. z-index: 10; }
  1838. .gallery__item[data-offset='-1'] {
  1839. transform: translate(-40%) rotateY(55deg) scale(0.5);
  1840. z-index: -7; }
  1841. .gallery__item[data-offset='-2'] {
  1842. transform: translate(-60%) rotateY(55deg) scale(0.5);
  1843. z-index: -8; }
  1844. .gallery__item[data-offset='-3'] {
  1845. transform: translate(-90%) rotateY(55deg) scale(0.5);
  1846. z-index: -9; }
  1847. .gallery__item[data-offset='-#'] {
  1848. transform: translate(-120%) rotateY(55deg) scale(0.5);
  1849. z-index: -10;
  1850. opacity: 0; }
  1851. .gallery__item[data-offset='1'] {
  1852. transform: translate(40%) rotateY(-55deg) scale(0.5);
  1853. z-index: -7; }
  1854. .gallery__item[data-offset='2'] {
  1855. transform: translate(60%) rotateY(-55deg) scale(0.5);
  1856. z-index: -8; }
  1857. .gallery__item[data-offset='3'] {
  1858. transform: translate(90%) rotateY(-55deg) scale(0.5);
  1859. z-index: -9; }
  1860. .gallery__item[data-offset='#'] {
  1861. transform: translate(120%) rotateY(-55deg) scale(0.5);
  1862. z-index: -10;
  1863. opacity: 0; }
  1864.  
  1865. .gallery__image {
  1866. box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.9); }
  1867.  
  1868. .gallery__item-background {
  1869. position: absolute;
  1870. top: 0;
  1871. left: 0;
  1872. bottom: 0;
  1873. right: 0;
  1874. z-index: -1;
  1875. background: rgba(27, 31, 72, 0.45);
  1876. transition: opacity 0.4s, visibility 0.4s;
  1877. visibility: hidden;
  1878. opacity: 0; }
  1879. .gallery__item[data-offset='0'] .gallery__item-background {
  1880. opacity: 1;
  1881. visibility: visible; }
  1882.  
  1883. .gallery__item-ornament {
  1884. position: absolute;
  1885. top: 0;
  1886. left: 15%;
  1887. right: 15%;
  1888. transition: opacity 0.4s, visibility 0.4s;
  1889. opacity: 0;
  1890. visibility: hidden; }
  1891. .gallery__item[data-offset='0'] .gallery__item-ornament {
  1892. opacity: 1;
  1893. visibility: visible; }
  1894. .gallery__item-ornament::before {
  1895. background-image: url(/assets/gfx/gallery-ornament.png);
  1896. background-repeat: no-repeat;
  1897. content: '';
  1898. display: block;
  1899. padding: 12.6% 0 0;
  1900. background-size: cover; }
  1901.  
  1902. .gallery__controls {
  1903. text-align: center;
  1904. margin: 50px 0 0; }
  1905.  
  1906. .gallery__next,
  1907. .gallery__prev {
  1908. min-width: 50px; }
  1909.  
  1910. .gallery__icon-prev,
  1911. .gallery__icon-next {
  1912. display: inline-block;
  1913. border: 1px solid #fff;
  1914. border-width: 1px 1px 0 0;
  1915. width: 10px;
  1916. height: 10px; }
  1917.  
  1918. .gallery__icon-prev {
  1919. transform: rotate(-135deg);
  1920. margin-left: 5px; }
  1921.  
  1922. .gallery__icon-next {
  1923. transform: rotate(45deg);
  1924. margin-right: 5px; }
  1925.  
  1926. .about-me {
  1927. max-width: 1150px;
  1928. margin: 0 auto;
  1929. position: relative;
  1930. padding: 40px 0 80px;
  1931. z-index: 3; }
  1932.  
  1933. .about-me__header {
  1934. font-size: 2.85714rem;
  1935. transform: skewX(-10deg);
  1936. text-align: center;
  1937. margin: 0 0 30px; }
  1938. @media (min-width: 768px) {
  1939. .about-me__header {
  1940. font-size: 3.92857rem;
  1941. margin: 0 120px 45px;
  1942. text-align: right; } }
  1943.  
  1944. .about-me__background {
  1945. position: absolute;
  1946. top: 120px;
  1947. left: -40px;
  1948. right: -40px;
  1949. z-index: -1;
  1950. pointer-events: none; }
  1951. @media (min-width: 768px) {
  1952. .about-me__background {
  1953. background-image: url(/assets/gfx/about-me-desktop.png);
  1954. background-repeat: no-repeat;
  1955. width: 1839px;
  1956. height: 1294px;
  1957. left: 50%;
  1958. right: auto;
  1959. top: -200px;
  1960. margin-left: -919.5px; } }
  1961. .about-me__background::before {
  1962. background-image: url(/assets/gfx/about-me.png);
  1963. background-repeat: no-repeat;
  1964. background-size: cover;
  1965. content: '';
  1966. display: block;
  1967. padding: 70.4% 0 0; }
  1968. @media (min-width: 768px) {
  1969. .about-me__background::before {
  1970. display: none; } }
  1971.  
  1972. .waiting-for__footer {
  1973. text-align: center;
  1974. margin: 30px 0 0; }
  1975.  
  1976. .waiting-for__social {
  1977. margin: 30px 0 0; }
  1978.  
  1979. .waiting-for__button {
  1980. font-size: 1.14286rem;
  1981. padding: .7em 1.2em; }
  1982.  
  1983. .player {
  1984. box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
  1985. position: relative;
  1986. background: #111; }
  1987. .player::before {
  1988. content: '';
  1989. display: block;
  1990. padding: 56.25% 0 0; }
  1991.  
  1992. .player__play {
  1993. background-image: url(/assets/gfx/play.png);
  1994. background-repeat: no-repeat;
  1995. position: absolute;
  1996. top: 50%;
  1997. left: 50%;
  1998. width: 56px;
  1999. height: 68px;
  2000. margin: -34px 0 0 -28px;
  2001. display: block; }
  2002. @media (pointer: fine) {
  2003. .player__play {
  2004. transition: transform .4s;
  2005. transform: scale(1); }
  2006. .player__play:hover {
  2007. transform: scale(1.2); } }
  2008.  
  2009. .player__youtube {
  2010. position: absolute;
  2011. top: 0;
  2012. left: 0;
  2013. width: 100%;
  2014. height: 100%; }
  2015.  
  2016. .powers {
  2017. max-width: 1200px;
  2018. margin: 0 auto;
  2019. position: relative;
  2020. padding: 40px 0 80px; }
  2021. .powers::before {
  2022. content: '';
  2023. display: block;
  2024. padding: 70% 0 0; }
  2025. @media (min-width: 768px) {
  2026. .powers::before {
  2027. display: none; } }
  2028.  
  2029. .powers__background {
  2030. position: absolute;
  2031. top: -300px;
  2032. left: -20px;
  2033. right: -20px;
  2034. z-index: -1;
  2035. pointer-events: none; }
  2036. @media (min-width: 768px) {
  2037. .powers__background {
  2038. background-image: url(/assets/gfx/powers-background-desktop.png);
  2039. background-repeat: no-repeat;
  2040. width: 2348px;
  2041. height: 1676px;
  2042. left: 50%;
  2043. top: -550px;
  2044. margin-left: -1274px; } }
  2045. .powers__background::before {
  2046. background-image: url(/assets/gfx/powers-background.png);
  2047. background-repeat: no-repeat;
  2048. background-size: cover;
  2049. content: '';
  2050. display: block;
  2051. padding: 242.9% 0 0; }
  2052. @media (min-width: 768px) {
  2053. .powers__background::before {
  2054. display: none; } }
  2055.  
  2056. @media (min-width: 768px) {
  2057. .power-tiles {
  2058. display: flex;
  2059. flex-wrap: wrap;
  2060. max-width: 858px;
  2061. margin-left: auto;
  2062. position: relative;
  2063. z-index: 5; } }
  2064.  
  2065. .power-tile {
  2066. background-image: url(/assets/gfx/powers-tile.png);
  2067. background-repeat: no-repeat;
  2068. font-size: 1.14286rem;
  2069. width: 286px;
  2070. height: 244px;
  2071. margin: 0 auto 20px;
  2072. padding: 0 30px;
  2073. box-sizing: border-box;
  2074. text-align: center;
  2075. font-family: "Integral CF";
  2076. text-shadow: 0 0 5px #000; }
  2077.  
  2078. .power-tile__icon {
  2079. text-align: center;
  2080. height: 145px;
  2081. display: flex;
  2082. justify-content: center;
  2083. align-items: center;
  2084. margin: 0 auto 15px; }
  2085. .power-tile__icon[data-icon]::before {
  2086. background-image: url(/assets/gfx/powers-sprite.png);
  2087. background-repeat: no-repeat;
  2088. content: '';
  2089. display: block;
  2090. background-size: 184px auto;
  2091. height: 68px; }
  2092. .power-tile__icon[data-icon='punch']::before {
  2093. width: 66px; }
  2094. .power-tile__icon[data-icon='defense']::before {
  2095. width: 52px;
  2096. background-position: -66px 0; }
  2097. .power-tile__icon[data-icon='charm']::before {
  2098. width: 66px;
  2099. background-position: -118px 0; }
  2100.  
  2101. .power-tile__header {
  2102. transform: skewX(-10deg); }
  2103.  
  2104. .power-meter {
  2105. display: flex;
  2106. justify-content: center;
  2107. margin: 25px 0 0; }
  2108.  
  2109. .power-meter__item {
  2110. display: flex;
  2111. width: 20px;
  2112. height: 12px;
  2113. justify-content: center;
  2114. align-items: center;
  2115. flex: 0 0 20px;
  2116. min-width: 0;
  2117. margin: 0 1px; }
  2118. .power-meter__item::before {
  2119. background-image: url(/assets/gfx/powers-sprite.png);
  2120. background-repeat: no-repeat;
  2121. background-size: 184px auto;
  2122. background-position: -45px -68px;
  2123. content: '';
  2124. display: inline-block;
  2125. width: 45px;
  2126. height: 38px;
  2127. flex: 0 0 45px; }
  2128. .power-meter__item--active::before {
  2129. background-position-x: 0; }
  2130.  
  2131. .trainer-description__columns {
  2132. margin: 50px 0 0; }
  2133. @media (min-width: 768px) {
  2134. .trainer-description__columns {
  2135. background: rgba(0, 0, 0, 0.5);
  2136. display: flex;
  2137. flex-wrap: wrap;
  2138. justify-content: center; } }
  2139.  
  2140. .trainer-description__column {
  2141. text-align: justify; }
  2142. @media (min-width: 768px) {
  2143. .trainer-description__column {
  2144. flex: 1 0 33.33%;
  2145. min-width: 350px;
  2146. padding: 50px 45px 0;
  2147. box-sizing: border-box; } }
  2148. * + .trainer-description__column {
  2149. margin-top: 50px; }
  2150. @media (min-width: 768px) {
  2151. * + .trainer-description__column {
  2152. margin-top: 0; } }
  2153.  
  2154. .trainer-description__paragraph {
  2155. line-height: 1.4;
  2156. margin: 1.4em 20px 0;
  2157. color: #c0c8db; }
  2158. @media (min-width: 768px) {
  2159. .trainer-description__paragraph {
  2160. font-size: 1.07143rem;
  2161. margin-left: 0;
  2162. margin-right: 0; } }
  2163.  
  2164. .trainer-description__header {
  2165. font-size: 1.28571rem;
  2166. margin: 0 0 20px;
  2167. text-align: center; }
  2168. .trainer-description__header::after {
  2169. background-image: url(/assets/gfx/training-description-strap.png);
  2170. background-repeat: no-repeat;
  2171. content: '';
  2172. display: block;
  2173. width: 308px;
  2174. height: 48px;
  2175. margin: 0 auto -20px; }
  2176.  
  2177. .blog-brief {
  2178. position: relative;
  2179. z-index: 2;
  2180. max-width: 1180px;
  2181. margin: 0 auto; }
  2182. @media (min-width: 768px) {
  2183. .blog-brief {
  2184. margin-top: 150px; } }
  2185.  
  2186. .blog-brief__header {
  2187. font-size: 2.85714rem;
  2188. text-align: center;
  2189. transform: skewX(-10deg);
  2190. margin: 0 0 30px; }
  2191. @media (min-width: 768px) {
  2192. .blog-brief__header {
  2193. font-size: 3.92857rem;
  2194. text-align: left;
  2195. margin-left: 30px; } }
  2196.  
  2197. .blog-brief__background {
  2198. position: absolute;
  2199. top: -50px;
  2200. left: -40px;
  2201. right: -40px;
  2202. z-index: -1;
  2203. pointer-events: none; }
  2204. @media (min-width: 768px) {
  2205. .blog-brief__background {
  2206. background-image: url(/assets/gfx/blog-background-desktop.png);
  2207. background-repeat: no-repeat;
  2208. width: 1683px;
  2209. height: 817px;
  2210. left: 50%;
  2211. top: -300px;
  2212. margin-left: -841.5px; } }
  2213. .blog-brief__background::before {
  2214. background-image: url(/assets/gfx/blog-background.png);
  2215. background-repeat: no-repeat;
  2216. background-size: cover;
  2217. content: '';
  2218. display: block;
  2219. padding: 48.6% 0 0; }
  2220. @media (min-width: 768px) {
  2221. .blog-brief__background::before {
  2222. display: none; } }
  2223.  
  2224. @media (min-width: 768px) {
  2225. .blog-posts {
  2226. display: flex;
  2227. flex-wrap: wrap;
  2228. margin: 0 -10px; } }
  2229.  
  2230. .blog-posts__item {
  2231. display: flex;
  2232. flex-direction: column;
  2233. margin: 20px 0 0;
  2234. position: relative; }
  2235. .blog-posts__item:nth-child(n + 4) {
  2236. display: none; }
  2237. @media (min-width: 768px) {
  2238. .blog-posts__item {
  2239. padding: 0 10px;
  2240. flex: 0 0 50%;
  2241. min-width: 0;
  2242. box-sizing: border-box; }
  2243. .blog-posts__item:nth-child(n + 4) {
  2244. display: block; } }
  2245. @media (min-width: 1024px) {
  2246. .blog-posts__item {
  2247. flex-basis: 33.33%; } }
  2248. @media (min-width: 1024px) and (pointer: fine) {
  2249. .blog-posts__item {
  2250. transform: scale(1);
  2251. transition: transform .3s; }
  2252. .blog-posts__item:hover {
  2253. z-index: 5;
  2254. transform: scale(1.05); } }
  2255.  
  2256. .blog-posts__item-content {
  2257. padding: 20px;
  2258. position: relative;
  2259. z-index: 1;
  2260. flex: 1 0 auto; }
  2261.  
  2262. .blog-posts__background {
  2263. position: absolute;
  2264. top: 0;
  2265. left: 0;
  2266. bottom: 0;
  2267. right: 0;
  2268. border: 1px solid #161616;
  2269. z-index: -1;
  2270. display: none; }
  2271. @media (min-width: 768px) {
  2272. .blog-posts__background {
  2273. display: block; } }
  2274. @media (min-width: 768px) and (pointer: fine) {
  2275. .blog-posts__background::before {
  2276. position: absolute;
  2277. top: 0;
  2278. left: 0;
  2279. bottom: 0;
  2280. right: 0;
  2281. content: '';
  2282. display: block;
  2283. background: #030619;
  2284. opacity: 0;
  2285. transition: opacity .4s; }
  2286. .blog-posts__background::after {
  2287. position: absolute;
  2288. top: 0;
  2289. left: 0;
  2290. bottom: 0;
  2291. right: 0;
  2292. content: '';
  2293. display: block;
  2294. box-shadow: 0 0 30px 30px #000;
  2295. opacity: 0;
  2296. visibility: hidden;
  2297. transition: opacity .4s, visibility .4s; }
  2298. .blog-posts__item:hover .blog-posts__background::before {
  2299. opacity: 1; }
  2300. .blog-posts__item:hover .blog-posts__background::after {
  2301. visibility: visible;
  2302. opacity: 1; } }
  2303.  
  2304. .blog-posts__image {
  2305. display: block;
  2306. width: 100%;
  2307. margin: 0 0 25px; }
  2308.  
  2309. .blog-posts__misc {
  2310. display: flex;
  2311. margin: 0 0 1em; }
  2312. @media (min-width: 768px) {
  2313. .blog-posts__misc {
  2314. font-size: 0.85714rem; } }
  2315.  
  2316. .blog-posts__date {
  2317. color: #484e5a; }
  2318.  
  2319. .blog-posts__category {
  2320. color: #e60103;
  2321. margin: 0 .5em 0 0;
  2322. font-weight: 700;
  2323. text-transform: uppercase; }
  2324. .blog-posts__category--secondary {
  2325. color: #0172e6; }
  2326. .blog-posts__category--tertiary {
  2327. color: #52e601; }
  2328.  
  2329. .blog-posts__title {
  2330. font-size: 1.14286rem;
  2331. line-height: 1.2; }
  2332.  
  2333. .blog-posts__excerpt {
  2334. color: #7a859b;
  2335. margin: 1em 0 0; }
  2336.  
  2337. .blog-posts__item-link {
  2338. position: absolute;
  2339. top: 0;
  2340. left: 0;
  2341. bottom: 0;
  2342. right: 0;
  2343. display: block;
  2344. z-index: 5; }
  2345.  
  2346. .waiting-for {
  2347. position: relative;
  2348. z-index: 1;
  2349. margin: 40px 0 0; }
  2350. @media (min-width: 768px) {
  2351. .waiting-for {
  2352. max-width: 1140px;
  2353. margin: 180px auto 0;
  2354. padding: 0 0 80px; } }
  2355.  
  2356. @media (min-width: 768px) {
  2357. .waiting-for__content {
  2358. max-width: 500px;
  2359. padding: 0 50px;
  2360. margin: 0 0 0 auto; } }
  2361.  
  2362. .waiting-for__header {
  2363. font-size: 1.42857rem;
  2364. transform: skewX(-10deg);
  2365. margin: 0 0 30px;
  2366. text-align: center; }
  2367. @media (min-width: 768px) {
  2368. .waiting-for__header {
  2369. font-size: 2.14286rem; } }
  2370. .waiting-for__header span {
  2371. color: #d20000;
  2372. display: block; }
  2373. @media (min-width: 768px) {
  2374. .waiting-for__header span {
  2375. display: inline; } }
  2376.  
  2377. .waiting-for__background {
  2378. z-index: -1;
  2379. margin: -50px -20px 0;
  2380. bottom: 0; }
  2381. @media (min-width: 768px) {
  2382. .waiting-for__background {
  2383. background-image: url(/assets/gfx/waiting-for-desktop.jpg);
  2384. background-repeat: no-repeat;
  2385. position: absolute;
  2386. bottom: 0;
  2387. left: 50%;
  2388. margin: 0 0 0 -737px;
  2389. width: 1634px;
  2390. height: 722px; } }
  2391. .waiting-for__background::before {
  2392. background-image: url(/assets/gfx/waiting-for.jpg);
  2393. background-repeat: no-repeat;
  2394. background-size: cover;
  2395. content: '';
  2396. display: block;
  2397. padding: 91.4% 0 0; }
  2398. @media (min-width: 768px) {
  2399. .waiting-for__background::before {
  2400. display: none; } }
  2401.  
  2402. .waiting-for__paragraph {
  2403. margin: 0 20px;
  2404. line-height: 1.3;
  2405. color: #7a859b;
  2406. text-align: justify; }
  2407. .waiting-for__paragraph--lead {
  2408. color: #c0c9dc; }
  2409. .waiting-for__paragraph + .waiting-for__paragraph {
  2410. margin-top: 2em; }
  2411.  
  2412. .social-share {
  2413. display: flex;
  2414. justify-content: center;
  2415. align-items: center; }
  2416.  
  2417. .social-share__item {
  2418. margin: 0 10px;
  2419. display: block;
  2420. position: relative; }
  2421. @media (pointer: fine) {
  2422. .social-share__item {
  2423. opacity: .6;
  2424. transition: transform .4s, opacity .4s;
  2425. transform: scale(1); }
  2426. .social-share__item:hover {
  2427. opacity: 1;
  2428. transform: scale(1.2); } }
  2429.  
  2430. .social-share-icon {
  2431. background-image: url(/assets/gfx/social-sprite.png);
  2432. background-repeat: no-repeat;
  2433. background-size: 132px auto;
  2434. display: inline-block;
  2435. text-indent: -9999px; }
  2436. .social-share-icon--facebook {
  2437. width: 22px;
  2438. height: 30px; }
  2439. .social-share-icon--instagram {
  2440. width: 37px;
  2441. height: 35px;
  2442. background-position: -22px 0; }
  2443. .social-share-icon--youtube {
  2444. width: 36px;
  2445. height: 35px;
  2446. background-position: -59px 0; }
  2447. .social-share-icon--email {
  2448. width: 37px;
  2449. height: 35px;
  2450. background-position: -95px 0; }
  2451.  
  2452. .stats {
  2453. margin: 30px 0 50px; }
  2454. @media (min-width: 768px) {
  2455. .stats {
  2456. max-width: 840px;
  2457. margin: 0 0 100px auto;
  2458. padding-left: 20px;
  2459. box-sizing: border-box;
  2460. display: flex;
  2461. flex-wrap: wrap; } }
  2462.  
  2463. .stats__item {
  2464. margin: 20px 0 0;
  2465. display: flex;
  2466. min-height: 48px;
  2467. padding: 0 15px;
  2468. position: relative;
  2469. z-index: 1;
  2470. align-items: center;
  2471. text-transform: uppercase; }
  2472. @media (min-width: 768px) {
  2473. .stats__item {
  2474. flex: 0 0 50%;
  2475. max-width: calc(50% - 20px);
  2476. box-sizing: border-box;
  2477. margin-left: 10px;
  2478. margin-right: 10px; } }
  2479. .stats__item::before {
  2480. position: absolute;
  2481. top: 0;
  2482. left: 0;
  2483. bottom: 0;
  2484. right: 0;
  2485. content: '';
  2486. display: block;
  2487. background: #050527;
  2488. border: 1px solid rgba(255, 255, 255, 0.1);
  2489. z-index: -1;
  2490. border-radius: 8px;
  2491. transform: skewX(-20deg); }
  2492.  
  2493. .stats__percentage {
  2494. color: #f3c612;
  2495. margin-left: 20px;
  2496. flex: 0 0 auto; }
  2497.  
  2498. .stats__title {
  2499. flex: 1 0 0%;
  2500. line-height: 1.3;
  2501. font-weight: 700; }
  2502.  
  2503. .stats__icon {
  2504. width: 40px;
  2505. height: 25px;
  2506. flex: 0 0 auto;
  2507. display: flex;
  2508. justify-content: center;
  2509. align-items: center;
  2510. margin: 0 15px 0 0; }
  2511. .stats__icon::before {
  2512. background-image: url(/assets/gfx/powers-sprite.png);
  2513. background-repeat: no-repeat;
  2514. background-size: 184px auto;
  2515. content: '';
  2516. display: block; }
  2517. .stats__icon[data-icon='hand']::before {
  2518. background-position: 0 -106px;
  2519. width: 26px;
  2520. height: 36px; }
  2521. .stats__icon[data-icon='goat']::before {
  2522. background-position: -26px -106px;
  2523. width: 39px;
  2524. height: 34px; }
  2525. .stats__icon[data-icon='wheel']::before {
  2526. background-position: -65px -106px;
  2527. width: 36px;
  2528. height: 36px; }
  2529. .stats__icon[data-icon='rooster']::before {
  2530. background-position: -101px -106px;
  2531. width: 29px;
  2532. height: 35px; }
  2533. .stats__icon[data-icon='whale']::before {
  2534. background-position: -130px -106px;
  2535. width: 46px;
  2536. height: 36px; }
  2537. .stats__icon[data-icon='donkey']::before {
  2538. background-position: 0 -141px;
  2539. width: 30px;
  2540. height: 35px; }
  2541. </style></head>
  2542.  
  2543. <body cz-shortcut-listen="true">
  2544. <div><div id="start" class="main"><div class="mobile-bar"><button class="toggle-menu"><i class="toggle-menu__line"></i> <i class="toggle-menu__line"></i> <i class="toggle-menu__line"></i></button> <a href="/#pakiety" class="login-button mobile-bar__enroll">
  2545. Zacznij przemianę
  2546.  
  2547. <div class="login-button__background"></div></a></div> <div class="menu"><div class="menu__wrapper"><button class="menu__close"></button> <div class="menu__logo"><a href="/#start"><img src="assets/img/logo.png" alt=""></a></div> <ul class="menu__list"><li class="menu__item"><a href="/#pakiety" class="menu__link">Pakiety</a></li> <li class="menu__item"><a href="/#o-mnie" class="menu__link">O mnie</a></li> <li class="menu__item"><a href="/#blog" class="menu__link">Blog</a></li> <li class="menu__item"><a href="mailto:kontakt@trenujemy.pl" class="menu__link">Kontakt</a></li> <li class="menu__item menu__item--login"><a href="/#pakiety" class="login-button">
  2548. Zacznij przemianę
  2549.  
  2550. <div class="login-button__background"></div></a> <a href="https://portal.trenujemy.pl/login" class="login-button login-button--alternate">
  2551. Logowanie
  2552.  
  2553. <div class="login-button__background"></div></a></li></ul></div> <div class="menu__overlay"></div></div> <div class="main__content"><div class="header"><div class="header__box"><h1 class="header__headline"><img src="assets/img/logo.png" alt="" class="header__logo"> <img src="assets/img/landing-page/dziki-trener.png" alt="Dziki Trener"> <div class="header__headline-eye header__headline-eye--left"></div> <div class="header__headline-eye header__headline-eye--right"></div> <div class="header__headline-lights"></div></h1> <div class="header-quote">
  2554. Dobrze dobrany Plan Treningowy i Dieta <span class="header-quote__second-line">są podstawą pierdolonego sukcesu!</span> <div class="header-quote__author">Dziki Trener</div></div></div> <div class="header__background"></div></div> <div class="gallery__wrapper"><h2 class="gallery__wrapper--title">Zobacz, jak wygląda moja platforma:</h2> <div class="gallery"><ul class="gallery__list"><li data-offset="-3" class="gallery__item"><img src="assets/img/landing-page/screenshots/screenshot-1.jpg" alt="" class="gallery__image"> <div class="gallery__item-background"></div></li><li data-offset="-2" class="gallery__item"><img src="assets/img/landing-page/screenshots/screenshot-2.jpg" alt="" class="gallery__image"> <div class="gallery__item-background"></div></li><li data-offset="-1" class="gallery__item"><img src="assets/img/landing-page/screenshots/screenshot-3.jpg" alt="" class="gallery__image"> <div class="gallery__item-background"></div></li><li data-offset="0" class="gallery__item"><img src="assets/img/landing-page/screenshots/screenshot-4.jpg" alt="" class="gallery__image"> <div class="gallery__item-background"></div></li><li data-offset="1" class="gallery__item"><img src="assets/img/landing-page/screenshots/screenshot-5.jpg" alt="" class="gallery__image"> <div class="gallery__item-background"></div></li><li data-offset="2" class="gallery__item"><img src="assets/img/landing-page/screenshots/screenshot-6.jpg" alt="" class="gallery__image"> <div class="gallery__item-background"></div></li><li data-offset="3" class="gallery__item"><img src="assets/img/landing-page/screenshots/screenshot-7.jpg" alt="" class="gallery__image"> <div class="gallery__item-background"></div></li></ul> <div class="gallery__controls"><button type="button" class="button button--skewed-right gallery__prev"><i class="gallery__icon-prev"></i></button> <button type="button" class="button button--skewed-right gallery__next"><i class="gallery__icon-next"></i></button></div> <div class="gallery__background"></div></div> <div class="gallery__wrapper--cta"><a href="/#pakiety" class="button button--primary button--bigger">Kup teraz</a></div></div> <div class="plans"><div class="plans-background"><div data-paralax="-0.2" class="plans-background__trainer"></div> <div data-paralax="-0.1" class="plans-background__bear"></div> <div data-paralax="0" class="plans-background__forest"><div class="plans-background__forest-fog plans-background__forest-fog--bgr"></div> <div class="plans-background__forest-fog plans-background__forest-fog--fgr"></div></div> <div data-paralax="0.1" class="plans-background__moon"></div> <div data-paralax="0.2" class="plans-background__stars"></div></div> <h2 class="plans__header"><img src="assets/img/landing-page/plany-treningowe.png" alt="Plany treningowe"></h2> <!----> <div class="plans-list"><a id="pakiety" name="pakiety" class="plans-list__anchor "></a> <ul class="plans-list__list"><li class="plans-list__spacer"></li> <li class="plan-tile plan-tile--diet"><div class="plan-tile__header plan-tile__header--landing"><h3 class="plan-tile__title">Dieta</h3> <div class="plan-tile__price-list"><div class="plan-tile__price-list"><div class="plan-tile__price--old">
  2555. 199;-
  2556.  
  2557. <div class="plan-tile__period">
  2558. 1 miesiąc
  2559. </div></div> <div class="plan-tile__price--new">
  2560. 99zł
  2561. </div></div> <!----></div></div> <div class="plan-tile__description"><p class="plan-tile__paragraph plan-tile__paragraph--lead">1 - plan żywieniowy</p> <p class="plan-tile__paragraph plan-tile__paragraph--lead">2 - kontakt z dzikim</p> <p class="plan-tile__paragraph plan-tile__paragraph--lead">3 - analiza żywieniowa</p> <div class="plan-tile__footer"><a href="https://portal.trenujemy.pl/register/diet" class="button button--light"><span class="button__label">Wybieram</span></a> <!----></div></div> <div class="plan-tile__background"></div></li> <li class="plan-tile plan-tile--main"><!----> <div class="plan-tile__header plan-tile__header--landing"><h3 class="plan-tile__title">Prowadzenie Online</h3> <div class="plan-tile__price-list"><div class="plan-tile__price-list"><div class="plan-tile__price-list"><div class="plan-tile__price--old">
  2562. 299;-
  2563.  
  2564. <div class="plan-tile__period">
  2565. 1 miesiąc
  2566. </div></div> <div class="plan-tile__price--new">
  2567. 149zł
  2568. </div></div> <!----></div></div></div> <div class="plan-tile__description"><p class="plan-tile__paragraph plan-tile__paragraph--lead">1 - Plan żywieniowy</p> <p class="plan-tile__paragraph plan-tile__paragraph--lead">2 - Plan treningowy</p> <p class="plan-tile__paragraph plan-tile__paragraph--lead">3 - Plan suplementacyjny</p> <p class="plan-tile__paragraph plan-tile__paragraph--lead">4 - Nawodnienie</p> <p class="plan-tile__paragraph plan-tile__paragraph--lead">5 - Dostęp do relacji LIVE z Dzikim</p> <p class="plan-tile__paragraph plan-tile__paragraph--lead">6 - kontakt z Dzikim</p> <p class="plan-tile__paragraph plan-tile__paragraph--lead">7 - analiza żywieniowa</p> <div class="plan-tile__footer"><button type="button" class="button button--primary button--big"><span class="button__label">Wybieram</span></button> <!----></div></div> <div class="plan-tile__background"></div></li> <li class="plan-tile plan-tile--training"><div class="plan-tile__header"><h3 class="plan-tile__title">Trening</h3> <div class="plan-tile__price-list"><div class="plan-tile__price-list"><div class="plan-tile__price--old">
  2569. 149;-
  2570.  
  2571. <div class="plan-tile__period">
  2572. 1 miesiąc
  2573. </div></div> <div class="plan-tile__price--new">
  2574. 89zł
  2575. </div></div> <!----></div></div> <div class="plan-tile__description"><p class="plan-tile__paragraph plan-tile__paragraph--lead">1 - plan treningowy</p> <p class="plan-tile__paragraph plan-tile__paragraph--lead">2 - kontakt z dzikim</p> <div class="plan-tile__footer"><a href="https://portal.trenujemy.pl/register/training" class="button button--light"><span class="button__label">Wybieram</span></a> <!----></div></div> <div class="plan-tile__background"></div></li> <li class="plans-list__spacer"></li></ul></div></div> <div class="meet-app"><div class="meet-app__columns"><div class="meet-app__column meet-app__column--left"><h2 class="meet-app__header">Dlaczego <span>ja?</span></h2> <p class="meet-app__paragraph">
  2576. Jeśli szukasz Ryjku prawdziwej opieki trenerskiej, to dobrze trafiłeś. Znajdziesz u&nbsp;mnie o&nbsp;wiele więcej, niż tylko swój trening, dietę i&nbsp;plan&nbsp;suplementacyjny.
  2577. </p> <br> <p class="meet-app__paragraph">
  2578. To dla moich podopiecznych bowiem, będę dostępny w&nbsp;relacjach na&nbsp;żywo, w&nbsp;których znajdziesz odpowiedzi na&nbsp;wszelkie pytania - nie&nbsp;tylko związane z&nbsp;dietą&nbsp;i&nbsp;treningiem. Będziesz miał ze&nbsp;mną&nbsp;stały kontakt i&nbsp;możesz liczyć na ciągłą pomoc z&nbsp;mojej&nbsp;strony.
  2579. </p></div> <div class="meet-app__column meet-app__column--right"><p class="meet-app__paragraph">
  2580. Jeżeli kiedykolwiek zamówiłeś rozpiskę i się zawiodłeś gwarantuję Ci, że stosując się do moich rad, Twoją formę będziemy robić razem, bo&nbsp;w&nbsp;tej&nbsp;walce samego Cię nie zostawię.
  2581. </p> <div class="meet-app__enroll"><a href="/#pakiety" class="button button--skewed-right button--big">Rozpocznij przemianę</a></div></div></div> <div class="meet-app__background"></div></div> <div id="o-mnie" class="about-me"><h2 class="about-me__header">O mnie</h2> <div class="player"><div class="player__frame"><iframe src="https://www.youtube.com/embed/GwxUr1wa4us" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" class="player__youtube" width="100%" height="100%" frameborder="0"></iframe></div></div> <div class="about-me__background"></div></div> <div class="powers"><ul class="power-tiles"><li class="power-tile"><div data-icon="punch" class="power-tile__icon"></div> <h3 class="power-tile__header">Cios szczepionkowy</h3> <ul class="power-meter"><li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item"></li> <li class="power-meter__item"></li></ul></li> <li class="power-tile"><div data-icon="defense" class="power-tile__icon"></div> <h3 class="power-tile__header">Sterydianowa obrona</h3> <ul class="power-meter"><li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item"></li> <li class="power-meter__item"></li> <li class="power-meter__item"></li></ul></li> <li class="power-tile"><div data-icon="charm" class="power-tile__icon"></div> <h3 class="power-tile__header">Salcesonowy urok</h3> <ul class="power-meter"><li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item power-meter__item--active"></li> <li class="power-meter__item"></li></ul></li></ul> <ul class="stats"><li class="stats__item"><span data-icon="hand" class="stats__icon"></span> <h3 class="stats__title">Siła tura</h3> <div class="stats__percentage">100%</div></li> <li class="stats__item"><span data-icon="goat" class="stats__icon"></span> <h3 class="stats__title">Zręczność kozy górskiej</h3> <div class="stats__percentage">100%</div></li> <li class="stats__item"><span data-icon="wheel" class="stats__icon"></span> <h3 class="stats__title">Wytrzymałość niesporczaka</h3> <div class="stats__percentage">100%</div></li> <li class="stats__item"><span data-icon="rooster" class="stats__icon"></span> <h3 class="stats__title">Charyzma koguta</h3> <div class="stats__percentage">100%</div></li> <li class="stats__item"><span data-icon="whale" class="stats__icon"></span> <h3 class="stats__title">Mądrość orki z majorki</h3> <div class="stats__percentage">100%</div></li> <li class="stats__item"><span data-icon="donkey" class="stats__icon"></span> <h3 class="stats__title">Opanowanie osła</h3> <div class="stats__percentage">66.5%</div></li></ul> <div class="trainer-description"><div class="trainer-description__columns"><div class="trainer-description__column"><h2 class="trainer-description__header">Indywidualne podejście</h2> <p class="trainer-description__paragraph">Jestem osobą, która zarówno do żywienia jak i treningu podchodzi zupełnie nieszablonowo. Każdy organizm jest inny, co wymusza różne style działania na daną osobę, nie ma tutaj miejsca na gotowe rozpiski, czy podejście "uniwersalne".</p> <p class="trainer-description__paragraph">Wszystko co dla Ciebie rozpiszę, dostosuję do Twojego stylu życia, umiejętności, stopnia zaawansowania i celu treningowego!</p></div> <div class="trainer-description__column"><h2 class="trainer-description__header">Wiedza zdobyta latami</h2> <p class="trainer-description__paragraph">Jestem człowiekiem, który trenerstwem zajmuje się od prawie 10 lat, nie jak większość dzisiejszych trenerów, podążających za chwilową modą.</p> <p class="trainer-description__paragraph">Nieustannie szkolę się w temacie suplementacji, żywienia i treningu, co daje Ci pewność, że Twoje rozpiski będą stworzone na bazie najlepiej działających rozwiązań, zgodnych z najnowszymi badaniami i zaleceniami.</p></div> <div class="trainer-description__column"><h2 class="trainer-description__header">Bez owijania w bawełnę</h2> <p class="trainer-description__paragraph">Treningi nie będą lekkie. Plan żywieniowy nie będzie oparty na jedzeniu ciastek i piciu Fanty. Ale stosując się do tego, co ode mnie otrzymasz, masz pewność, że Twój cel sylwetkowy zrealizujemy razem w stu procentach.</p> <p class="trainer-description__paragraph">Nie ma dróg na skróty, aby wziąć od życia swoje trzeba trochę się namęczyć. Nic nie spada z nieba. Jestem tu jednak po to, by Cię wspierać i pomóc w osiągnięciu najwyższych priorytetów!</p></div></div></div> <div class="powers__background"></div></div> <div id="blog" class="blog-brief"><h2 class="blog-brief__header">Blog</h2> <ul class="blog-posts"><li class="blog-posts__item"><div class="blog-posts__item-content"><img src="https://blog.trenujemy.pl/wp-content/uploads/2019/11/zagadka_mini.jpg" alt="ZAGADKA Z DZIECKIEM" class="blog-posts__image"> <div class="blog-posts__misc"><!----> <span class="blog-posts__date"> 12.11.2019 </span></div> <h2 class="blog-posts__title">ZAGADKA Z DZIECKIEM</h2> <p class="blog-posts__excerpt"><p>Świat skrywa wiele tajemnic. Dzisiaj zajmiemy się kilkoma problemami, nad którymi filozofowie dywagowali od tysięcy lat. Jednak zamiast odpowiedzi, pojawia się jeszcze więcej pytań…</p>
  2582. </p> <a href="https://blog.trenujemy.pl/2019/11/12/zagadka-z-dzieckiem/" target="_blank" class="blog-posts__item-link"></a> <div class="blog-posts__background"></div></div></li><li class="blog-posts__item"><div class="blog-posts__item-content"><img src="https://blog.trenujemy.pl/wp-content/uploads/2019/09/eko_world.jpg" alt="POLICJA VS BANDYCI!" class="blog-posts__image"> <div class="blog-posts__misc"><span class="blog-posts__category">Życie</span> <span class="blog-posts__date"> 10.09.2019 </span></div> <h2 class="blog-posts__title">POLICJA VS BANDYCI!</h2> <p class="blog-posts__excerpt"><p>Z czego do bandytów będzie strzelać w przyszłości policja? Czy kamizelka kuloodporna powinna być zrobiona z jarmużu? Zobacz dokąd zmierza świat rozpoczynający się od jedzenia „modnych i ekologicznych” posiłków!</p>
  2583. </p> <a href="https://blog.trenujemy.pl/2019/09/10/policja-vs-bandyci/" target="_blank" class="blog-posts__item-link"></a> <div class="blog-posts__background"></div></div></li><li class="blog-posts__item"><div class="blog-posts__item-content"><img src="https://blog.trenujemy.pl/wp-content/uploads/2019/08/mini_aw.jpg" alt="AWANTURA Z RUDĄ BABĄ" class="blog-posts__image"> <div class="blog-posts__misc"><!----> <span class="blog-posts__date"> 27.08.2019 </span></div> <h2 class="blog-posts__title">AWANTURA Z RUDĄ BABĄ</h2> <p class="blog-posts__excerpt"><p>Dziki trener i kobieta, która zajechała mu drogę, czyli jak można się naciąć w dzisiejszych czasach! Sprawdź w filmie jak potoczyła się drogowa kłótnia</p>
  2584. </p> <a href="https://blog.trenujemy.pl/2019/08/27/awantura-z-ruda-baba/" target="_blank" class="blog-posts__item-link"></a> <div class="blog-posts__background"></div></div></li><li class="blog-posts__item"><div class="blog-posts__item-content"><img src="https://blog.trenujemy.pl/wp-content/uploads/2019/08/mini_jakschudnac.jpg" alt="JAK SCHUDNĄĆ?" class="blog-posts__image"> <div class="blog-posts__misc"><span class="blog-posts__category">Porady</span> <span class="blog-posts__date"> 26.08.2019 </span></div> <h2 class="blog-posts__title">JAK SCHUDNĄĆ?</h2> <p class="blog-posts__excerpt"><p>Jak schudnąć? Dziki trener odpowiada na podstawowe pytanie, dręczące każdą osobę, walczącą o smukłą sylwetkę. Zobacz co musisz zrobić, żeby zredukować wagę!</p>
  2585. </p> <a href="https://blog.trenujemy.pl/2019/08/26/jak-schudnac/" target="_blank" class="blog-posts__item-link"></a> <div class="blog-posts__background"></div></div></li><li class="blog-posts__item"><div class="blog-posts__item-content"><img src="https://blog.trenujemy.pl/wp-content/uploads/2019/07/ubracmini.jpg" alt="W co się ubrać by być modnym?" class="blog-posts__image"> <div class="blog-posts__misc"><span class="blog-posts__category">Wideo</span> <span class="blog-posts__date"> 06.07.2019 </span></div> <h2 class="blog-posts__title">W co się ubrać by być modnym?</h2> <p class="blog-posts__excerpt"><p>W obliczu dzisiejszej, co najmniej dziwnej mody odpowiadam na pytanie, co jest najpopularniejsze na obecnych modowych wybiegach. Sprawdź, czy wpisujesz się w dzisiejsze modowe trendy !</p>
  2586. </p> <a href="https://blog.trenujemy.pl/2019/07/06/w-co-sie-ubrac-by-byc-modnym/" target="_blank" class="blog-posts__item-link"></a> <div class="blog-posts__background"></div></div></li><li class="blog-posts__item"><div class="blog-posts__item-content"><img src="https://blog.trenujemy.pl/wp-content/uploads/2019/07/9.jpg" alt="Czy warto robić formę na lato?" class="blog-posts__image"> <div class="blog-posts__misc"><span class="blog-posts__category">Porady, Wideo</span> <span class="blog-posts__date"> 05.07.2019 </span></div> <h2 class="blog-posts__title">Czy warto robić formę na lato?</h2> <p class="blog-posts__excerpt"><p>Dzisiaj o zasadności robienia formy na lato. Czy warto?</p>
  2587. </p> <a href="https://blog.trenujemy.pl/2019/07/05/czy-warto-robic-forme-na-lato/" target="_blank" class="blog-posts__item-link"></a> <div class="blog-posts__background"></div></div></li></ul> <div class="blog-brief__background"></div></div> <div class="waiting-for"><div class="waiting-for__content"><h1 class="waiting-for__header">Na co <span>jeszcze czekasz?</span></h1> <p class="waiting-for__paragraph waiting-for__paragraph--lead">Jestem człowiekiem nieszablonowym, moje podejście jest często wręcz szalone, ale uważam, że lepiej jest zrobić coś szalonego co doprowadzi Cię do celu, niż opierać się na rozwiązaniach już znanych, ale nie dających dosłownie nic. </p> <p class="waiting-for__paragraph">Moje podejście do Ciebie zawsze będzie indywidualne, bo każdy organizm jest inny. Możesz liczyć na moją pomoc zarówno w temacie treningu, diety, jak i doborze odpowiedniej suplementacji, na której praktycznie zjadłem zęby. Wybierając mnie i moją ofertę - wybierasz też siebie i swoją formę. </p> <div class="waiting-for__footer"><a href="/#pakiety" class="button button--skewed-right button--big">Zacznij swoją przemianę</a></div> <ul class="social-share waiting-for__social"><li class="social-share__item"><a target="_blank" href="https://facebook.com/dzikimichal/" class="social-share-icon social-share-icon--facebook">Udostępnij przez Facebook</a></li> <li class="social-share__item"><a target="_blank" href="https://instagram.com/dziki_trener" class="social-share-icon social-share-icon--instagram">Udostępnij przez Instagram</a></li> <li class="social-share__item"><a target="_blank" href="https://youtube.com/channel/UCbbz3_jH582xS93hxszPvjQ" class="social-share-icon social-share-icon--youtube">Udostępnij przez Youtube</a></li> <li class="social-share__item"><a target="_blank" href="mailto:kontakt@trenujemy.pl" class="social-share-icon social-share-icon--email">Udostępnij przez email</a></li></ul></div> <div class="waiting-for__background"></div></div></div></div> <footer class="footer"><ul class="footer__menu"><li class="footer__menu-item"><a href="/#pakiety" class="footer__menu-link">Pakiety</a></li> <li class="footer__menu-item"><a href="/#o-mnie" class="footer__menu-link">O mnie</a></li> <li class="footer__menu-item"><a href="/#blog" class="footer__menu-link">Blog</a></li> <li class="footer__menu-item"><a href="mailto:kontakt@trenujemy.pl" class="footer__menu-link">Kontakt</a></li> <li class="footer__menu-item"><a href="/regulamin" class="footer__menu-link">Regulamin</a></li> <li class="footer__menu-item"><a href="/polityka-prywatnosci" class="footer__menu-link">Polityka prywatności</a></li></ul> <div class="footer__copy">Wszystkie prawa zastrzeżone 2019 Trenujemy.pl</div></footer> <div class="cookies-disclaimer"><div class="container"><p>Ta strona używa plików cookies. Korzystając z niej, wyrażasz zgodę na używanie plików cookies zgodnie z aktualnymi ustawieniami przeglądarki. Więcej informacji na ten temat, w tym jak samodzielnie zmienić warunki przechowywania i dostępu do plików cookies, znajdziesz w <a href="/polityka-prywatnosci#cookies">Polityce Prywatności</a>.</p> <a class="cookies-disclaimer__close"></a></div></div> <!----></div></body></html>
Add Comment
Please, Sign In to add comment