Advertisement
Guest User

Untitled

a guest
Jun 21st, 2018
244
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 58.47 KB | None | 0 0
  1. /**
  2.  *
  3.  * @author
  4.  * @project
  5.  * @version v1.0
  6.  */
  7. /**
  8.  * TYPOGRAPHY
  9.  */
  10. body {
  11.   font-family: "Helvetica";
  12. }
  13.  
  14. h1,
  15. h2,
  16. h3,
  17. h4,
  18. h5,
  19. h6 {
  20.   font-family: "Helvetica";
  21.   margin: 0;
  22. }
  23.  
  24. @font-face {
  25.   font-family: 'amertype';
  26.   src: url("../fonts/american_typewriter_bold_bt-webfont.woff2") format("woff2"), url("../fonts/american_typewriter_bold_bt-webfont.woff") format("woff");
  27.   font-weight: 800;
  28.   font-style: bold;
  29. }
  30. @font-face {
  31.   font-family: 'amertype';
  32.   src: url("../fonts/amertypelight_bold-webfont.woff2") format("woff2"), url("../fonts/amertypelight_bold-webfont.woff") format("woff");
  33.   font-weight: normal;
  34.   font-style: normal;
  35. }
  36. /**
  37.  * STANDARD STYLES
  38.  */
  39. ul {
  40.   padding: 0;
  41.   margin: 0;
  42. }
  43.  
  44. ol {
  45.   display: block;
  46.   list-style-type: decimal;
  47.   -webkit-margin-before: 0;
  48.   -webkit-margin-after: 0;
  49.   -webkit-margin-start: 0px;
  50.   -webkit-margin-end: 0px;
  51.   -webkit-padding-start: 0px;
  52. }
  53.  
  54. hr {
  55.   border-color: #fae2db;
  56.   margin: 0;
  57.   padding: 0;
  58. }
  59.  
  60. button {
  61.   border: none;
  62. }
  63.  
  64. p {
  65.   margin-bottom: 0;
  66. }
  67.  
  68. a {
  69.   outline: 0;
  70.   text-decoration: none;
  71.   -moz-transition: all 0.15s ease-in-out;
  72.   -o-transition: all 0.15s ease-in-out;
  73.   -webkit-transition: all 0.15s ease-in-out;
  74.   transition: all 0.15s ease-in-out;
  75. }
  76. a:hover {
  77.   text-decoration: none;
  78.   -moz-transition: all 0.15s ease-in-out;
  79.   -o-transition: all 0.15s ease-in-out;
  80.   -webkit-transition: all 0.15s ease-in-out;
  81.   transition: all 0.15s ease-in-out;
  82.   color: black;
  83. }
  84. a:active {
  85.   color: black;
  86.   text-decoration: none;
  87. }
  88. a:focus {
  89.   color: black;
  90.   text-decoration: none;
  91. }
  92. a.background-primary-button:hover {
  93.   color: #FFF;
  94. }
  95. a.border-primary-button:hover {
  96.   color: #ff190e;
  97. }
  98.  
  99. .no-l-gutter {
  100.   padding-left: 0;
  101. }
  102.  
  103. .no-r-gutter {
  104.   padding-right: 0;
  105. }
  106.  
  107. .img-responsive {
  108.   min-width: 100%;
  109. }
  110.  
  111. .align-c {
  112.   text-align: center;
  113. }
  114.  
  115. .align-r {
  116.   text-align: right;
  117. }
  118.  
  119. .align-l {
  120.   text-align: left;
  121. }
  122.  
  123. .push-down-main {
  124.   margin-bottom: 140px;
  125. }
  126.  
  127. .push-down-main-3x {
  128.   margin-bottom: 420px;
  129. }
  130.  
  131. .push-down-main-6x {
  132.   margin-bottom: 840px;
  133. }
  134.  
  135. .push-down-0 {
  136.   margin-bottom: 0px;
  137. }
  138.  
  139. .push-down-5 {
  140.   margin-bottom: 5px;
  141. }
  142.  
  143. .push-down-10 {
  144.   margin-bottom: 10px;
  145. }
  146.  
  147. .push-down-15 {
  148.   margin-bottom: 15px;
  149. }
  150.  
  151. .push-down-20 {
  152.   margin-bottom: 20px;
  153. }
  154.  
  155. .push-down-25 {
  156.   margin-bottom: 25px;
  157. }
  158.  
  159. .push-down-30 {
  160.   margin-bottom: 30px;
  161. }
  162.  
  163. .push-down-35 {
  164.   margin-bottom: 35px;
  165. }
  166.  
  167. .push-down-40 {
  168.   margin-bottom: 40px;
  169. }
  170.  
  171. .push-down-45 {
  172.   margin-bottom: 45px;
  173. }
  174.  
  175. .push-down-50 {
  176.   margin-bottom: 50px;
  177. }
  178.  
  179. .push-down-55 {
  180.   margin-bottom: 55px;
  181. }
  182.  
  183. .push-down-60 {
  184.   margin-bottom: 60px;
  185. }
  186.  
  187. .push-down-65 {
  188.   margin-bottom: 65px;
  189. }
  190.  
  191. .push-down-70 {
  192.   margin-bottom: 70px;
  193. }
  194.  
  195. .push-down-75 {
  196.   margin-bottom: 75px;
  197. }
  198.  
  199. .push-down-80 {
  200.   margin-bottom: 80px;
  201. }
  202.  
  203. .push-down-85 {
  204.   margin-bottom: 85px;
  205. }
  206.  
  207. .push-down-90 {
  208.   margin-bottom: 90px;
  209. }
  210.  
  211. .push-down-95 {
  212.   margin-bottom: 95px;
  213. }
  214.  
  215. .push-down-100 {
  216.   margin-bottom: 100px;
  217. }
  218.  
  219. .push-down-105 {
  220.   margin-bottom: 105px;
  221. }
  222.  
  223. .push-down-110 {
  224.   margin-bottom: 110px;
  225. }
  226.  
  227. .push-down-115 {
  228.   margin-bottom: 115px;
  229. }
  230.  
  231. .push-down-120 {
  232.   margin-bottom: 120px;
  233. }
  234.  
  235. .push-down-125 {
  236.   margin-bottom: 125px;
  237. }
  238.  
  239. .pull-down-main {
  240.   margin-top: 140px;
  241. }
  242.  
  243. .secondary-margin {
  244.   margin: 65px;
  245. }
  246.  
  247. .push-down-secondary {
  248.   margin-bottom: 65px;
  249. }
  250.  
  251. .pull-down-secondary {
  252.   margin-top: 65px;
  253. }
  254.  
  255. .pull-down-0 {
  256.   margin-top: 0px;
  257. }
  258.  
  259. .pull-down-5 {
  260.   margin-top: 5px;
  261. }
  262.  
  263. .pull-down-10 {
  264.   margin-top: 10px;
  265. }
  266.  
  267. .pull-down-15 {
  268.   margin-top: 15px;
  269. }
  270.  
  271. .pull-down-20 {
  272.   margin-top: 20px;
  273. }
  274.  
  275. .pull-down-25 {
  276.   margin-top: 25px;
  277. }
  278.  
  279. .pull-down-30 {
  280.   margin-top: 30px;
  281. }
  282.  
  283. .pull-down-35 {
  284.   margin-top: 35px;
  285. }
  286.  
  287. .pull-down-40 {
  288.   margin-top: 40px;
  289. }
  290.  
  291. .pull-down-45 {
  292.   margin-top: 45px;
  293. }
  294.  
  295. .pull-down-50 {
  296.   margin-top: 50px;
  297. }
  298.  
  299. .pull-down-55 {
  300.   margin-top: 55px;
  301. }
  302.  
  303. .pull-down-60 {
  304.   margin-top: 60px;
  305. }
  306.  
  307. .pull-down-65 {
  308.   margin-top: 65px;
  309. }
  310.  
  311. .pull-down-70 {
  312.   margin-top: 70px;
  313. }
  314.  
  315. .pull-down-75 {
  316.   margin-top: 75px;
  317. }
  318.  
  319. .pull-down-80 {
  320.   margin-top: 80px;
  321. }
  322.  
  323. .pull-down-85 {
  324.   margin-top: 85px;
  325. }
  326.  
  327. .pull-down-90 {
  328.   margin-top: 90px;
  329. }
  330.  
  331. .pull-down-95 {
  332.   margin-top: 95px;
  333. }
  334.  
  335. .pull-down-100 {
  336.   margin-top: 100px;
  337. }
  338.  
  339. .pull-down-105 {
  340.   margin-top: 105px;
  341. }
  342.  
  343. .pull-down-110 {
  344.   margin-top: 110px;
  345. }
  346.  
  347. .pull-down-115 {
  348.   margin-top: 115px;
  349. }
  350.  
  351. .pull-down-120 {
  352.   margin-top: 120px;
  353. }
  354.  
  355. .pull-down-125 {
  356.   margin-top: 125px;
  357. }
  358.  
  359. .pull-down-170 {
  360.   margin-top: 170px;
  361. }
  362.  
  363. .transition {
  364.   -moz-transition: all 0.25s ease-in-out;
  365.   -o-transition: all 0.25s ease-in-out;
  366.   -webkit-transition: all 0.25s ease-in-out;
  367.   transition: all 0.25s ease-in-out;
  368. }
  369.  
  370. .inline-block {
  371.   display: inline-block;
  372. }
  373.  
  374. .block {
  375.   display: block;
  376. }
  377.  
  378. .full-witdh {
  379.   width: 100%;
  380. }
  381.  
  382. .relative {
  383.   position: relative;
  384. }
  385.  
  386. .absolute {
  387.   position: absolute;
  388. }
  389.  
  390. .white {
  391.   color: #FFF;
  392. }
  393.  
  394. .primary-background {
  395.   background: #FF4A41;
  396. }
  397.  
  398. .white-background {
  399.   background: #FFF;
  400. }
  401.  
  402. /**
  403.  * BUTTONS
  404.  */
  405. .cta-btn {
  406.   background: #46B426;
  407.   color: #FFF;
  408.   display: inline-block;
  409.   font-size: 24px;
  410.   text-align: center;
  411.   padding: 8px 18px;
  412.   position: relative;
  413.   margin-right: 20px;
  414.   border-top-left-radius: 5px;
  415.   border-bottom-left-radius: 5px;
  416.   font-weight: bold;
  417.   -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
  418.   -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
  419.   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
  420.   -moz-transition: all 0.2s ease-in-out;
  421.   -o-transition: all 0.2s ease-in-out;
  422.   -webkit-transition: all 0.2s ease-in-out;
  423.   transition: all 0.2s ease-in-out;
  424.   min-width: 270px;
  425.   max-width: 100%;
  426. }
  427. .cta-btn:before {
  428.   -moz-transition: all 0.2s ease-in-out;
  429.   -o-transition: all 0.2s ease-in-out;
  430.   -webkit-transition: all 0.2s ease-in-out;
  431.   transition: all 0.2s ease-in-out;
  432.   content: "";
  433.   position: absolute;
  434.   top: 0;
  435.   right: -20px;
  436.   width: 0;
  437.   height: 100%;
  438.   border-style: solid;
  439.   border-width: 25px 0 25px 20px;
  440.   border-color: transparent transparent transparent #46B426;
  441. }
  442. .cta-btn:hover {
  443.   background: #3e9f22;
  444.   color: #FFF;
  445. }
  446. .cta-btn:hover:before {
  447.   border-color: transparent transparent transparent #3e9f22;
  448. }
  449. .cta-btn.cta-smaller {
  450.   font-size: 17px;
  451.   padding: 7px 18px;
  452. }
  453. .cta-btn.cta-smaller:before {
  454.   border-width: 30px 0 30px 20px;
  455. }
  456. .cta-btn.cta-red {
  457.   background: #FF4A41;
  458. }
  459. .cta-btn.cta-red:before {
  460.   border-color: transparent transparent transparent #FF4A41;
  461. }
  462. .cta-btn.cta-red:hover {
  463.   background: #ff3228;
  464. }
  465. @media (max-width: 767px) {
  466.   .cta-btn {
  467.     min-width: 250px;
  468.     max-width: 100%;
  469.     padding: 8px 12px;
  470.     font-size: 24px;
  471.   }
  472. }
  473.  
  474. .simple-link {
  475.   text-align: center;
  476. }
  477. .simple-link a {
  478.   color: #373F47;
  479.   font-size: 14px;
  480.   dispaly: inline-block;
  481.   text-decoration: underline;
  482.   padding-top: 5px;
  483.   padding-bottom: 5px;
  484. }
  485. .simple-link a img {
  486.   margin-right: 8px;
  487.   dispaly: inline-block;
  488.   margin-top: -2px;
  489. }
  490. .simple-link.size-18 a {
  491.   font-size: 18px;
  492. }
  493. .simple-link.size-16 a {
  494.   font-size: 16px;
  495. }
  496. .simple-link.blue-link a {
  497.   color: #0000FF;
  498.   -moz-transition: all 0.2s ease-in-out;
  499.   -o-transition: all 0.2s ease-in-out;
  500.   -webkit-transition: all 0.2s ease-in-out;
  501.   transition: all 0.2s ease-in-out;
  502. }
  503. .simple-link.blue-link a:hover {
  504.   color: #7851A8;
  505. }
  506.  
  507. a.simple-link {
  508.   color: #373F47;
  509.   display: inline-block;
  510.   text-decoration: underline;
  511. }
  512. a.simple-link.white {
  513.   color: #FFF;
  514. }
  515.  
  516. a.white {
  517.   -moz-transition: all 0.2s ease-in-out;
  518.   -o-transition: all 0.2s ease-in-out;
  519.   -webkit-transition: all 0.2s ease-in-out;
  520.   transition: all 0.2s ease-in-out;
  521. }
  522. a.white:hover {
  523.   color: rgba(255, 255, 255, 0.8) !important;
  524. }
  525.  
  526. .edit-btn {
  527.   font-size: 14px;
  528.   display: inline-block;
  529.   -moz-border-radius: 4px;
  530.   -webkit-border-radius: 4px;
  531.   border-radius: 4px;
  532.   padding: 10px 18px 10px 40px;
  533.   color: #FFF;
  534.   background: black;
  535.   position: relative;
  536. }
  537. .edit-btn:before {
  538.   position: absolute;
  539.   top: 50%;
  540.   -moz-transform: translateY(-50%);
  541.   -ms-transform: translateY(-50%);
  542.   -webkit-transform: translateY(-50%);
  543.   transform: translateY(-50%);
  544.   left: 15px;
  545.   content: url("../img/icons/edit.png");
  546.   width: auto;
  547.   height: auto;
  548. }
  549. .edit-btn.save-changes {
  550.   background: #46B426;
  551. }
  552. .edit-btn.save-changes:before {
  553.   position: absolute;
  554.   top: 50%;
  555.   -moz-transform: translateY(-50%);
  556.   -ms-transform: translateY(-50%);
  557.   -webkit-transform: translateY(-50%);
  558.   transform: translateY(-50%);
  559.   left: 15px;
  560.   content: url("../img/icons/white-check.png");
  561.   width: auto;
  562.   height: auto;
  563. }
  564.  
  565. /**
  566.  * FORMS
  567.  */
  568. .main-form .main-form-flex {
  569.   display: box;
  570.   display: -ms-flexbox;
  571.   display: -o-flexbox;
  572.   display: -webkit-box;
  573.   display: -webkit-flex;
  574.   display: flex;
  575.   align-items: stretch;
  576.   -webkit-box-pack: justify;
  577.   -moz-box-pack: justify;
  578.   -ms-flex-pack: justify;
  579.   -webkit-justify-content: space-between;
  580.   justify-content: space-between;
  581.   max-width: 100%;
  582.   -webkit-box-wrap: wrap;
  583.   -webkit-flex-wrap: wrap;
  584.   -ms-flex-wrap: wrap;
  585.   flex-wrap: wrap;
  586. }
  587. .main-form .label-input-one-row {
  588.   display: box;
  589.   display: -ms-flexbox;
  590.   display: -o-flexbox;
  591.   display: -webkit-box;
  592.   display: -webkit-flex;
  593.   display: flex;
  594.   -webkit-box-align: center;
  595.   -moz-box-align: center;
  596.   -ms-flex-align: center;
  597.   -webkit-align-items: center;
  598.   align-items: center;
  599.   -webkit-box-pack: center;
  600.   -moz-box-pack: center;
  601.   -ms-flex-pack: center;
  602.   -webkit-justify-content: center;
  603.   justify-content: center;
  604.   margin-bottom: 10px;
  605. }
  606. .main-form .label-input-one-row label {
  607.   margin-bottom: 0;
  608.   margin-right: 10px;
  609.   width: 35%;
  610.   text-align: right;
  611.   font-size: 16px;
  612. }
  613. .main-form .label-input-one-row input {
  614.   width: 40%;
  615.   margin-right: 10px;
  616. }
  617. @media (max-width: 767px) {
  618.   .main-form .label-input-one-row {
  619.     display: box;
  620.     display: -ms-flexbox;
  621.     display: -o-flexbox;
  622.     display: -webkit-box;
  623.     display: -webkit-flex;
  624.     display: flex;
  625.     -webkit-box-align: center;
  626.     -moz-box-align: center;
  627.     -ms-flex-align: center;
  628.     -webkit-align-items: center;
  629.     align-items: center;
  630.     -webkit-box-pack: center;
  631.     -moz-box-pack: center;
  632.     -ms-flex-pack: center;
  633.     -webkit-justify-content: center;
  634.     justify-content: center;
  635.     margin-bottom: 10px;
  636.   }
  637.   .main-form .label-input-one-row label {
  638.     margin-bottom: 0;
  639.     margin-right: 10px;
  640.     width: 35%;
  641.     text-align: right;
  642.     font-size: 14px;
  643.   }
  644.   .main-form .label-input-one-row input {
  645.     width: 55%;
  646.     margin-right: 10px;
  647.   }
  648. }
  649. .main-form .single-input-row {
  650.   position: relative;
  651. }
  652. .main-form .single-input-row input {
  653.   margin-top: 20px;
  654.   width: 100%;
  655.   max-width: 100%;
  656.   display: block;
  657.   webkit-box-sizing: border-box;
  658.   -moz-box-sizing: border-box;
  659.   box-sizing: border-box;
  660. }
  661. .main-form .single-input-row.mt-0 input {
  662.   margin-top: 0;
  663. }
  664. .main-form.v2 {
  665.   /** INPUTS */
  666. }
  667. .main-form.v2 label {
  668.   cursor: pointer;
  669.   font-size: 14px;
  670.   display: block;
  671.   margin-bottom: 8px;
  672.   color: #373F47;
  673.   font-weight: lighter;
  674. }
  675. .main-form.v2 label .yellow {
  676.   color: #FFFF01;
  677. }
  678. .main-form.v2 label.black-label {
  679.   color: black;
  680.   font-size: 14px;
  681.   font-weight: normal;
  682. }
  683. .main-form.v2 label.black-label a {
  684.   color: black;
  685.   text-decoration: underline;
  686. }
  687. .main-form.v2 label.input-label {
  688.   position: absolute;
  689.   top: -10px;
  690.   left: 7px;
  691.   z-index: 10;
  692.   background: #FFF;
  693.   padding: 0px 5px;
  694.   font-size: 14px;
  695.   font-weight: bold;
  696.   color: #373F47;
  697. }
  698. @media (max-width: 767px) {
  699.   .main-form.v2 label.input-label {
  700.     top: -8px;
  701.     left: 8px;
  702.     z-index: 10;
  703.     padding: 0px 5px;
  704.     font-size: 11px;
  705.   }
  706. }
  707. .main-form.v2 input, .main-form.v2 textarea {
  708.   -moz-border-radius: 4px;
  709.   -webkit-border-radius: 4px;
  710.   border-radius: 4px;
  711.   padding: 10px 10px 6px 11px;
  712.   background: #FFFFFF;
  713.   border: 1px solid #979797;
  714.   font-size: 16px;
  715.   font-weight: 600;
  716.   box-shadow: none;
  717.   max-width: 100%;
  718.   color: black;
  719.   position: relative;
  720.   webkit-box-sizing: border-box;
  721.   -moz-box-sizing: border-box;
  722.   box-sizing: border-box;
  723. }
  724. .main-form.v2 input:focus, .main-form.v2 textarea:focus {
  725.   border-color: #6D489F !important;
  726.   box-shadow: none;
  727.   outline: none !important;
  728. }
  729. .main-form.v2 input:invalid:not(.no-red), .main-form.v2 input.error, .main-form.v2 textarea:invalid:not(.no-red), .main-form.v2 textarea.error {
  730.   border: 1px solid red;
  731. }
  732. .main-form.v2 .error {
  733.   color: red;
  734.   font-size: 12px;
  735.   margin-top: 3px;
  736. }
  737. .main-form.v2 input[type="text"], .main-form.v2 textarea {
  738.   /* Remove First */
  739.   -webkit-appearance: none !important;
  740.   -moz-appearance: none !important;
  741.   appearance: none !important;
  742. }
  743. .main-form.v2 ::-webkit-input-placeholder {
  744.   color: #BBBBBB;
  745.   font-size: 14px;
  746.   font-weight: 300;
  747. }
  748. .main-form.v2 :-moz-placeholder {
  749.   /* Firefox 18- */
  750.   color: #BBBBBB;
  751.   font-size: 14px;
  752.   font-weight: 300;
  753. }
  754. .main-form.v2 ::-moz-placeholder {
  755.   /* Firefox 19+ */
  756.   color: #BBBBBB;
  757.   font-size: 14px;
  758.   font-weight: 300;
  759. }
  760. .main-form.v2 :-ms-input-placeholder {
  761.   color: #BBBBBB;
  762.   font-size: 14px;
  763.   font-weight: 300;
  764. }
  765.  
  766. .form-notification {
  767.   color: #FF0000;
  768.   font-size: 12px;
  769.   margin-top: 8px;
  770.   margin-left: 0px;
  771. }
  772. .form-notification span {
  773.   color: #373F47;
  774.   font-weight: lighter;
  775. }
  776.  
  777. .checkbox {
  778.   position: relative;
  779. }
  780. .checkbox .aligned-content {
  781.   position: absolute;
  782.   top: 0;
  783.   left: -30px;
  784. }
  785.  
  786. body.oldAndroid .main-form .main-form__flexbox {
  787.   display: block;
  788. }
  789. body.oldAndroid .main-form .main-form__flexbox .main-form__single-column {
  790.   width: 100% !important;
  791.   display: block;
  792. }
  793.  
  794. label {
  795.   cursor: pointer;
  796.   font-size: 13px;
  797.   display: block;
  798.   margin-bottom: 8px;
  799.   color: black;
  800. }
  801. label .yellow {
  802.   color: #FFFF01;
  803. }
  804. label.size-16 {
  805.   font-size: 16px;
  806. }
  807.  
  808. /** INPUTS */
  809. input, textarea {
  810.   -moz-border-radius: 2px;
  811.   -webkit-border-radius: 2px;
  812.   border-radius: 2px;
  813.   padding: 5px 10px 5px 10px;
  814.   background: rgba(255, 255, 255, 0.7);
  815.   border: 1px solid #979797;
  816.   font-size: 16px;
  817.   font-weight: 600;
  818.   box-shadow: none;
  819.   max-width: 100%;
  820.   color: black;
  821.   position: relative;
  822. }
  823. input:focus, textarea:focus {
  824.   border-color: black !important;
  825.   box-shadow: none;
  826.   outline: none !important;
  827. }
  828. input:invalid:not(.no-red), input.error, textarea:invalid:not(.no-red), textarea.error {
  829.   border: 1px solid red;
  830. }
  831.  
  832. .error {
  833.   color: red;
  834.   font-size: 12px;
  835.   margin-top: 3px;
  836. }
  837.  
  838. input[type="text"], textarea {
  839.   /* Remove First */
  840.   -webkit-appearance: none !important;
  841.   -moz-appearance: none !important;
  842.   appearance: none !important;
  843. }
  844.  
  845. ::-webkit-input-placeholder {
  846.   color: #BBBBBB;
  847.   font-size: 15px;
  848.   font-weight: 300;
  849. }
  850.  
  851. :-moz-placeholder {
  852.   /* Firefox 18- */
  853.   color: #BBBBBB;
  854.   font-size: 15px;
  855.   font-weight: 300;
  856. }
  857.  
  858. ::-moz-placeholder {
  859.   /* Firefox 19+ */
  860.   color: #BBBBBB;
  861.   font-size: 15px;
  862.   font-weight: 300;
  863. }
  864.  
  865. :-ms-input-placeholder {
  866.   color: #BBBBBB;
  867.   font-size: 15px;
  868.   font-weight: 300;
  869. }
  870.  
  871. /* SELECTS */
  872. select {
  873.   width: 100%;
  874.   text-transform: uppercase;
  875.   font-size: 16px;
  876.   cursor: pointer;
  877.   margin: 0;
  878.   -moz-border-radius: 4px;
  879.   -webkit-border-radius: 4px;
  880.   border-radius: 4px;
  881.   border: 1px solid #979797;
  882.   overflow: hidden;
  883.   display: block;
  884.   position: relative;
  885.   background: rgba(255, 255, 255, 0.7);
  886.   padding: 0px 10px;
  887.   height: 35px;
  888.   background: #FBFDFE;
  889.   color: #373F47;
  890. }
  891. select option {
  892.   font-weight: bold;
  893.   color: #373F47;
  894. }
  895.  
  896. /**
  897.  *  ORDER PAGE
  898.  */
  899. .single-step .title {
  900.   background: #ECDCFF;
  901.   font-weight: lighter;
  902.   color: black;
  903.   position: relative;
  904.   padding-left: 40px;
  905.   padding-top: 10px;
  906.   padding-right: 10px;
  907.   padding-bottom: 10px;
  908. }
  909. .single-step .title .number {
  910.   width: 25px;
  911.   height: 25px;
  912.   line-height: 25px;
  913.   border: 1px solid #373F47;
  914.   -moz-border-radius: 50%;
  915.   -webkit-border-radius: 50%;
  916.   border-radius: 50%;
  917.   display: inline-block;
  918.   text-align: center;
  919.   position: absolute;
  920.   top: 50%;
  921.   -moz-transform: translateY(-50%);
  922.   -ms-transform: translateY(-50%);
  923.   -webkit-transform: translateY(-50%);
  924.   transform: translateY(-50%);
  925.   left: 8px;
  926. }
  927. .single-step .title .content {
  928.   font-size: 18px;
  929. }
  930. .single-step .book-info-holder {
  931.   border: 1px solid #CAD2DA;
  932. }
  933. .single-step .book-info-holder .final-data {
  934.   text-align: center;
  935.   padding: 10px;
  936.   background: #CAD2DA;
  937.   font-size: 15px;
  938.   color: #373F47;
  939.   font-weight: lighter;
  940. }
  941. .single-step .book-info-holder .final-data strong {
  942.   display: block;
  943.   font-size: 20px;
  944. }
  945.  
  946. .select-sex {
  947.   list-style: none;
  948. }
  949. .select-sex li {
  950.   display: inline-block;
  951.   margin-right: 10px;
  952. }
  953. .select-sex li:last-of-type {
  954.   margin-right: 0;
  955. }
  956. .select-sex li a {
  957.   border: 1px solid #979797;
  958.   font-size: 16px;
  959.   color: #373F47;
  960.   background: #FBFDFE;
  961.   padding: 8px 30px;
  962.   -moz-border-radius: 4px;
  963.   -webkit-border-radius: 4px;
  964.   border-radius: 4px;
  965.   display: inline-block;
  966.   text-algin: center;
  967. }
  968. .select-sex li a.selected {
  969.   background: #CAD2DA;
  970. }
  971.  
  972. .conditions {
  973.   font-size: 13px;
  974.   color: #666666;
  975. }
  976. .conditions a {
  977.   color: #666666;
  978.   text-decoration: underline;
  979. }
  980.  
  981. /** RADIOS AND CHECKBOXES */
  982. /* iCheck plugin Flat
  983. ----------------------------------- */
  984. .icheckbox_flat-pp,
  985. .iradio_flat-pp {
  986.   display: inline-block;
  987.   *display: inline;
  988.   vertical-align: middle;
  989.   margin: 0;
  990.   margin-top: -4px;
  991.   margin-right: 2px;
  992.   padding: 0;
  993.   width: 21px;
  994.   height: 20px;
  995.   background: url(../img/forms/grey.png?v=1) no-repeat;
  996.   border: none;
  997.   cursor: pointer;
  998.   -moz-transform: scale(0.8);
  999.   -ms-transform: scale(0.8);
  1000.   -webkit-transform: scale(0.8);
  1001.   transform: scale(0.8);
  1002. }
  1003. .icheckbox_flat-pp.white,
  1004. .iradio_flat-pp.white {
  1005.   background-image: url(../img/forms/white.png);
  1006. }
  1007.  
  1008. .icheckbox_flat-pp {
  1009.   background-position: 0 0;
  1010. }
  1011.  
  1012. .icheckbox_flat-pp.checked {
  1013.   background-position: -22px 0;
  1014. }
  1015.  
  1016. .icheckbox_flat-pp.disabled {
  1017.   background-position: -44px 0;
  1018.   cursor: default;
  1019. }
  1020.  
  1021. .icheckbox_flat-pp.checked.disabled {
  1022.   background-position: -66px 0;
  1023. }
  1024.  
  1025. .iradio_flat-pp {
  1026.   background-position: -88px 0;
  1027. }
  1028.  
  1029. .iradio_flat-pp.checked {
  1030.   background-position: -110px 0;
  1031. }
  1032.  
  1033. .iradio_flat-pp.disabled {
  1034.   background-position: -132px 0;
  1035.   cursor: default;
  1036. }
  1037.  
  1038. .iradio_flat-pp.checked.disabled {
  1039.   background-position: -154px 0;
  1040. }
  1041.  
  1042. /* HiDPI support */
  1043. @media (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi), (min-resolution: 1.25dppx) {
  1044.   .icheckbox_flat-pp,
  1045.   .iradio_flat-pp {
  1046.     background-image: url(../img/forms/grey@2x.png);
  1047.     -webkit-background-size: 176px 22px;
  1048.     background-size: 176px 22px;
  1049.   }
  1050.   .icheckbox_flat-pp.white,
  1051.   .iradio_flat-pp.white {
  1052.     background-image: url(../img/forms/white@2x.png);
  1053.   }
  1054. }
  1055. /* HEADER STYLE */
  1056. body {
  1057.   background: #dadada;
  1058. }
  1059. body .main-page-holder {
  1060.   max-width: 720px;
  1061.   margin: 0 auto;
  1062.   -webkit-box-shadow: 0px 0px 59px 0px rgba(0, 0, 0, 0.15);
  1063.   -moz-box-shadow: 0px 0px 59px 0px rgba(0, 0, 0, 0.15);
  1064.   box-shadow: 0px 0px 59px 0px rgba(0, 0, 0, 0.15);
  1065.   background: #FFF;
  1066. }
  1067. body .container {
  1068.   max-width: 720px;
  1069.   margin: 0 auto;
  1070. }
  1071. @media (max-width: 767px) {
  1072.   body {
  1073.     box-shadow: none;
  1074.   }
  1075. }
  1076.  
  1077. /* MAIN STYLE */
  1078. .mw-100 {
  1079.   max-width: 100%;
  1080.   max-height: 100%;
  1081. }
  1082.  
  1083. /* TITLES */
  1084. .main-title {
  1085.   font-size: 24px;
  1086.   color: black;
  1087.   font-weight: bold;
  1088. }
  1089. .main-title.title-white {
  1090.   color: #FFF;
  1091. }
  1092. .main-title.size-30 {
  1093.   font-size: 30px;
  1094. }
  1095. .main-title.size-36 {
  1096.   font-size: 36px;
  1097. }
  1098. .main-title.size-20 {
  1099.   font-size: 20px;
  1100. }
  1101. .main-title.size-18 {
  1102.   font-size: 18px;
  1103. }
  1104. .main-title.size-16 {
  1105.   font-size: 16px;
  1106. }
  1107. .main-title.size-14 {
  1108.   font-size: 14px;
  1109. }
  1110. .main-title.secondary-font {
  1111.   font-family: "amertype";
  1112. }
  1113. .main-title.primary-color span {
  1114.   color: #FF4A41;
  1115. }
  1116. .main-title.title-secondary {
  1117.   color: #7851A8;
  1118. }
  1119. .main-title.title-purple {
  1120.   color: #7851A8;
  1121. }
  1122.  
  1123. .cta-title {
  1124.   font-size: 30px;
  1125.   font-family: "amertype";
  1126.   color: black;
  1127.   display: block;
  1128.   font-weight: bold;
  1129.   text-align: center;
  1130.   padding-bottom: 20px;
  1131.   padding-top: 30px;
  1132. }
  1133. .cta-title span {
  1134.   color: #FF4A41;
  1135. }
  1136. @media (max-width: 767px) {
  1137.   .cta-title {
  1138.     padding-bottom: 0;
  1139.   }
  1140. }
  1141.  
  1142. /* TEXT */
  1143. .main-text {
  1144.   font-size: 14px;
  1145. }
  1146. .main-text.text-white {
  1147.   color: #FFF;
  1148. }
  1149. .main-text.text-light-silver {
  1150.   color: #979797;
  1151. }
  1152. .main-text.size-11 {
  1153.   font-size: 11px;
  1154. }
  1155. .main-text.size-12 {
  1156.   font-size: 12px;
  1157. }
  1158. .main-text.size-20 {
  1159.   font-size: 20px;
  1160. }
  1161. .main-text.size-16 {
  1162.   font-size: 16px;
  1163. }
  1164. .main-text.size-18 {
  1165.   font-size: 18px;
  1166. }
  1167. .main-text.size-13 {
  1168.   font-size: 13px;
  1169. }
  1170. .main-text.secondary-font {
  1171.   font-family: "amertype";
  1172. }
  1173. .main-text.secondary-font p {
  1174.   font-family: "amertype";
  1175. }
  1176.  
  1177. .bg-black {
  1178.   background: black;
  1179. }
  1180.  
  1181. .bg-purple {
  1182.   background: #7851A8;
  1183. }
  1184.  
  1185. .bg-light-purple {
  1186.   background: #ebe2fd;
  1187. }
  1188.  
  1189. .bg-beige {
  1190.   background: #FFF2CC;
  1191. }
  1192.  
  1193. .bg-white {
  1194.   background: #FFF;
  1195. }
  1196.  
  1197. /* INNER */
  1198. .inner-tb-40-80 {
  1199.   padding-top: 40px;
  1200.   padding-bottom: 80px;
  1201. }
  1202. @media (max-width: 767px) {
  1203.   .inner-tb-40-80 {
  1204.     padding-top: 10px;
  1205.     padding-bottom: 70px;
  1206.   }
  1207. }
  1208.  
  1209. .inner-10 {
  1210.   padding: 10px;
  1211. }
  1212.  
  1213. .inner-15 {
  1214.   padding: 15px;
  1215. }
  1216.  
  1217. .inner-tb-40 {
  1218.   padding: 40px 0;
  1219. }
  1220.  
  1221. .inner-t-40 {
  1222.   padding-top: 40px;
  1223. }
  1224.  
  1225. .inner-lr-10 {
  1226.   padding-right: 10px;
  1227.   padding-left: 10px;
  1228. }
  1229.  
  1230. .inner-lr-15 {
  1231.   padding-right: 10px;
  1232.   padding-left: 10px;
  1233. }
  1234.  
  1235. /* OFFER TIMER */
  1236. .offer-timer {
  1237.   background: #FF4A41;
  1238.   padding: 15px 0 8px 0;
  1239.   top: 0;
  1240.   max-width: 100%;
  1241.   z-index: 100;
  1242.   -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.53);
  1243.   -moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.53);
  1244.   box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.53);
  1245. }
  1246. .offer-timer.red-timer {
  1247.   background: none;
  1248.   box-shadow: none;
  1249.   text-align: center;
  1250.   padding: 0px 0 0px 0;
  1251. }
  1252. .offer-timer.red-timer .timer-holder {
  1253.   background: black;
  1254.   display: inline-block;
  1255.   text-align: center;
  1256.   padding: 10px 18px 12px 18px;
  1257.   position: relative;
  1258.   margin-bottom: 0px;
  1259. }
  1260. .offer-timer.red-timer .timer-holder .timer {
  1261.   margin-left: 0;
  1262. }
  1263. .offer-timer.red-timer .timer-holder .timer li {
  1264.   margin-right: 20px;
  1265.   position: relative;
  1266. }
  1267. .offer-timer.red-timer .timer-holder .timer li:last-of-type {
  1268.   margin-right: 0;
  1269. }
  1270. .offer-timer.red-timer .timer-holder .timer li:last-of-type:before {
  1271.   display: none;
  1272. }
  1273. .offer-timer.red-timer .timer-holder .timer li:before {
  1274.   position: absolute;
  1275.   content: ":";
  1276.   font-size: 40px;
  1277.   color: #FFF;
  1278.   top: 50%;
  1279.   margin-top: -13px;
  1280.   -moz-transform: translateY(-50%);
  1281.   -ms-transform: translateY(-50%);
  1282.   -webkit-transform: translateY(-50%);
  1283.   transform: translateY(-50%);
  1284.   right: -17px;
  1285. }
  1286. .offer-timer.red-timer .timer-holder .timer li span {
  1287.   background: #FF4A41;
  1288. }
  1289. .offer-timer.v2 {
  1290.   background: none;
  1291.   box-shadow: none;
  1292.   text-align: center;
  1293.   padding: 0px 0 0px 0;
  1294. }
  1295. .offer-timer.v2 .timer-holder {
  1296.   background: black;
  1297.   display: inline-block;
  1298.   text-align: center;
  1299.   padding: 10px 18px 12px 18px;
  1300.   position: relative;
  1301.   margin-bottom: 20px;
  1302. }
  1303. .offer-timer.v2 .timer-holder:before {
  1304.   position: absolute;
  1305.   z-index: 10;
  1306.   bottom: -10px;
  1307.   left: 50%;
  1308.   -moz-transform: translateX(-50%);
  1309.   -ms-transform: translateX(-50%);
  1310.   -webkit-transform: translateX(-50%);
  1311.   transform: translateX(-50%);
  1312.   content: "";
  1313.   width: 100%;
  1314.   max-width: 100%;
  1315.   height: 0px;
  1316.   border-style: solid;
  1317.   border-width: 10px 72px 0 72px;
  1318.   border-color: #000 transparent transparent transparent;
  1319. }
  1320. .offer-timer.v2 .timer-holder .timer {
  1321.   margin-left: 0;
  1322. }
  1323. .offer-timer.v2 .timer-holder .timer li {
  1324.   margin-right: 20px;
  1325.   position: relative;
  1326. }
  1327. .offer-timer.v2 .timer-holder .timer li:last-of-type {
  1328.   margin-right: 0;
  1329. }
  1330. .offer-timer.v2 .timer-holder .timer li:last-of-type:before {
  1331.   display: none;
  1332. }
  1333. .offer-timer.v2 .timer-holder .timer li:before {
  1334.   position: absolute;
  1335.   content: ":";
  1336.   font-size: 40px;
  1337.   color: #FFF;
  1338.   top: 50%;
  1339.   -moz-transform: translateY(-50%);
  1340.   -ms-transform: translateY(-50%);
  1341.   -webkit-transform: translateY(-50%);
  1342.   transform: translateY(-50%);
  1343.   right: -17px;
  1344. }
  1345. .offer-timer.v2 .timer-holder .timer li span {
  1346.   background: #FF4A41;
  1347. }
  1348. .offer-timer.v2.no-arrow-bottom .timer-holder {
  1349.   background: black;
  1350.   display: inline-block;
  1351.   text-align: center;
  1352.   padding: 12px 10px 12px 10px;
  1353.   position: relative;
  1354.   margin-bottom: 0px;
  1355. }
  1356. .offer-timer.v2.no-arrow-bottom .timer-holder:before {
  1357.   display: none;
  1358. }
  1359. .offer-timer.v2.no-arrow-bottom .timer-holder .timer {
  1360.   list-style: none;
  1361.   margin-left: 0px;
  1362. }
  1363. .offer-timer.v2.no-arrow-bottom .timer-holder .timer li {
  1364.   display: inline-block;
  1365.   text-align: center;
  1366.   font-size: 22px;
  1367.   margin-right: 8px;
  1368. }
  1369. .offer-timer.v2.no-arrow-bottom .timer-holder .timer li:before {
  1370.   position: absolute;
  1371.   content: ":";
  1372.   font-size: 30px;
  1373.   color: #FFF;
  1374.   top: 50%;
  1375.   -moz-transform: translateY(-50%);
  1376.   -ms-transform: translateY(-50%);
  1377.   -webkit-transform: translateY(-50%);
  1378.   transform: translateY(-50%);
  1379.   right: -9.5px;
  1380.   margin-top: -2px;
  1381. }
  1382. .offer-timer.v2.no-arrow-bottom .timer-holder .timer li span {
  1383.   background: #FF4A41;
  1384.   display: inline-block;
  1385.   -moz-border-radius: 6px;
  1386.   -webkit-border-radius: 6px;
  1387.   border-radius: 6px;
  1388.   padding: 2px 4px;
  1389.   color: #FFF;
  1390.   letter-spacing: 0;
  1391. }
  1392. .offer-timer.v3 .timer-holder .timer {
  1393.   margin-left: 20px;
  1394. }
  1395. .offer-timer.v3 .timer-holder .timer li {
  1396.   font-size: 30px;
  1397.   margin-right: 2px;
  1398. }
  1399. .offer-timer.v3 .timer-holder .timer li span {
  1400.   background: none;
  1401.   display: inline-block;
  1402.   -moz-border-radius: 6px;
  1403.   -webkit-border-radius: 6px;
  1404.   border-radius: 6px;
  1405.   padding: 2px 4px;
  1406.   color: #FFF;
  1407.   letter-spacing: 0;
  1408.   font-weight: 900;
  1409.   font-family: "Tahoma";
  1410. }
  1411. .offer-timer.v3 .timer-holder .timer li strong {
  1412.   margin-top: 2px;
  1413.   display: block;
  1414.   font-size: 12px;
  1415.   color: #FFF;
  1416.   text-transform: uppercase;
  1417. }
  1418. .offer-timer .intro-title {
  1419.   font-weight: bold;
  1420.   color: #FFF;
  1421.   font-size: 16px;
  1422.   display: block;
  1423.   text-align: center;
  1424.   font-family: "amertype";
  1425. }
  1426. .offer-timer .timer-holder {
  1427.   display: box;
  1428.   display: -ms-flexbox;
  1429.   display: -o-flexbox;
  1430.   display: -webkit-box;
  1431.   display: -webkit-flex;
  1432.   display: flex;
  1433.   -webkit-box-pack: center;
  1434.   -moz-box-pack: center;
  1435.   -ms-flex-pack: center;
  1436.   -webkit-justify-content: center;
  1437.   justify-content: center;
  1438.   -webkit-box-align: center;
  1439.   -moz-box-align: center;
  1440.   -ms-flex-align: center;
  1441.   -webkit-align-items: center;
  1442.   align-items: center;
  1443. }
  1444. .offer-timer .timer-holder .price-offer {
  1445.   background: #FFF;
  1446.   text-align: center;
  1447.   padding: 10px 10px;
  1448.   -moz-border-radius: 10px;
  1449.   -webkit-border-radius: 10px;
  1450.   border-radius: 10px;
  1451.   font-weight: bold;
  1452. }
  1453. .offer-timer .timer-holder .price-offer del {
  1454.   color: black;
  1455.   display: block;
  1456.   font-size: 23px;
  1457. }
  1458. .offer-timer .timer-holder .price-offer span {
  1459.   color: #FF4A41;
  1460.   display: block;
  1461.   font-size: 26px;
  1462.   line-height: 26px;
  1463. }
  1464. .offer-timer .timer-holder .timer {
  1465.   list-style: none;
  1466.   margin-left: 20px;
  1467. }
  1468. .offer-timer .timer-holder .timer li {
  1469.   display: inline-block;
  1470.   text-align: center;
  1471.   font-size: 30px;
  1472.   margin-right: 2px;
  1473. }
  1474. .offer-timer .timer-holder .timer li span {
  1475.   background: rgba(0, 0, 0, 0.8);
  1476.   display: inline-block;
  1477.   -moz-border-radius: 6px;
  1478.   -webkit-border-radius: 6px;
  1479.   border-radius: 6px;
  1480.   padding: 2px 4px;
  1481.   color: #FFF;
  1482.   letter-spacing: 0;
  1483. }
  1484. .offer-timer .timer-holder .timer li strong {
  1485.   margin-top: 5px;
  1486.   display: block;
  1487.   font-size: 12px;
  1488.   color: #FFF;
  1489.   text-transform: uppercase;
  1490. }
  1491. @media (max-width: 767px) {
  1492.   .offer-timer {
  1493.     width: 100%;
  1494.   }
  1495.   .offer-timer.v2 {
  1496.     width: auto;
  1497.   }
  1498.   .offer-timer .timer-holder .price-offer {
  1499.     padding: 10px 8px;
  1500.   }
  1501.   .offer-timer .timer-holder .price-offer del {
  1502.     font-size: 20px;
  1503.   }
  1504.   .offer-timer .timer-holder .price-offer span {
  1505.     font-size: 22px;
  1506.     line-height: 22px;
  1507.   }
  1508.   .offer-timer .timer-holder .timer {
  1509.     margin-left: 15px;
  1510.   }
  1511.   .offer-timer .timer-holder .timer li {
  1512.     font-size: 28px;
  1513.     margin-right: 0px;
  1514.   }
  1515.   .offer-timer .timer-holder .timer li span {
  1516.     padding: 2px 4px;
  1517.   }
  1518.   .offer-timer .intro-title {
  1519.     font-size: 14px;
  1520.   }
  1521. }
  1522.  
  1523. /* LOGO HOLDER */
  1524. .logo-holder {
  1525.   background: #7851A8;
  1526.   text-align: center;
  1527. }
  1528. .logo-holder.bg-black {
  1529.   background: black;
  1530. }
  1531. .logo-holder.height-70 img {
  1532.   max-height: 70px;
  1533. }
  1534. .logo-holder img {
  1535.   max-height: 40px;
  1536. }
  1537.  
  1538. /* MAIN BANNER */
  1539. .main-banner {
  1540.   background-image: url(../img/main-banner.jpg);
  1541.   background-size: cover;
  1542.   background-repeat: no-repeat;
  1543.   background-position: top right;
  1544.   position: relative;
  1545.   overflow: hidden;
  1546. }
  1547. .main-banner .banner-content {
  1548.   font-weight: bold;
  1549.   padding-top: 80px;
  1550.   padding-bottom: 140px;
  1551.   color: black;
  1552.   text-align: center;
  1553. }
  1554. .main-banner .banner-content h1 {
  1555.   font-size: 50px;
  1556.   font-family: "amertype";
  1557.   font-weight: bold;
  1558. }
  1559. .main-banner .banner-content h1 span {
  1560.   color: #7851A8;
  1561. }
  1562. .main-banner:before {
  1563.   content: "";
  1564.   position: absolute;
  1565.   bottom: 0;
  1566.   left: 0;
  1567.   width: 0;
  1568.   height: 0;
  1569.   border-style: solid;
  1570.   border-width: 50px 0 0 365px;
  1571.   border-color: transparent transparent transparent #000000;
  1572. }
  1573. .main-banner:after {
  1574.   content: "";
  1575.   position: absolute;
  1576.   bottom: 0;
  1577.   right: 0;
  1578.   width: 0;
  1579.   height: 0;
  1580.   border-style: solid;
  1581.   border-width: 0 0 50px 365px;
  1582.   border-color: transparent transparent #000000 transparent;
  1583. }
  1584. @media (max-width: 767px) {
  1585.   .main-banner .banner-content {
  1586.     padding-top: 40px;
  1587.     padding-bottom: 75px;
  1588.     min-height: 300px;
  1589.   }
  1590.   .main-banner .banner-content h1 {
  1591.     font-size: 28px;
  1592.   }
  1593. }
  1594.  
  1595. /* FEATURES */
  1596. .features-holder {
  1597.   background: #fcf0ef;
  1598.   position: relative;
  1599. }
  1600. .features-holder .top-title {
  1601.   background: #FF4A41;
  1602.   padding: 20px 35px;
  1603.   margin-bottom: 20px;
  1604.   color: #FFF;
  1605.   font-weight: bold;
  1606.   font-size: 30px;
  1607.   text-transform: uppercase;
  1608.   display: inline-block;
  1609.   text-align: center;
  1610.   margin-top: -55px;
  1611.   position: relative;
  1612. }
  1613. .features-holder .top-title:before {
  1614.   content: "";
  1615.   position: absolute;
  1616.   bottom: -18px;
  1617.   left: 50%;
  1618.   -moz-transform: translateX(-50%);
  1619.   -ms-transform: translateX(-50%);
  1620.   -webkit-transform: translateX(-50%);
  1621.   transform: translateX(-50%);
  1622.   width: 0;
  1623.   height: 0;
  1624.   border-style: solid;
  1625.   border-width: 18px 18px 0 18px;
  1626.   border-color: #FF4A41 transparent transparent transparent;
  1627. }
  1628. .features-holder .equal {
  1629.   font-size: 50px;
  1630.   line-height: 50px;
  1631.   color: #FF4A41;
  1632.   text-align: center;
  1633.   margin-bottom: 10px;
  1634. }
  1635.  
  1636. ul.features-listing {
  1637.   list-style: none;
  1638.   -webkit-box-wrap: wrap;
  1639.   -webkit-flex-wrap: wrap;
  1640.   -ms-flex-wrap: wrap;
  1641.   flex-wrap: wrap;
  1642.   -webkit-box-pack: center;
  1643.   -moz-box-pack: center;
  1644.   -ms-flex-pack: center;
  1645.   -webkit-justify-content: center;
  1646.   justify-content: center;
  1647.   display: box;
  1648.   display: -ms-flexbox;
  1649.   display: -o-flexbox;
  1650.   display: -webkit-box;
  1651.   display: -webkit-flex;
  1652.   display: flex;
  1653.   width: -webkit-calc(100% + 15px);
  1654.   width: calc(100% + 15px);
  1655.   margin-left: -7px;
  1656. }
  1657. ul.features-listing li {
  1658.   margin: 0 7px;
  1659.   width: -webkit-calc(50% - 15px);
  1660.   width: calc(50% - 15px);
  1661.   background: #FFF;
  1662.   border: 1px solid #FF4A41;
  1663.   padding: 20px 15px 12px 15px;
  1664.   margin-bottom: 40px;
  1665.   position: relative;
  1666. }
  1667. ul.features-listing li:before {
  1668.   position: absolute;
  1669.   bottom: 100%;
  1670.   left: 50%;
  1671.   -moz-transform: translateX(-50%);
  1672.   -ms-transform: translateX(-50%);
  1673.   -webkit-transform: translateX(-50%);
  1674.   transform: translateX(-50%);
  1675.   content: "+";
  1676.   font-size: 40px;
  1677.   line-height: 48px;
  1678.   font-weight: bold;
  1679.   color: #FF4A41;
  1680. }
  1681. ul.features-listing li:first-of-type:before {
  1682.   display: none;
  1683. }
  1684. ul.features-listing li:last-of-type {
  1685.   margin-bottom: 0;
  1686. }
  1687. ul.features-listing li:nth-child(2):before {
  1688.   display: none;
  1689. }
  1690. ul.features-listing li:last-of-type {
  1691.   width: -webkit-calc(100% - 15px);
  1692.   width: calc(100% - 15px);
  1693. }
  1694. ul.features-listing li img {
  1695.   text-align: center;
  1696.   margin-top: 10px;
  1697.   margin-bottom: 10px;
  1698. }
  1699. ul.features-listing li .title {
  1700.   font-size: 20px;
  1701.   color: #FF4A41;
  1702.   text-align: center;
  1703.   display: block;
  1704.   font-weight: bold;
  1705. }
  1706. ul.features-listing li .content {
  1707.   text-align: center;
  1708.   font-size: 14px;
  1709. }
  1710. @media (max-width: 767px) {
  1711.   ul.features-listing {
  1712.     width: -webkit-calc(100%);
  1713.     width: calc(100%);
  1714.     margin-left: 0px;
  1715.   }
  1716.   ul.features-listing li {
  1717.     padding: 20px 15px 12px 15px;
  1718.     margin-bottom: 40px;
  1719.     margin-right: 0px;
  1720.     margin-left: 0;
  1721.     width: -webkit-calc(100%);
  1722.     width: calc(100%);
  1723.   }
  1724.   ul.features-listing li:nth-child(2):before {
  1725.     display: block;
  1726.   }
  1727. }
  1728.  
  1729. .top-arrow {
  1730.   position: relative;
  1731.   overflow: hidden;
  1732. }
  1733. .top-arrow:before {
  1734.   position: absolute;
  1735.   z-index: 10;
  1736.   top: 0;
  1737.   left: 50%;
  1738.   -moz-transform: translateX(-50%);
  1739.   -ms-transform: translateX(-50%);
  1740.   -webkit-transform: translateX(-50%);
  1741.   transform: translateX(-50%);
  1742.   content: "";
  1743.   width: 0px;
  1744.   height: 0px;
  1745.   border-style: solid;
  1746.   border-width: 40px 380px 0 380px;
  1747.   border-color: #fcf0ef transparent transparent transparent;
  1748. }
  1749. .top-arrow.light-purple-arrow:before {
  1750.   border-color: #ECDCFF transparent transparent transparent;
  1751. }
  1752.  
  1753. /* ANALYSIS PRESENTATION */
  1754. .analysis-presentation {
  1755.   background: #7851A8;
  1756.   padding-top: 50px;
  1757. }
  1758. .analysis-presentation .presentation {
  1759.   background: #FFF;
  1760.   color: black;
  1761.   padding: 10px 20px;
  1762.   font-size: 18px;
  1763.   line-height: 24px;
  1764. }
  1765.  
  1766. /* NUMEROLOGY PRESENTATION */
  1767. .content-holder {
  1768.   background: #FFF;
  1769.   padding: 15px 15px;
  1770. }
  1771. .content-holder.purple-border {
  1772.   border: 1px solid #7851A8;
  1773. }
  1774. .content-holder.black-border {
  1775.   border: 1px solid black;
  1776. }
  1777.  
  1778. .numbered-listing, .checked-listing {
  1779.   list-style: none;
  1780. }
  1781. .numbered-listing li, .checked-listing li {
  1782.   position: relative;
  1783.   padding-left: 40px;
  1784.   margin-bottom: 20px;
  1785. }
  1786. .numbered-listing li:last-of-type, .checked-listing li:last-of-type {
  1787.   margin-bottom: 0;
  1788. }
  1789. .numbered-listing li span, .checked-listing li span {
  1790.   position: absolute;
  1791.   top: 0px;
  1792.   left: 0;
  1793.   width: 32px;
  1794.   height: 32px;
  1795.   -moz-border-radius: 50%;
  1796.   -webkit-border-radius: 50%;
  1797.   border-radius: 50%;
  1798.   background: #7851A8;
  1799.   border: 2px solid #FFF;
  1800.   display: block;
  1801.   font-size: 15px;
  1802.   font-weight: bold;
  1803.   color: #FFF;
  1804.   text-align: center;
  1805.   line-height: 30px;
  1806.   -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
  1807.   -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
  1808.   box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.75);
  1809. }
  1810. .numbered-listing.with-purple-bg li, .checked-listing.with-purple-bg li {
  1811.   background: #ECDCFF;
  1812.   -moz-border-radius: 8px;
  1813.   -webkit-border-radius: 8px;
  1814.   border-radius: 8px;
  1815.   padding: 10px 10px 10px 40px;
  1816.   margin-left: 20px;
  1817. }
  1818. .numbered-listing.with-purple-bg li span, .checked-listing.with-purple-bg li span {
  1819.   position: absolute;
  1820.   top: -2px;
  1821.   left: -18px;
  1822.   width: 48px;
  1823.   height: 48px;
  1824.   -moz-border-radius: 50%;
  1825.   -webkit-border-radius: 50%;
  1826.   border-radius: 50%;
  1827.   background: #7851A8;
  1828.   border: 3px solid #FFF;
  1829.   display: block;
  1830.   font-size: 26px;
  1831.   font-weight: bold;
  1832.   color: #FFF;
  1833.   text-align: center;
  1834.   line-height: 44px;
  1835.   box-shadow: none;
  1836. }
  1837. @media (max-width: 767px) {
  1838.   .numbered-listing li, .checked-listing li {
  1839.     margin-bottom: 15px;
  1840.   }
  1841. }
  1842. .numbered-listing.size-14 li .content, .checked-listing.size-14 li .content {
  1843.   font-size: 14px;
  1844. }
  1845.  
  1846. .checked-listing li {
  1847.   padding-left: 35px;
  1848. }
  1849. .checked-listing li:before {
  1850.   position: absolute;
  1851.   top: 3px;
  1852.   left: 0;
  1853.   content: url("../img/icons/purple-check.png");
  1854.   width: auto;
  1855.   height: auto;
  1856. }
  1857. .checked-listing li.warning:before {
  1858.   position: absolute;
  1859.   top: 3px;
  1860.   left: 0;
  1861.   content: url("../img/icons/warning.png");
  1862.   width: auto;
  1863.   height: auto;
  1864. }
  1865. .checked-listing.white-color li {
  1866.   color: #FFF;
  1867. }
  1868. .checked-listing.white-color li .content {
  1869.   color: #FFF;
  1870. }
  1871. .checked-listing.white-color li:before {
  1872.   position: absolute;
  1873.   top: 3px;
  1874.   left: 0;
  1875.   content: url("../img/icons/light-purple-check.png");
  1876.   width: auto;
  1877.   height: auto;
  1878. }
  1879. .checked-listing.red-checks li:before {
  1880.   position: absolute;
  1881.   top: 3px;
  1882.   left: 0;
  1883.   content: url("../img/icons/red-check.png");
  1884.   width: auto;
  1885.   height: auto;
  1886. }
  1887. .checked-listing.green-checks li:before {
  1888.   position: absolute;
  1889.   top: 3px;
  1890.   left: 0;
  1891.   content: url("../img/icons/green-check.png");
  1892.   width: auto;
  1893.   height: auto;
  1894. }
  1895.  
  1896. .red-text {
  1897.   color: #FF4A41;
  1898. }
  1899.  
  1900. .green-text {
  1901.   color: #46B426;
  1902. }
  1903.  
  1904. figure {
  1905.   margin-bottom: 20px;
  1906.   margin-top: 15px;
  1907. }
  1908. figure blockquote {
  1909.   margin-top: 15px;
  1910.   margin-bottom: 15px;
  1911.   background: #FFF2CC;
  1912.   font-family: "amertype";
  1913.   font-size: 18px;
  1914.   text-align: center;
  1915.   padding: 15px 15px;
  1916.   border-left: none;
  1917.   position: relative;
  1918.   font-weight: bold;
  1919. }
  1920. figure blockquote:before {
  1921.   position: absolute;
  1922.   bottom: -12px;
  1923.   left: 10px;
  1924.   content: "";
  1925.   width: 0;
  1926.   height: 0;
  1927.   border-style: solid;
  1928.   border-width: 12px 12px 0 12px;
  1929.   border-color: #FFF2CC transparent transparent transparent;
  1930. }
  1931. figure figcaption {
  1932.   font-size: 14px;
  1933.   border-bottom: 2px solid #FFF2CC;
  1934.   padding-bottom: 5px;
  1935.   padding-top: 5px;
  1936.   font-family: "amertype";
  1937. }
  1938.  
  1939. /* IMG WITH CONTENT */
  1940. ul.img-with-content {
  1941.   list-style: none;
  1942. }
  1943. ul.img-with-content.border-bottom {
  1944.   border-bottom: 3px solid black;
  1945. }
  1946. ul.img-with-content li {
  1947.   display: box;
  1948.   display: -ms-flexbox;
  1949.   display: -o-flexbox;
  1950.   display: -webkit-box;
  1951.   display: -webkit-flex;
  1952.   display: flex;
  1953.   -webkit-box-pack: center;
  1954.   -moz-box-pack: center;
  1955.   -ms-flex-pack: center;
  1956.   -webkit-justify-content: center;
  1957.   justify-content: center;
  1958. }
  1959. ul.img-with-content li:first-of-type .content {
  1960.   border-top: 0px;
  1961. }
  1962. ul.img-with-content li .img-holder {
  1963.   width: 40%;
  1964. }
  1965. ul.img-with-content li .img-holder img {
  1966.   min-height: 100%;
  1967.   min-width: 100%;
  1968. }
  1969. ul.img-with-content li .content {
  1970.   width: 60%;
  1971.   background: #FFF2CC;
  1972.   padding: 10px 15px;
  1973.   border-top: 2px solid black;
  1974.   font-family: "amertype";
  1975. }
  1976. ul.img-with-content li .content .name {
  1977.   font-size: 22px;
  1978.   font-weight: bold;
  1979. }
  1980. ul.img-with-content li .content.size-18 {
  1981.   font-size: 18px;
  1982. }
  1983. ul.img-with-content li .content.size-18 .name {
  1984.   display: inline-block;
  1985.   font-size: 18px;
  1986. }
  1987. @media (max-width: 767px) {
  1988.   ul.img-with-content li {
  1989.     display: block;
  1990.     -webkit-box-wrap: wrap;
  1991.     -webkit-flex-wrap: wrap;
  1992.     -ms-flex-wrap: wrap;
  1993.     flex-wrap: wrap;
  1994.     margin-bottom: 10px;
  1995.   }
  1996.   ul.img-with-content li:last-of-type {
  1997.     margin-bottom: 0;
  1998.   }
  1999.   ul.img-with-content li:first-of-type .content {
  2000.     border-top: 3px solid black;
  2001.   }
  2002.   ul.img-with-content li .img-holder {
  2003.     width: 100%;
  2004.   }
  2005.   ul.img-with-content li .content {
  2006.     width: 100%;
  2007.     background: #FFF2CC;
  2008.     padding: 10px 15px;
  2009.     border-top: 3px solid black;
  2010.   }
  2011.   ul.img-with-content li .content .name {
  2012.     font-size: 22px;
  2013.     font-family: "amertype";
  2014.   }
  2015. }
  2016.  
  2017. /* YES / NO SECTION */
  2018. .yes-content-holder, .no-content-holder {
  2019.   border: 5px solid #46B426;
  2020.   padding: 20px 15px;
  2021.   display: box;
  2022.   display: -ms-flexbox;
  2023.   display: -o-flexbox;
  2024.   display: -webkit-box;
  2025.   display: -webkit-flex;
  2026.   display: flex;
  2027.   -webkit-box-align: center;
  2028.   -moz-box-align: center;
  2029.   -ms-flex-align: center;
  2030.   -webkit-align-items: center;
  2031.   align-items: center;
  2032. }
  2033. .yes-content-holder .icon-holder, .no-content-holder .icon-holder {
  2034.   width: 25%;
  2035. }
  2036. .yes-content-holder .content, .no-content-holder .content {
  2037.   width: 75%;
  2038.   margin-left: 25px;
  2039. }
  2040. @media (max-width: 767px) {
  2041.   .yes-content-holder, .no-content-holder {
  2042.     padding: 15px 15px;
  2043.     -webkit-box-wrap: wrap;
  2044.     -webkit-flex-wrap: wrap;
  2045.     -ms-flex-wrap: wrap;
  2046.     flex-wrap: wrap;
  2047.   }
  2048.   .yes-content-holder .icon-holder, .no-content-holder .icon-holder {
  2049.     width: 100%;
  2050.     margin: 0px auto 10px auto;
  2051.   }
  2052.   .yes-content-holder .content, .no-content-holder .content {
  2053.     width: 100%;
  2054.     margin-left: 0;
  2055.   }
  2056. }
  2057.  
  2058. .no-content-holder {
  2059.   border: 5px solid #FF4A41;
  2060. }
  2061.  
  2062. /* TESTIAMONIALS holder */
  2063. .testiamonials-listing {
  2064.   display: box;
  2065.   display: -ms-flexbox;
  2066.   display: -o-flexbox;
  2067.   display: -webkit-box;
  2068.   display: -webkit-flex;
  2069.   display: flex;
  2070.   -webkit-box-wrap: wrap;
  2071.   -webkit-flex-wrap: wrap;
  2072.   -ms-flex-wrap: wrap;
  2073.   flex-wrap: wrap;
  2074.   width: -webkit-calc(100% + 15px);
  2075.   width: calc(100% + 15px);
  2076.   margin-left: -7px;
  2077. }
  2078. .testiamonials-listing .single {
  2079.   background: #FFF2CC;
  2080.   -moz-border-radius: 8px;
  2081.   -webkit-border-radius: 8px;
  2082.   border-radius: 8px;
  2083.   padding: 15px;
  2084.   position: relative;
  2085.   padding-top: 70px;
  2086.   margin-top: 65px;
  2087.   margin-left: 7px;
  2088.   margin-right: 7px;
  2089.   width: -webkit-calc(50% - 15px);
  2090.   width: calc(50% - 15px);
  2091.   font-family: "amertype";
  2092. }
  2093. .testiamonials-listing .single .profile-img {
  2094.   position: absolute;
  2095.   top: -50px;
  2096.   left: 50%;
  2097.   -moz-transform: translateX(-50%);
  2098.   -ms-transform: translateX(-50%);
  2099.   -webkit-transform: translateX(-50%);
  2100.   transform: translateX(-50%);
  2101. }
  2102. .testiamonials-listing .single .profile-img img {
  2103.   -moz-border-radius: 50%;
  2104.   -webkit-border-radius: 50%;
  2105.   border-radius: 50%;
  2106.   border: 5px solid white;
  2107. }
  2108. .testiamonials-listing .single .intro {
  2109.   font-family: "amertype";
  2110.   font-size: 18px;
  2111.   text-align: center;
  2112.   display: block;
  2113.   margin-bottom: 10px;
  2114. }
  2115. .testiamonials-listing .single p {
  2116.   font-size: 15px;
  2117. }
  2118. .testiamonials-listing .single .signature {
  2119.   font-size: 15px;
  2120.   font-family: "amertype";
  2121.   text-align: center;
  2122.   display: block;
  2123.   margin-top: 10px;
  2124. }
  2125. .testiamonials-listing.desktop-full-width {
  2126.   width: -webkit-calc(100%);
  2127.   width: calc(100%);
  2128.   margin-left: 0px;
  2129. }
  2130. .testiamonials-listing.desktop-full-width .single {
  2131.   margin-left: 0px;
  2132.   margin-right: 0px;
  2133.   width: -webkit-calc(100%);
  2134.   width: calc(100%);
  2135. }
  2136. @media (max-width: 767px) {
  2137.   .testiamonials-listing {
  2138.     width: -webkit-calc(100%);
  2139.     width: calc(100%);
  2140.     margin-left: 0px;
  2141.   }
  2142.   .testiamonials-listing .single {
  2143.     margin-left: 0px;
  2144.     margin-right: 0px;
  2145.     width: -webkit-calc(100%);
  2146.     width: calc(100%);
  2147.   }
  2148. }
  2149.  
  2150. /* FEATURES LISTING V2 */
  2151. .features-listing-v2 {
  2152.   display: box;
  2153.   display: -ms-flexbox;
  2154.   display: -o-flexbox;
  2155.   display: -webkit-box;
  2156.   display: -webkit-flex;
  2157.   display: flex;
  2158.   -webkit-box-wrap: wrap;
  2159.   -webkit-flex-wrap: wrap;
  2160.   -ms-flex-wrap: wrap;
  2161.   flex-wrap: wrap;
  2162.   width: -webkit-calc(100% + 15px);
  2163.   width: calc(100% + 15px);
  2164.   margin-left: -7px;
  2165.   -webkit-box-pack: center;
  2166.   -moz-box-pack: center;
  2167.   -ms-flex-pack: center;
  2168.   -webkit-justify-content: center;
  2169.   justify-content: center;
  2170.   list-style: none;
  2171. }
  2172. .features-listing-v2 li {
  2173.   margin: 0 7px;
  2174.   width: -webkit-calc(50% - 15px);
  2175.   width: calc(50% - 15px);
  2176.   text-align: center;
  2177.   margin-bottom: 15px;
  2178. }
  2179. .features-listing-v2 li .title {
  2180.   color: #FFF;
  2181.   font-size: 20px;
  2182.   display: block;
  2183.   font-weight: bold;
  2184.   margin-top: 15px;
  2185.   margin-bottom: 20px;
  2186. }
  2187. @media (max-width: 767px) {
  2188.   .features-listing-v2 {
  2189.     width: -webkit-calc(100%);
  2190.     width: calc(100%);
  2191.     margin-left: 0px;
  2192.     -webkit-box-pack: center;
  2193.     -moz-box-pack: center;
  2194.     -ms-flex-pack: center;
  2195.     -webkit-justify-content: center;
  2196.     justify-content: center;
  2197.     list-style: none;
  2198.   }
  2199.   .features-listing-v2 li {
  2200.     margin: 0 0px;
  2201.     width: -webkit-calc(100%);
  2202.     width: calc(100%);
  2203.     text-align: center;
  2204.     margin-bottom: 15px;
  2205.   }
  2206.   .features-listing-v2 li .title {
  2207.     color: #FFF;
  2208.     font-size: 20px;
  2209.     display: block;
  2210.     font-weight: bold;
  2211.     margin-top: 15px;
  2212.     margin-bottom: 20px;
  2213.   }
  2214. }
  2215.  
  2216. /* ACCORDION */
  2217. .accordion {
  2218.   border-top: 1px solid #e8e8e8;
  2219. }
  2220. .accordion .accordion-single {
  2221.   border-bottom: 1px solid #e8e8e8;
  2222.   padding-left: 15px;
  2223.   padding-right: 15px;
  2224.   background: #fafafa;
  2225. }
  2226. .accordion .accordion-single .acc-title {
  2227.   display: block;
  2228.   font-size: 14px;
  2229.   padding-top: 10px;
  2230.   padding-bottom: 10px;
  2231.   position: relative;
  2232.   color: black;
  2233.   margin-left: 27px;
  2234. }
  2235. .accordion .accordion-single .acc-title:before {
  2236.   position: absolute;
  2237.   top: 50%;
  2238.   -moz-transform: translateY(-50%);
  2239.   -ms-transform: translateY(-50%);
  2240.   -webkit-transform: translateY(-50%);
  2241.   transform: translateY(-50%);
  2242.   left: -37px;
  2243.   content: url("../img/icons/triangle-down.svg");
  2244.   padding: 10px;
  2245. }
  2246. .accordion .accordion-single .acc-content {
  2247.   padding-bottom: 15px;
  2248.   display: none;
  2249.   font-size: 14px;
  2250.   margin-left: 27px;
  2251. }
  2252. .accordion .accordion-single .acc-content .accordion__content--hidden-content {
  2253.   overflow: hidden;
  2254.   height: 55px;
  2255. }
  2256. .accordion .accordion-single.opened {
  2257.   background: #f0f0f0;
  2258. }
  2259. .accordion .accordion-single.opened .acc-title {
  2260.   font-weight: bold;
  2261. }
  2262. .accordion .accordion-single.opened .acc-title:before {
  2263.   content: url("../img/icons/triangle-right.svg");
  2264. }
  2265.  
  2266. /* MAIN OFFER INTRO - normal */
  2267. .main-offer-intro-normal {
  2268.   background: #FF4A41;
  2269.   color: #FFF;
  2270.   font-family: "amertype";
  2271.   padding-top: 20px;
  2272.   padding-bottom: 10px;
  2273. }
  2274. .main-offer-intro-normal .profile-img {
  2275.   margin-bottom: 10px;
  2276. }
  2277. .main-offer-intro-normal p {
  2278.   font-family: "amertype";
  2279.   font-size: 18px;
  2280. }
  2281.  
  2282. .main-offer-intro-video {
  2283.   background: black;
  2284.   color: #FFF;
  2285.   font-family: "amertype";
  2286.   padding-top: 20px;
  2287.   padding-bottom: 20px;
  2288. }
  2289. .main-offer-intro-video .profile-img {
  2290.   margin-bottom: 10px;
  2291. }
  2292. .main-offer-intro-video p {
  2293.   font-family: "amertype";
  2294.   font-size: 18px;
  2295. }
  2296.  
  2297. .videoWrapper {
  2298.   margin-top: 20px;
  2299.   margin-bottom: 20px;
  2300.   position: relative;
  2301.   padding-bottom: 56.25%;
  2302.   /* 16:9 */
  2303.   padding-top: 25px;
  2304.   height: 0;
  2305.   clear: both;
  2306. }
  2307.  
  2308. .videoWrapper iframe {
  2309.   position: absolute;
  2310.   top: 0;
  2311.   left: 0;
  2312.   width: 100%;
  2313.   height: 100%;
  2314. }
  2315.  
  2316. /**
  2317.  *  OVERLAY
  2318.  */
  2319. .noscroll {
  2320.   position: fixed;
  2321.   width: 100%;
  2322.   left: 0;
  2323.   top: 0;
  2324. }
  2325. .noscroll .main-page-holder {
  2326.   -webkit-filter: blur(14px);
  2327.   filter: blur(14px);
  2328. }
  2329.  
  2330. .overlay-holder {
  2331.   position: fixed;
  2332.   top: 0;
  2333.   right: 0;
  2334.   width: 40vw;
  2335.   background: #FFF;
  2336.   z-index: 1000;
  2337.   background: #dadada;
  2338.   padding: 0px 30px 0px 10px;
  2339.   overflow-y: scroll;
  2340.   max-height: 100%;
  2341.   min-height: 100%;
  2342.   -webkit-overflow-scrolling: auto;
  2343.   /* Lets it scroll lazy */
  2344.   touch-action: pan-y;
  2345. }
  2346. .overlay-holder .overlay-content-inner .overlay-content {
  2347.   padding: 15px;
  2348.   padding-top: 30px;
  2349.   padding-bottom: 50px;
  2350. }
  2351. .overlay-holder .overlay-content-inner .overlay-content p {
  2352.   font-size: 13px;
  2353. }
  2354. .overlay-holder.footer-overlay {
  2355.   z-index: 999;
  2356. }
  2357. .overlay-holder.footer-overlay .overlay-content-inner {
  2358.   padding-top: 59px;
  2359. }
  2360. .overlay-holder.footer-overlay .overlay-footer {
  2361.   padding-bottom: 120px;
  2362. }
  2363. .overlay-holder .overlay-head {
  2364.   z-index: 100;
  2365.   padding-right: 0;
  2366.   position: fixed;
  2367.   top: 0;
  2368.   background: #dadada;
  2369.   padding: 14px 10px;
  2370.   padding-right: 30px;
  2371.   right: 0;
  2372.   width: 40vw;
  2373.   color: black;
  2374.   font-size: 20px;
  2375.   font-weight: bold;
  2376.   display: box;
  2377.   display: -ms-flexbox;
  2378.   display: -o-flexbox;
  2379.   display: -webkit-box;
  2380.   display: -webkit-flex;
  2381.   display: flex;
  2382.   -webkit-box-pack: justify;
  2383.   -moz-box-pack: justify;
  2384.   -ms-flex-pack: justify;
  2385.   -webkit-justify-content: space-between;
  2386.   justify-content: space-between;
  2387. }
  2388. .overlay-holder .overlay-head .title {
  2389.   width: 82%;
  2390. }
  2391. .overlay-holder .overlay-head .close {
  2392.   width: 18%;
  2393.   text-align: right;
  2394. }
  2395. .overlay-holder .overlay-head .close a {
  2396.   padding: 10px;
  2397. }
  2398. .overlay-holder .overlay-head .close a img {
  2399.   max-width: 22px;
  2400. }
  2401. .overlay-holder .overlay-head.grey-style {
  2402.   background: #F4F4F4;
  2403.   color: black;
  2404.   border-left: 10px solid #FF4A41;
  2405.   -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
  2406.   -moz-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
  2407.   box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
  2408. }
  2409. .overlay-holder .overlay-content-inner {
  2410.   padding-top: 59px;
  2411. }
  2412. .overlay-holder .overlay-footer {
  2413.   display: box;
  2414.   display: -ms-flexbox;
  2415.   display: -o-flexbox;
  2416.   display: -webkit-box;
  2417.   display: -webkit-flex;
  2418.   display: flex;
  2419.   -webkit-box-pack: justify;
  2420.   -moz-box-pack: justify;
  2421.   -ms-flex-pack: justify;
  2422.   -webkit-justify-content: space-between;
  2423.   justify-content: space-between;
  2424.   background: #FEDFF2;
  2425.   color: #494949;
  2426.   padding: 15px;
  2427.   padding-right: 0;
  2428.   padding-left: 0;
  2429.   position: relative;
  2430.   padding-bottom: 80px;
  2431. }
  2432. .overlay-holder .overlay-footer .back {
  2433.   width: 85%;
  2434. }
  2435. .overlay-holder .overlay-footer .back a {
  2436.   font-weight: bold;
  2437.   color: #494949;
  2438.   font-size: 18px;
  2439. }
  2440. .overlay-holder .overlay-footer .back a img {
  2441.   max-width: 22px;
  2442. }
  2443. .overlay-holder .overlay-footer .close {
  2444.   width: 18%;
  2445.   text-align: right;
  2446. }
  2447. .overlay-holder .overlay-footer .close a {
  2448.   padding: 10px;
  2449. }
  2450. .overlay-holder .overlay-footer .close a img {
  2451.   max-width: 22px;
  2452. }
  2453. @media (max-width: 767px) {
  2454.   .overlay-holder {
  2455.     width: 90vw;
  2456.     padding: 0px 0px 0px 10px;
  2457.   }
  2458.   .overlay-holder .overlay-content-inner .overlay-content {
  2459.     padding: 15px;
  2460.     padding-top: 30px;
  2461.     padding-bottom: 50px;
  2462.   }
  2463.   .overlay-holder .overlay-content-inner .overlay-content p {
  2464.     font-size: 13px;
  2465.   }
  2466.   .overlay-holder .overlay-head {
  2467.     width: 90vw;
  2468.     padding-right: 0px;
  2469.   }
  2470. }
  2471.  
  2472. .overflow-hidden {
  2473.   overflow: hidden;
  2474. }
  2475.  
  2476. /**
  2477.  *  CHECKOUT
  2478.  */
  2479. .order-summary {
  2480.   padding: 70px 15px 15px 15px;
  2481.   margin-top: -70px;
  2482. }
  2483. .order-summary .price-box {
  2484.   background: #FFF2CC;
  2485.   padding: 10px;
  2486.   color: black;
  2487.   font-size: 18px;
  2488. }
  2489. .order-summary .price-box span {
  2490.   color: #FF4A41;
  2491.   font-weight: bold;
  2492.   display: block;
  2493. }
  2494.  
  2495. .total-offer-holder {
  2496.   display: box;
  2497.   display: -ms-flexbox;
  2498.   display: -o-flexbox;
  2499.   display: -webkit-box;
  2500.   display: -webkit-flex;
  2501.   display: flex;
  2502.   -webkit-box-align: center;
  2503.   -moz-box-align: center;
  2504.   -ms-flex-align: center;
  2505.   -webkit-align-items: center;
  2506.   align-items: center;
  2507.   -webkit-box-pack: center;
  2508.   -moz-box-pack: center;
  2509.   -ms-flex-pack: center;
  2510.   -webkit-justify-content: center;
  2511.   justify-content: center;
  2512.   background: #FFF;
  2513. }
  2514. .total-offer-holder .product {
  2515.   text-align: center;
  2516. }
  2517. .total-offer-holder .product img {
  2518.   max-height: 140px;
  2519. }
  2520. .total-offer-holder .info {
  2521.   padding: 10px;
  2522. }
  2523. .total-offer-holder .info .price-box {
  2524.   background: #FFF2CC;
  2525.   padding: 7px 15px;
  2526.   display: inline-block;
  2527.   margin-top: 8px;
  2528. }
  2529. .total-offer-holder .info .price-box del {
  2530.   font-size: 14px;
  2531.   margin-right: 5px;
  2532. }
  2533. .total-offer-holder .info .price-box span {
  2534.   color: #FF4A41;
  2535.   font-weight: bold;
  2536.   font-size: 20px;
  2537. }
  2538. @media (max-width: 767px) {
  2539.   .total-offer-holder .product {
  2540.     width: 30%;
  2541.   }
  2542.   .total-offer-holder .info {
  2543.     width: 70%;
  2544.   }
  2545. }
  2546.  
  2547. .slick-list {
  2548.   margin-bottom: 10px;
  2549. }
  2550.  
  2551. .slick-dots li button:before {
  2552.   font-size: 18px;
  2553. }
  2554.  
  2555. /**
  2556.  *  TY PAGE
  2557.  */
  2558. .additional-offer-notice {
  2559.   background: #FFF;
  2560.   display: box;
  2561.   display: -ms-flexbox;
  2562.   display: -o-flexbox;
  2563.   display: -webkit-box;
  2564.   display: -webkit-flex;
  2565.   display: flex;
  2566.   -webkit-box-align: center;
  2567.   -moz-box-align: center;
  2568.   -ms-flex-align: center;
  2569.   -webkit-align-items: center;
  2570.   align-items: center;
  2571.   padding: 15px;
  2572.   margin-bottom: 40px;
  2573.   position: relative;
  2574. }
  2575. .additional-offer-notice:after {
  2576.   position: absolute;
  2577.   z-index: 10;
  2578.   bottom: -35px;
  2579.   left: 50%;
  2580.   -moz-transform: translateX(-50%);
  2581.   -ms-transform: translateX(-50%);
  2582.   -webkit-transform: translateX(-50%);
  2583.   transform: translateX(-50%);
  2584.   content: "";
  2585.   width: 100%;
  2586.   max-width: 100%;
  2587.   height: 0px;
  2588.   border-style: solid;
  2589.   border-width: 35px 350px 0 350px;
  2590.   border-color: #FFF transparent transparent transparent;
  2591. }
  2592. .additional-offer-notice:before {
  2593.   position: absolute;
  2594.   z-index: 10;
  2595.   bottom: -36px;
  2596.   left: 50%;
  2597.   -moz-transform: translateX(-50%);
  2598.   -ms-transform: translateX(-50%);
  2599.   -webkit-transform: translateX(-50%);
  2600.   transform: translateX(-50%);
  2601.   content: "";
  2602.   width: 100%;
  2603.   max-width: 100%;
  2604.   height: 0px;
  2605.   border-style: solid;
  2606.   border-width: 35px 350px 0 350px;
  2607.   border-color: #000 transparent transparent transparent;
  2608. }
  2609. .additional-offer-notice .icon {
  2610.   margin-right: 15px;
  2611.   width: 10%;
  2612.   text-align: center;
  2613. }
  2614. .additional-offer-notice .content {
  2615.   width: 90%;
  2616. }
  2617.  
  2618. .overflow-hidden {
  2619.   overflow: hidden;
  2620. }
  2621.  
  2622. .special-offer {
  2623.   background: #FFF;
  2624.   padding: 15px;
  2625.   padding-top: 60px;
  2626.   margin-top: -60px;
  2627. }
  2628. .special-offer .content {
  2629.   border: 4px dashed #FF0000;
  2630.   padding: 20px 10px 15px 10px;
  2631.   -moz-border-radius: 5px;
  2632.   -webkit-border-radius: 5px;
  2633.   border-radius: 5px;
  2634. }
  2635.  
  2636. .offer-expire {
  2637.   display: box;
  2638.   display: -ms-flexbox;
  2639.   display: -o-flexbox;
  2640.   display: -webkit-box;
  2641.   display: -webkit-flex;
  2642.   display: flex;
  2643.   -webkit-box-pack: center;
  2644.   -moz-box-pack: center;
  2645.   -ms-flex-pack: center;
  2646.   -webkit-justify-content: center;
  2647.   justify-content: center;
  2648.   -webkit-box-align: center;
  2649.   -moz-box-align: center;
  2650.   -ms-flex-align: center;
  2651.   -webkit-align-items: center;
  2652.   align-items: center;
  2653. }
  2654. .offer-expire .text {
  2655.   color: #FFF;
  2656.   text-align: right;
  2657. }
  2658. @media (max-width: 767px) {
  2659.   .offer-expire .text {
  2660.     font-size: 14px;
  2661.   }
  2662. }
  2663.  
  2664. /**
  2665.  *  UPSELL
  2666.  */
  2667. .upsell-holder, .content-holder-with-arrow {
  2668.   background: #7851A8;
  2669.   padding-right: 12px;
  2670.   padding-left: 12px;
  2671.   padding-bottom: 10px;
  2672. }
  2673. .upsell-holder.no-lr-inner, .content-holder-with-arrow.no-lr-inner {
  2674.   padding-right: 0;
  2675.   padding-left: 0;
  2676. }
  2677. .upsell-holder .content-holder, .content-holder-with-arrow .content-holder {
  2678.   position: relative;
  2679.   padding-bottom: 28px;
  2680.   overflow: hidden;
  2681. }
  2682. .upsell-holder .content-holder:before, .content-holder-with-arrow .content-holder:before {
  2683.   background: #7851A8;
  2684.   position: absolute;
  2685.   z-index: 10;
  2686.   bottom: -0px;
  2687.   left: 50%;
  2688.   -moz-transform: translateX(-50%);
  2689.   -ms-transform: translateX(-50%);
  2690.   -webkit-transform: translateX(-50%);
  2691.   transform: translateX(-50%);
  2692.   content: "";
  2693.   width: 100%;
  2694.   max-width: 100%;
  2695.   height: 0px;
  2696.   border-style: solid;
  2697.   border-width: 25px 340px 0 340px;
  2698.   border-color: #FFF transparent transparent transparent;
  2699. }
  2700. .upsell-holder .title, .content-holder-with-arrow .title {
  2701.   background: #7851A8;
  2702.   font-size: 18px;
  2703.   color: #FFF;
  2704.   text-align: center;
  2705.   font-weight: bold;
  2706.   padding: 12px 10px;
  2707. }
  2708. .upsell-holder .offer-intro, .content-holder-with-arrow .offer-intro {
  2709.   border-bottom: 1px solid #D8D8D8;
  2710.   display: box;
  2711.   display: -ms-flexbox;
  2712.   display: -o-flexbox;
  2713.   display: -webkit-box;
  2714.   display: -webkit-flex;
  2715.   display: flex;
  2716.   -webkit-box-align: center;
  2717.   -moz-box-align: center;
  2718.   -ms-flex-align: center;
  2719.   -webkit-align-items: center;
  2720.   align-items: center;
  2721.   padding-bottom: 10px;
  2722. }
  2723. .upsell-holder .offer-intro .img-holder, .content-holder-with-arrow .offer-intro .img-holder {
  2724.   width: 20%;
  2725.   text-align: center;
  2726. }
  2727. .upsell-holder .offer-intro .content, .content-holder-with-arrow .offer-intro .content {
  2728.   width: 80%;
  2729.   margin-left: 10px;
  2730. }
  2731. .upsell-holder .offer-intro.with-bg, .content-holder-with-arrow .offer-intro.with-bg {
  2732.   border: 1px solid #D8D8D8;
  2733.   background: #FAFAFA;
  2734.   padding: 15px 10px;
  2735. }
  2736. @media (max-width: 767px) {
  2737.   .upsell-holder .offer-intro .img-holder, .content-holder-with-arrow .offer-intro .img-holder {
  2738.     width: 30%;
  2739.   }
  2740.   .upsell-holder .offer-intro .content, .content-holder-with-arrow .offer-intro .content {
  2741.     width: 70%;
  2742.   }
  2743. }
  2744.  
  2745. .price-box-holder {
  2746.   background: #FFF2CC;
  2747.   padding: 6px 15px;
  2748.   color: black;
  2749.   font-size: 20px;
  2750.   display: inline-block;
  2751.   font-weight: bold;
  2752. }
  2753. .price-box-holder span {
  2754.   color: #FF4A41;
  2755.   display: inline-block;
  2756. }
  2757. .price-box-holder del {
  2758.   font-size: 14px;
  2759.   display: inline-block;
  2760. }
  2761.  
  2762. hr {
  2763.   border-color: #D8D8D8;
  2764. }
  2765.  
  2766. .upsell-successfully-added {
  2767.   background: #9B9B9B;
  2768.   color: #FFF;
  2769.   padding: 5px 8px;
  2770.   display: box;
  2771.   display: -ms-flexbox;
  2772.   display: -o-flexbox;
  2773.   display: -webkit-box;
  2774.   display: -webkit-flex;
  2775.   display: flex;
  2776.   -webkit-box-align: center;
  2777.   -moz-box-align: center;
  2778.   -ms-flex-align: center;
  2779.   -webkit-align-items: center;
  2780.   align-items: center;
  2781.   -webkit-box-pack: center;
  2782.   -moz-box-pack: center;
  2783.   -ms-flex-pack: center;
  2784.   -webkit-justify-content: center;
  2785.   justify-content: center;
  2786. }
  2787. .upsell-successfully-added .icon {
  2788.   margin-right: 10px;
  2789. }
  2790. .upsell-successfully-added .price {
  2791.   margin-left: 10px;
  2792. }
  2793. .upsell-successfully-added .price span {
  2794.   display: inline-block;
  2795.   background: #F0F0F0;
  2796.   font-size: 12px;
  2797.   padding: 4px 7px;
  2798.   color: black;
  2799.   text-align: center;
  2800. }
  2801.  
  2802. .check-user-info {
  2803.   background: #FFF2CC;
  2804.   border: 1px solid black;
  2805.   padding: 20px 20px;
  2806. }
  2807.  
  2808. .newsletter-holder {
  2809.   padding: 20px 15px;
  2810.   background: #FFF;
  2811.   border: 4px solid #FF4A41;
  2812. }
  2813. .newsletter-holder .title {
  2814.   font-size: 20px;
  2815.   color: #FF4A41;
  2816.   font-weight: bold;
  2817.   text-align: center;
  2818. }
  2819. .newsletter-holder .title span {
  2820.   display: block;
  2821.   font-size: 14px;
  2822. }
  2823.  
  2824. /**
  2825.  *  CONTENT WITH CHECK
  2826.  */
  2827. .conten-with-left-check {
  2828.   position: relative;
  2829.   padding-left: 35px;
  2830. }
  2831. .conten-with-left-check .check-holder {
  2832.   position: absolute;
  2833.   top: 10px;
  2834.   left: 0;
  2835. }
  2836.  
  2837. footer {
  2838.   background: black;
  2839.   padding-top: 8px;
  2840.   padding-bottom: 80px;
  2841.   max-width: 720px;
  2842.   text-align: center;
  2843.   margin: 0 auto;
  2844. }
  2845. footer .footer-nav {
  2846.   list-style: none;
  2847. }
  2848. footer .footer-nav li {
  2849.   display: block;
  2850.   position: relative;
  2851. }
  2852. footer .footer-nav li a {
  2853.   color: #FFF;
  2854.   font-size: 12px;
  2855.   display: block;
  2856.   padding-top: 5px;
  2857.   padding-bottom: 5px;
  2858.   text-align: center;
  2859. }
  2860. footer .footer-bar {
  2861.   font-size: 12px;
  2862.   color: #FFF;
  2863.   margin-top: 5px;
  2864.   padding-bottom: 5px;
  2865.   text-align: center;
  2866. }
  2867.  
  2868. @media print {
  2869.   /* ==========================================================================
  2870.      Print styles.
  2871.      Inlined to avoid required HTTP connection: h5bp.com/r
  2872.      ========================================================================== */
  2873.   * {
  2874.     background: transparent !important;
  2875.     color: #000 !important;
  2876.     /* Black prints faster: h5bp.com/s */
  2877.     box-shadow: none !important;
  2878.     text-shadow: none !important;
  2879.   }
  2880.  
  2881.   a,
  2882.   a:visited {
  2883.     text-decoration: underline;
  2884.   }
  2885.  
  2886.   a[href]:after {
  2887.     content: " (" attr(href) ")";
  2888.   }
  2889.  
  2890.   abbr[title]:after {
  2891.     content: " (" attr(title) ")";
  2892.   }
  2893.  
  2894.   /*
  2895.    * Don't show links for images, or javascript/internal links
  2896.    */
  2897.   a[href^="javascript:"]:after,
  2898.   a[href^="#"]:after {
  2899.     content: "";
  2900.   }
  2901.  
  2902.   pre,
  2903.   blockquote {
  2904.     border: 1px solid #999;
  2905.     page-break-inside: avoid;
  2906.   }
  2907.  
  2908.   thead {
  2909.     display: table-header-group;
  2910.     /* h5bp.com/t */
  2911.   }
  2912.  
  2913.   tr,
  2914.   img {
  2915.     page-break-inside: avoid;
  2916.   }
  2917.  
  2918.   img {
  2919.     max-width: 100% !important;
  2920.   }
  2921.  
  2922.   @page {
  2923.     margin: 0.5cm;
  2924.   }
  2925.   p,
  2926.   h2,
  2927.   h3 {
  2928.     orphans: 3;
  2929.     widows: 3;
  2930.   }
  2931.  
  2932.   h2,
  2933.   h3 {
  2934.     page-break-after: avoid;
  2935.   }
  2936. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement