/* Table of Contents I. Generic -------------------------------------- 01. Reset ------------------------------------ 02. Base ------------------------------------- 03. Helpers ---------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- Grid ------------------------------------- Responsive Helpers ----------------------- II. Regions -------------------------------------- 01. Footer ----------------------------------- 02. Header ----------------------------------- 03. Shell ------------------------------------ 04. Wrapper ---------------------------------- III. Modules -------------------------------------- 01. Button ----------------------------------- Button Block ----------------------------- Btn Primary ------------------------------ Btn Secondary ---------------------------- Btn Large -------------------------------- Btn Blue --------------------------------- Mobile ----------------------------------- 02. Callout ---------------------------------- Mobile ----------------------------------- 03. Events ----------------------------------- 04. Event ------------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 05. Form Elements ---------------------------- 06. Form Success ----------------------------- 07. Form Contacts ---------------------------- 08. Form Primary ----------------------------- 09. Icons ------------------------------------ 10. Intro ------------------------------------ 11. Link More -------------------------------- 12. List ------------------------------------- 13. List Begin ------------------------------- 14. List Flow -------------------------------- Tablet Portrait -------------------------- 15. List Pipes ------------------------------- 16. List Thinking ---------------------------- 17. List Triangles --------------------------- Mobile ----------------------------------- 18. List Features ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 19. List Scenario ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 20. Logo ------------------------------------- 21. Nav -------------------------------------- 22. Nav Secondary ---------------------------- 23. Popup ------------------------------------ 24. Progress --------------------------------- Tablet Portrait -------------------------- 25. Section ---------------------------------- 26. Section Red ------------------------------ 27. Section Blue ----------------------------- 28. Section White ---------------------------- 29. Section Primary -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 30. Section Secondary ------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 31. Section Begin ---------------------------- 32. Section Problem -------------------------- 33. Section Thinking ------------------------- 34. Section Success -------------------------- 35. Section Book ----------------------------- 36. Section Contacts ------------------------- 37. Section Breakthrough --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 38. Section Story ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 39. Section Story Primary -------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 40. Section Key ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 41. Section Power ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 42. Section Solution ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 43. Section Techniques ----------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 44. Section Consultancy ---------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 45. Section Consultation --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 46. Section Milestones ----------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 47. Section Design --------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 48. Section Turbo ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 49. Section Features ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 50. Section Paths ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 51. Section Reunion -------------------------- Mobile ----------------------------------- 52. Section Synergy -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 53. Section Innovation ----------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 54. Section Chapter -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 55. Section You ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 56. Section Example -------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 57. Section Scenario ------------------------- Mobile ----------------------------------- 58. Sectino Tip ------------------------------ Mobile ----------------------------------- 59. Section Workshop ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 60. Section How ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 61. Section Approach ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 62. Section Tools ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 63. Section Dates ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 64. Section Join ----------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 65. Socials ---------------------------------- */ @-webkit-keyframes steamBounce { 0% { -webkit-transform: scale(.8); transform: scale(.8); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(.8); transform: scale(.8); } } @keyframes steamBounce { 0% { -webkit-transform: scale(.8); transform: scale(.8); } 50% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(.8); transform: scale(.8); } } .ico-arrow-left { background-image: url(images/sprite.png); background-position: 0% 63.76811594202898%; background-size: 408.51063829787233% 393.6170212765957%; width: 47px; height: 47px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow { background-image: url(images/sprite.png); background-position: 35.172413793103445% 63.76811594202898%; background-size: 408.51063829787233% 393.6170212765957%; width: 47px; height: 47px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close { background-image: url(images/sprite.png); background-position: 87.34939759036145% 63.52201257861635%; background-size: 738.4615384615385% 711.5384615384615%; width: 26px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-lines { background-image: url(images/sprite.png); background-position: 0% 0%; background-size: 136.17021276595744% 486.84210526315786%; width: 141px; height: 38px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-minus { background-image: url(images/sprite.png); background-position: 99.31506849315068% 36.69064748201439%; background-size: 417.39130434782606% 402.17391304347825%; width: 46px; height: 46px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-plus { background-image: url(images/sprite.png); background-position: 0% 100%; background-size: 417.39130434782606% 402.17391304347825%; width: 46px; height: 46px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-secondary { background-image: url(images/ico-arrow-white.png); background-position: 0 0; background-size: 100% 100%; width: 21px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-red { background-image: url(images/ico-arrow-red.png); background-position: 0 0; background-size: 100% 100%; width: 21px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right-black { background-image: url(images/ico-arrow-blue.png); background-position: 0 0; background-size: 100% 100%; width: 21px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right { background-image: url(images/sprite.png); background-position: 0% 29.37062937062937%; background-size: 320% 440.4761904761905%; width: 60px; height: 42px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-success { background-image: url(images/sprite.png); background-position: 100% 0%; background-size: 408.51063829787233% 393.6170212765957%; width: 47px; height: 47px; display: inline-block; vertical-align: middle; font-size: 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ico-arrow-left { background-image: url(images/sprite.@2x.png); background-position: 0% 47.91666666666667%; background-size: 344.6808510638298% 304.25531914893617%; width: 47px; height: 47px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-arrow { background-image: url(images/sprite.@2x.png); background-position: 55.65217391304348% 0%; background-size: 344.6808510638298% 304.25531914893617%; width: 47px; height: 47px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-close { background-image: url(images/sprite.@2x.png); background-position: 84.55882352941177% 43.58974358974359%; background-size: 623.0769230769231% 550%; width: 26px; height: 26px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-minus { background-image: url(images/sprite.@2x.png); background-position: 0% 100%; background-size: 352.17391304347825% 310.8695652173913%; width: 46px; height: 46px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-plus { background-image: url(images/sprite.@2x.png); background-position: 43.103448275862064% 100%; background-size: 352.17391304347825% 310.8695652173913%; width: 46px; height: 46px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-right { background-image: url(images/sprite.@2x.png); background-position: 0% 0%; background-size: 270% 340.4761904761905%; width: 60px; height: 42px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-success { background-image: url(images/sprite.@2x.png); background-position: 100% 0%; background-size: 344.6808510638298% 304.25531914893617%; width: 47px; height: 47px; display: inline-block; vertical-align: middle; font-size: 0; }} .row:after, .cols:after, .section-secondary .section-content:after { content: ''; line-height: 0; display: table; clear: both; } /* ------------------------------------------------------------ *\ I. Generic \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Reset \* ------------------------------------------------------------ */ *, *:before, *:after { padding: 0; margin: 0; outline: 0; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; } html { tap-highlight-color: rgba(0,0,0,0); } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } img, iframe, video, audio, object { max-width: 100%; } img, iframe { border: 0 none; } img { height: auto; display: inline-block; vertical-align: middle; } b, strong { font-weight: bold; } address { font-style: normal; } svg:not(:root) { overflow: hidden; } a, button, input[type="submit"], input[type="button"], input[type="reset"], input[type="file"], input[type="image"], label[for] { cursor: pointer; } a[href^="tel"], button[disabled], input[disabled], textarea[disabled], select[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, a[href^="tel"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; color: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } button, select { text-transform: none; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } nav ul, nav ol { list-style: none outside none; } /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ body { min-width: 1262px; background: #13042b url(../css/images/bg-shapes1.png) repeat 0 0; font-family: 'Open Sans', sans-serif; font-size: 22px; line-height: 1.25; color: #fff; font-weight: 300; letter-spacing: 0.025em; } html.touch .progress { top: 80px !important; } a { color: inherit; text-decoration: underline #f8a5a5; } a:hover { text-decoration: none; } a[href^="tel"] { text-decoration: none; } i[class^=ico-] { display: inline-block; vertical-align: middle; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.625em; } h1 { font-size: 80px; text-transform: uppercase; font-weight: 300; } h2 { font-size: 72px; text-transform: uppercase; font-weight: 300; } h3 { font-size: ; } h4 { font-size: ; } h5 { font-size: ; } h6 { font-size: ; } p, ul, ol, dl, table, blockquote { margin-bottom: 1.25em; } h1[class], h2[class], h3[class], h4[class], h5[class], h6[class], h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child { margin-bottom: 0; } @media (max-width: 1279px) { body { min-width: 320px; } } @media (max-width: 767px) { body { min-width: 287px; background: #13042b; background-image: none; font-size: 15px; line-height: 1.3; } h2 { font-size: 36px; } } #trigger { position: fixed; top: 50%; height: 1px; width: 100%; right: 0; background: green; z-index: 100; } #animate { width: 50px; height: 50px; background: green; display: block; z-index: 50; } .shapes span { transition: all .3s; display: block; background: #fff; z-index: 2; } #shape1 { width: 6px; height: 50px; background: #f24b4b; position: absolute; top: 100%; left: 354px; margin-top: -1px; } #shape1 span { position: absolute; top: 0; left: -4px; width: 100%; background: #fff; width: 14px; max-height: 54px; height: 0; } #shape2 { width: 215px; height: 6px; background: #f24b4b; position: absolute; top: 100%; margin-top: 43px; left: 145px; } #shape2 span { position: absolute; top: -3px; right: -4px; max-width: calc(100% + 9px); height: 14px; } #shape3 { width: 6px; height: calc(50vh - 50px); background: #f24b4b; position: absolute; top: 100%; margin-top: 49px; left: 145px; } #shape3 span { position: absolute; top: 0; left: -5px; max-height: 100%; width: 14px; } @media ( max-width: 1440px ) { .browser-firefox .intro-title .text { left: 6px; } } @media ( max-width: 1320px ) { .browser-firefox .intro .line { margin-left: -114px; } .browser-firefox .intro-title .text { left: 9px; } .browser-firefox .intro-title .lines { margin-left: -104px; } } @media ( max-width: 1280px ) { .browser-firefox .intro .line { margin-left: -98px; width: 11px; } .browser-firefox .intro .line-inner { width: 11px; } .browser-firefox .intro-title .text { left: 7px; } .browser-firefox .intro-title .lines { margin-left: -97px; } .browser-firefox .section-begin .lines svg { -webkit-transform: scaleY(1.05); -ms-transform: scaleY(1.05); transform: scaleY(1.05); } .browser-firefox .section-book .lines { left: 10px; } .browser-firefox-mac .section-success .section-inner { height: 754px; } .browser-firefox-mac .section-book .lines { left: -1px; } .browser-firefox-mac .intro .line { margin-left: -113px; width: 14px; } .browser-firefox-mac .intro .line-inner { width: 14px; } .browser-firefox-mac .intro-title .lines { margin-left: -106px; } } @media ( max-width: 1278px ) { .browser-firefox-mac .section-success .section-inner { height: auto; } .browser-firefox-mac .section-book .lines { left: 10px; } .browser-firefox-mac .intro .line { margin-left: -98px; width: 11px; } .browser-firefox-mac .intro-title .lines { margin-left: -97px; } .browser-firefox-mac .intro .line-inner { width: 11px; } } .lines { pointer-events: none; } /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* Clear */ .clear:after { content: ''; line-height: 0; display: table; clear: both; } /* Notext */ .notext { white-space: nowrap; text-indent: 100%; text-shadow: none; overflow: hidden; } .notext-old { font-size: 0; line-height: 0; text-indent: -4000px; } /* Hidden */ [hidden], .hidden { display: none; } /* Alignleft */ .alignleft { float: left; } /* Alignright */ .alignright { float: right; } /* Disabled */ [disabled], .disabled { cursor: default; } /* Grid */ .cols { margin: 0 -15px; } .row:after, .cols:after { } .col { float: left; width: 100%; padding: 0 15px; } .col-1of2 { width: 50%; } /* Responsive Helpers */ .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; } @media (max-width: 767px) { .hidden-xs { display: none !important; } .visible-xs-block { display: block !important; } .visible-xs-inline { display: inline !important; } .visible-xs-inline-block { display: inline-block !important; } } @media (min-width: 768px) and (max-width: 1023px) { .hidden-sm { display: none !important; } .visible-sm-block { display: block !important; } .visible-sm-inline { display: inline !important; } .visible-sm-inline-block { display: inline-block !important; } } @media (min-width: 1024px) and (max-width: 1279px) { .hidden-md { display: none !important; } .visible-md-block { display: block !important; } .visible-md-inline { display: inline !important; } .visible-md-inline-block { display: inline-block !important; } } @media (min-width: 1280px) { .hidden-lg { display: none !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } } /* ------------------------------------------------------------ *\ II. Regions \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { background: #fff; text-align: center; color: #13042b; font-weight: 700; font-size: 19px; letter-spacing: 0.05em; padding: 38px 0 33px; overflow: hidden; position: relative; z-index: 1; } .footer:after, .footer:before { content: ''; background: url(../css/images/footer-decor2.png) no-repeat 0 0; width: 258px; height: 333px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: block; } .footer:before { left: 20px; } .footer:after { right: 20px; } .footer span { margin: 0 10px; } .footer .copyright { display: inline-block; position: relative; padding: 0 41px; } .footer .copyright:after, .footer .copyright:before { content: ''; background: url(../css/images/footer-decor1.png) no-repeat 0 0; width: 114px; height: 14px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .footer .copyright:after { left: 100%; } .footer .copyright:before { right: 100%; } @media (max-width: 1440px) { .footer:after, .footer:before { display: none; } } @media (max-width: 767px) { .footer { font-size: 16px; padding: 10px 0; } .footer span, .footer strong { display: block; } .footer strong { position: relative; padding-bottom: 16px; } .footer strong:after { content: ''; background: url(../css/images/footer-decor1.png) no-repeat 0 0; background-size: 100% 100%; width: 96px; height: 12px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 0; display: block; } .footer span { font-size: 0; } .footer .copyright { padding: 0; } .footer .copyright:after, .footer .copyright:before { display: none; } } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { position: absolute; top: 0; left: 0; width: 100%; z-index: 50; color: #fff; padding-top: 43px; } .header-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 767px) { .header { padding-top: 53px; } .header-inner { display: block; text-align: center; } } /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { width: 1302px; padding-left: 20px; padding-right: 20px; margin: auto; } .shell-fluid { max-width: none; } .shell-small { width: 1050px; padding-left: 20px; padding-right: 20px; margin: auto; } @media(max-width: 1320px){ .shell { width: 1240px; } } @media (max-width: 1279px) { .shell { width: 1000px; } .shell-small { max-width: 100%; width: 980px; } } @media (max-width: 1023px) { .shell { width: auto; } .shell-small { width: 740px; } } @media (max-width: 767px) { .shell-small, .shell { width: 320px; } .shell-small { padding-left: 8px; padding-right: 8px; } } /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { min-height: 100vh; overflow: hidden; position: relative; } /* ------------------------------------------------------------ *\ III. Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-decoration: none; transition: all .3s; } /* Button Block */ .btn-block { display: block; padding-left: 0; padding-right: 0; } /* Btn Primary */ .btn-primary { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; min-width: 120px; padding: 8px 5px; background: #f24b4b; color: #fff; border-radius: 6px; } .btn-primary:hover { opacity: .6; } .btn-primary.disabled { background: #13042b; pointer-events: none; } /* Btn Secondary */ .btn-secondary { font-size: 33px; font-weight: 700; text-transform: uppercase; border-radius: 15px; background: #f24b4b; color: #fff; padding: 18px 59px; } .btn-secondary:hover { opacity: .6; } /* Btn Large */ .btn-large { font-size: 21px; font-weight: 700; min-width: 204px; padding: 10px 5px; } /* Btn Blue */ .btn-blue { background: #13042b; } /* Mobile */ @media (max-width: 767px) { .btn-secondary { font-size: 16px; padding: 15px 30px; } } /* ------------------------------------------------------------ *\ Callout \* ------------------------------------------------------------ */ .callout { background: #13042b; text-align: center; padding: 59px 0 66px; position: relative; z-index: 2; letter-spacing: 0; } .callout h2 { font-size: 30px; font-weight: 700; text-transform: none; } .callout h2 span { color: #f24b4b; } .callout h2 strong { font-weight: 900; } /* Mobile */ @media (max-width: 767px) { .callout { padding: 16px 0 20px; } .callout h2 { font-size: 16px; } } /* ------------------------------------------------------------ *\ Events \* ------------------------------------------------------------ */ .events { list-style: none; } /* ------------------------------------------------------------ *\ Event \* ------------------------------------------------------------ */ .event { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .event ~ .event { margin-top: 5px; } .event .ico-arrow { width: 33px; height: 33px; } .event .event-inner p { font-weight: 400; } .event-title { font-size: 35px; font-weight: 900; -webkit-flex: 0 0 390px; -ms-flex: 0 0 390px; flex: 0 0 390px; } .event-title i { margin-right: 12px; } .event-actions { margin-left: auto; text-align: right; } .event-actions i { margin-bottom: 15px; } .event-date { font-size: 35px; font-weight: 600; color: #f24b4b; } .event-inner { max-width: 625px; padding-right: 20px; } .event-inner h6 { font-weight: 900; font-size: 23px; } @media (max-width: 1279px) { .event-title { font-size: 30px; -webkit-flex: 0 0 300px; -ms-flex: 0 0 300px; flex: 0 0 300px; } .event-date { font-size: 30px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .event ~ .event { margin-top: 15px; } .event-title { font-size: 24px; -webkit-flex: 0 0 250px; -ms-flex: 0 0 250px; flex: 0 0 250px; } .event-date { font-size: 20px; } } /* Mobile */ @media (max-width: 767px) { .event { display: block; text-align: center; } .event .btn { min-width: 130px; font-size: 14px; } .event .btn-large { font-size: 14px; width: auto; min-width: 130px; } .event ~ .event { margin-top: 14px; } .event-actions { text-align: left; } .event-title { font-size: 28px; } .event-actions { text-align: center; } .event-actions .ico-lines { display: none; } .event-date { margin: 1px 0 12px; display: block; font-size: 25px; letter-spacing: -0.03em; } .event-inner { padding-right: 0; padding-bottom: 0px; text-align: left; font-size: 16px; } .event-inner h6 { font-size: 16px; } .event .ico-arrow { display: none; } } /* ------------------------------------------------------------ *\ Form Elements \* ------------------------------------------------------------ */ input::-webkit-input-placeholder { color: inherit; opacity: 1; } input::-moz-placeholder { color: inherit; opacity: 1; } input:-ms-input-placeholder { color: inherit; opacity: 1; } input::placeholder { color: inherit; opacity: 1; } textarea::-webkit-input-placeholder { color: inherit; opacity: 1; } textarea::-moz-placeholder { color: inherit; opacity: 1; } textarea:-ms-input-placeholder { color: inherit; opacity: 1; } textarea::placeholder { color: inherit; opacity: 1; } input:-webkit-autofill { -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0 1000px #fff inset; } .field, .textarea { background: url(../css/images/field-border.png) repeat-x 0 bottom; border: 0; width: 100%; font-size: 19px; color: #13042b; font-weight: 700; } .field { padding-bottom: 15px; } .textarea { resize: none; padding: 0 0 7px; } /* ------------------------------------------------------------ *\ Form Success \* ------------------------------------------------------------ */ .form-success { position: fixed; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 999; } .form-success h3 { text-align: center; width: 100%; } .form-success .close-button { position: fixed; top: 30px; right: 40px; z-index: 1000; } .form-success .close-button:before, .form-success .close-button:after { content: ''; position: absolute; width: 25px; height: 3px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background-color: #fff; } .form-success .close-button:before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* ------------------------------------------------------------ *\ Form Contacts \* ------------------------------------------------------------ */ .form-contacts h3 { text-align: center; } .form-contacts .validation-error { font-size: 13px; font-weight: bold; } .form-contacts .form-body { max-width: 840px; -webkit-flex: 0 0 840px; -ms-flex: 0 0 840px; flex: 0 0 840px; } .form-contacts .form-btn { background: none; border: 0; color: #13042b; font-size: 22px; font-weight: 700; text-transform: uppercase; transition: opacity .3s; } .form-contacts .form-btn:hover { opacity: .5; } .form-contacts .form-btn i { margin-left: 13px; } .form-contacts .form-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .form-contacts .form-actions { padding-left: 35px; padding-top: 30px; margin-right: 10px; } .form-contacts .row ~ .row { margin-top: 34px; } @media (max-width: 1279px) { .form-contacts .form-btn i { display: block; margin: 10px 0 0; } } @media (max-width: 1023px) { .form-contacts .form-inner { display: block; } .form-contacts .form-body { max-width: 100%; } .form-contacts .form-actions { text-align: right; margin-right: 0; } .form-contacts .form-btn i { display: inline-block; margin: 0 0 0 13px; } } @media (max-width: 767px) { .form-contacts .col { float: none; width: 100%; } .form-contacts .col ~ .col { margin-top: 22px; } .form-contacts .row ~ .row { margin-top: 22px; } } /* ------------------------------------------------------------ *\ Form Primary \* ------------------------------------------------------------ */ .form-primary .field { background: url(../css/images/wave.png) no-repeat -14px bottom; width: 100%; height: 22px; background-size: auto 10px; height: 35px; font-weight: 700; font-size: 15px; } .form-primary .form-row ~ .form-row { margin-top: 20px; } .form-primary .form-body { padding: 0 30px; } .form-primary .form-actions { margin-top: 32px; } .form-primary .form-btn { border: 0; background: #13042b; font-weight: 400; font-size: 15px; min-width: 149px; margin-bottom: 20px; } .form-primary .form-btn:hover { background: #f24b4b; opacity: 1; } /* ------------------------------------------------------------ *\ Icons \* ------------------------------------------------------------ */ .ico-facebook { background: url(../css/images/facebook.svg) no-repeat 0 0; width: 18px; height: 36px; background-size: 100% 100%; } .ico-twitter { background: url(../css/images/twitter.svg) no-repeat 0 0; width: 44px; height: 36px; background-size: 100% 100%; } .ico-linkedin { background: url(../css/images/linkedin.svg) no-repeat 0 0; width: 37px; height: 35px; background-size: 100% 100%; } /* ------------------------------------------------------------ *\ Intro \* ------------------------------------------------------------ */ .intro { background: #13042b url(../css/images/bg-shapes1.png) repeat 0 0; color: #fff; height: 100vh; min-height: 770px; position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: hidden; } .intro .shell { background: #13042b; margin: 0 auto; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: relative; } .intro-title { display: inline-block; position: relative; width: 506px; margin: auto; } .intro-title em { font-style: normal; } .intro-title span { display: block; white-space: nowrap; } .intro-title strong { font-weight: 900; position: relative; z-index: 1; } .intro-title strong:not(.slap) { position: relative; display: inline-block; } .intro-title .text { background: url(../css/images/intro.svg) no-repeat 0 0; width: 374px; height: 52px; display: block; position: relative; left: 7px; background-size: 100% 100%; z-index: 2; } .intro-title .text:after { content: ''; background: url(../css/images/intro-title-shape.png) no-repeat 0 0; width: 97px; height: 16px; display: inline-block; vertical-align: middle; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 100%; margin-top: 2px; margin-left: 40px; } .intro-title .slap { color: #f24b4b; font-weight: 900; } .intro-title .lines { position: absolute; top: 100%; left: 50%; width: 215px; height: 1000px; margin-left: -108px; margin-top: -18px; } .intro-title .lines svg { position: absolute; top: 0; left: 0; } .intro-title .lines svg:last-child { margin-right: -4px; margin-left: -6px; width: 225px; } .intro-title .lines .path { opacity: 0; } .intro-title .lines-height svg, .intro-title .lines-tablet svg { display: none; } .intro-image { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .intro-content { position: relative; left: -4px; } .intro-actions { position: absolute; bottom: 40px; left: 0; width: 100%; text-align: center; font-weight: 400; font-size: 14px; } .intro-actions a { text-decoration: none; font-size: 14px; font-weight: 400; display: inline-block; transition: color .3s; } .intro-actions a:before { content: ''; width: 2px; height: 30px; display: block; margin: 0 auto 10px; background: #fff; transition: background-color .3s; } .intro-actions a:hover { color: #f24b4b; } .intro-actions a:hover:before { background: #f24b4b; } .intro .line { position: absolute; top: 50%; left: 50%; margin: 92px 0 0 -118px; bottom: 0; width: 15px; z-index: 15; } .intro .line-inner { background-color: #fff; width: 15px; } /* ------------------------------------------------------------ *\ Home Bullets \* ------------------------------------------------------------ */ .home-lists { text-align: left; display: inline-block; font-weight: 300; font-size: 21px; margin-left: 30px; line-height: .8em; } .home-lists li { position: relative; padding-left: 40px; list-style: none;} .home-lists li ~ li { margin-top: 24px; } .home-lists i { margin-right: 5px; position: absolute; top: 0px; left: 0; } .home-lists2 { text-align: left; display: inline-block; font-weight: 600; font-size: 21px; margin-left: 30px; line-height: .8em; } .home-lists2 li { position: relative; padding-left: 40px; list-style: none;} .home-lists2 li ~ li { margin-top: 24px; } .home-lists2 i { margin-right: 5px; position: absolute; top: 0px; left: 0; } .consult-list2 { text-align: left; display: inline-block; font-weight: 400; font-size: 21px; margin-right: 130px; line-height: 1.2em; } .consult-list2 li { position: relative; padding-left: 40px; list-style: none;} .consult-list2 li ~ li { margin-top: 15px; } .consult-list2 i { margin-right: 5px; position: absolute; top: 0px; left: 0; } @media(max-width: 1279px){ .home-lists { line-height: 1.1; padding-bottom: 50px; } .home-lists li ~ li { margin-top: 20px; } .home-lists2 { line-height: 1.1; margin-top: 0 !important; font-size: 16px; margin-left: 10px; } .home-lists2 li ~ li { margin-top: 20px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .home-lists { margin-left: 0; font-size: 18px; } .home-lists2 { margin-left: 0; font-size: 18px; } .consult-list2 { margin-left: 0; margin-right: 0; font-size: 18px; } } /* Mobile */ @media (max-width: 767px) { .home-lists { font-size: 16px; line-height: 1.2; } .home-lists li { padding-left: 23px; } .home-lists li ~ li { margin-top: 18px; } .home-lists i { width: 15px; height: 16px; top: 0; } .home-lists2 { font-size: 16px; line-height: 1.2; } .home-lists2 li { padding-left: 23px; } .home-lists2 li ~ li { margin-top: 18px; } .home-lists2 i { width: 15px; height: 16px; top: 0; } .consult-list2 { font-size: 16px; } .consult-list2 li { padding-left: 23px; } .consult-list2 li ~ li { margin-top: 18px; } .consult-list2 i { width: 15px; height: 16px; } } /* ------------------------------------------------------------ *\ Interior Bullets \* ------------------------------------------------------------ */ .int-list { text-align: left; display: inline-block; font-weight: 300; font-size: 20px; margin-left: 30px; line-height: 1.2; list-style: none;} .int-list li { position: relative; padding-left: 40px; list-style: none;} .int-list li ~ li { margin-top: 15px; } .int-list i { margin-right: 5px; position: absolute; top: 2px; left: 0; } .int-list-black { text-align: left; display: inline-block; font-weight: 400; font-size: 20px; margin-left: 30px; line-height: .8em; list-style: none;} .int-list-black li { position: relative; padding-left: 40px; list-style: none;} .int-list-black li ~ li { margin-top: 24px; } .int-list-black i { margin-right: 5px; position: absolute; top: -3px; left: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .int-list-black { margin-left: 0; font-size: 18px; line-height: 1.1; } .int-list { font-size: 18px !important; } .int-list i { top: 0; } } /* Mobile */ @media (max-width: 767px) { .int-list { font-size: 16px !important; line-height: 1.2; margin-left: 20px; } .int-list li { padding-left: 23px; } .int-list li ~ li { margin-top: 18px; } .int-list i { top: 1px; } .int-list-black i, .int-list i { width: 15px; height: 16px; } .int-list-black { font-size: 16px !important; line-height: 1.2; } .int-list-black li { padding-left: 23px; } .int-list-black i { top: 1px; } } @supports ( -ms-ime-align: auto ) { .intro-title .lines svg:last-child { width: 226px; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .intro .line { margin-left: -117px; } .intro-title { left: 2px; } .intro-title .lines { margin-left: -108px; } .intro-title .lines svg:last-child { width: 225px; height: 1040px; } } @media (max-width: 1440px) { .intro-title { width: 502px; } .intro-title .text { left: 5px; } .intro-title .lines svg:last-child { margin-right: -6px; } } @media(max-width: 1279px){ .intro-title .text { left: 5px; } .intro-title .lines-tablet svg:last-child { margin-right: -8px; } .intro-content { left: 0px; } .intro .line { margin-left: -114px; } } @media ( max-width: 1320px ) { .intro .line { margin-left: -114px; } .intro .text { left: 9px; } .intro-title .lines { margin-left: -104px; } } @media (max-width: 1279px) { .intro-title { font-size: 50px; } .intro-title strong:not(.slap):before { height: 36px; width: 38px; top: 15px; margin-left: -2px; } .intro-title .text { width: 258px; height: 38px; top: 4px; left: 7px; } .intro-title .lines { margin-left: -97px; margin-top: -12px; } .intro-title .lines svg { display: none; } .intro-title .lines-tablet svg { display: block; } .intro-title svg:not(.path) { margin-left: 2px; } .intro-title .lines-tablet svg:last-child { width: 232px; margin-right: -10px; margin-left: -6px; } .intro .line { margin-left: -97px; } .intro .line-inner { width: 10px; } } @media (max-width: 767px) { .intro { height: auto; padding: 225px 0 19px; text-align: center; background: none; } .intro .text { width: 175px; height: 25px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); text-align: center; } .intro .text:after { display: none; } .intro .shell { display: block; } .intro-title { font-size: 33px; width: auto; white-space: nowrap; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .intro-title em { position: relative; display: inline-block; padding: 0 20px; font-size: 100%; } .intro-title em:after, .intro-title em:before { content: ''; background: url(../css/images/intro-title-shape.png) no-repeat 0 0; background-size: 100% 100%; width: 64px; height: 11px; display: block; position: absolute; left: 100%; top: 20px; } .intro-title em:after { left: auto; right: 100%; } .intro-title .slap { min-height: 52px; display: block; font-size: 33px; width: 300px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin: 0; } .intro-title strong:not(.slap):after { display: none; } .intro-image { min-height: 490px; min-width: 490px; opacity: .7; top: 70px; } .intro-content { min-height: 153px; } .intro-actions { position: relative; bottom: auto; margin-top: 181px; } } /* ------------------------------------------------------------ *\ Link More \* ------------------------------------------------------------ */ .link-more { font-size: 72px; font-weight: 400; text-decoration: none; text-transform: uppercase; position: relative; z-index: 1; transition: color .3s; } .link-more:hover { color: #f24b4b; } .link-more:before { content: ''; background: url(../css/images/link-decor.png) no-repeat 0 0; width: 218px; height: 22px; display: block; margin: 0 auto 7px; } .link-more strong { font-weight: 900; } @media (max-width: 767px) { .link-more { color: #f24b4b; font-size: 37px; padding-bottom: 21px; display: block; } .link-more:before { width: 149px; height: 15px; background-size: 100% 100%; position: absolute; bottom: 0px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin: 0; } } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* ------------------------------------------------------------ *\ List Begin \* ------------------------------------------------------------ */ .list-begin li ~ li { margin-top: 24px; } @media (max-width: 767px) { .list-begin { line-height: 1.3; letter-spacing: 0.05em; } .list-begin li ~ li { margin-top: 19px; } } /* ------------------------------------------------------------ *\ List Flow \* ------------------------------------------------------------ */ .list-flow { position: absolute; top: 50%; left: 50%; display: -webkit-flex; display: -ms-flexbox; display: flex; margin-left: -103px; margin-top: -12px; } .list-flow li { width: 18px; border-radius: 0 0 9px 9px; transition: all .5s; background: rgb(234,232,232); background: linear-gradient(to bottom, rgba(234,232,232,1) 0%,rgba(21,3,49,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eae8e8', endColorstr='#150331',GradientType=0 ); } .list-flow li:nth-child(2) { margin-left: 51px; margin-top: -1px; } .list-flow li:nth-child(3) { margin-left: 50px; margin-top: -4px; } @media (max-width: 1279px) { .list-flow { margin: -8px 0 0 -25px; } .list-flow li { width: 12px; max-height: 88px; } .list-flow li:nth-child(2), .list-flow li:nth-child(3) { margin-left: 51px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .list-flow { margin-left: -125px; margin-top: -8px; } .list-flow li { height: 0 !important; } .list-flow.active li { height: 85px !important; } .list-flow li:nth-child(2), .list-flow li:nth-child(3) { margin-left: 52px; } } @media (max-width: 767px) { .list-flow { margin-left: -62px; margin-top: -5px; } .list-flow li { width: 10px; } .list-flow li:nth-child(2) { margin-left: 33px; margin-top: -1px; } .list-flow li:nth-child(3) { margin-left: 34px; margin-top: -2px; } .list-flow.active li { height: 63px !important; } } /* ------------------------------------------------------------ *\ List Pipes \* ------------------------------------------------------------ */ .list-pipes { position: relative; left: -22px; } .list-pipes:before { content: ''; width: 64px; height: 7px; background: #f24b4b; display: block; position: absolute; bottom: 53px; left: 52px; -webkit-transform: rotate(59deg); -ms-transform: rotate(59deg); transform: rotate(59deg); } .list-pipes:after { content: ''; width: 64px; height: 7px; background: #fff; display: block; position: absolute; bottom: 106px; left: 99px; -webkit-transform: rotate(-37deg); -ms-transform: rotate(-37deg); transform: rotate(-37deg); } .list-pipes .pipes { background: url(../css/images/pipes.svg) no-repeat 0 0; width: 379px; height: 765px; background-size: 100% auto; z-index: 2; position: relative; } .list-pipes .pipes:before { content: ''; width: 4000px; height: 35px; display: block; background: #fff; position: absolute; top: 172px; right: 100%; z-index: 3; margin-right: -10px; } .list-pipes .dash { background: url(../css/images/dashboard.svg) no-repeat 0 0; width: 123px; height: 174px; background-size: 100% auto; position: absolute; top: 42.2%; left: 41%; z-index: 3; } .list-pipes .steam { background: url(../css/images/steam.svg) no-repeat 0 0; width: 150px; height: 94px; background-size: 100% auto; position: absolute; bottom: 27px; right: 6px; z-index: 1; opacity: 0; transition: opacity .5s; -webkit-animation: steamBounce 1s infinite; animation: steamBounce 1s infinite; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; } .list-pipes .flow { height: 0px; width: 13px; position: absolute; top: 32px; left: 52.5%; z-index: 2; border-radius: 4px; transition: height .7s; background: rgb(234,232,232); background: linear-gradient(to bottom, rgba(234,232,232,0.5) 0%,rgba(21,3,49,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eae8e8', endColorstr='#150331',GradientType=0 ); } .list-pipes.active .steam { opacity: 1; } @media(max-width: 1320px){ .list-pipes .flow { left: 269px; } .list-pipes .dash { left: 217px; } .list-pipes .steam { right: -14px; } } @media (max-width: 1279px) { .list-pipes .steam { right: -102px; opacity: 1; } } @media (max-width: 1023px) { .list-pipes .steam { right: -112px; } .list-pipes.active .flow { height: 659px; } } @media (max-width: 767px) { .list-pipes { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform: none; -ms-transform: none; transform: none; top: 0; left: -67px; } .list-pipes .pipes { height: 642px; background-size: auto 100%; } .list-pipes .pipes:before { top: 144px; height: 28px; } .list-pipes .dash { top: auto; bottom: 20px; width: 102px; height: 143px; left: 182px; } .list-pipes .steam { opacity: 0; right: -65px; top: auto; bottom: 15px; } .list-pipes .flow { left: 222px; width: 17px; } .list-pipes.active .flow { height: 650px !important; } .list-pipes.active .steam { opacity: 1; } .list-pipes:before, .list-pipes:after { display: none; } } /* ------------------------------------------------------------ *\ List Thinking \* ------------------------------------------------------------ */ .list-thinking { position: relative; } .list-thinking .bg { background: url(../css/images/head-bg.svg) no-repeat 0 0; width: 496px; height: 708px; background-size: 100% auto; } .list-thinking .bg2 { background: url(../css/images/head-bg-2.svg) no-repeat 0 0; width: 496px; height: 292px; background-size: 100% auto; position: absolute; top: 0; left: 0; z-index: 2; } .list-thinking .head { background: url(../css/images/head.svg) no-repeat 0 0; width: 439px; height: 441px; background-size: 100% auto; position: absolute; bottom: -222px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .list-thinking .flow { position: absolute; top: -62px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-left: 6px; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; z-index: 0; } .list-thinking .flow span { height: 0px; width: 18px; display: inline-block; border-radius: 0 0 1px 1px; margin: 0 25px; transition: height .7s; background: rgb(21,3,49); background: linear-gradient(to bottom, rgba(21,3,49,1) 0%,rgba(234,232,232,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#150331', endColorstr='#eae8e8',GradientType=0 ); } .list-thinking .flow span:first-child { border-radius: 0 0 1px 3px; transition: height .6s; } .list-thinking .flow span:last-child { transition: height .5s; } @media (max-width: 1440px) { .list-thinking .flow span { position: relative; } } @media (max-width: 1279px) { .list-thinking .head { bottom: -60px; } .list-thinking .flow span { max-height: 433px; } .list-thinking .flow span:first-child { max-height: 430px; } .list-thinking .flow span:last-child { max-height: 432px; } } @media (max-width: 767px) { .list-thinking { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .list-thinking .bg2, .list-thinking .bg { width: 768px; height: 100%; background-size: auto 100%; background-repeat: repeat; opacity: .2; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); position: relative; top: 130px; } .list-thinking .bg { background-size: auto 370px; } .list-thinking .bg2 { position: absolute; height: 210px; opacity: .05; display: none; } .list-thinking .head { width: 330px; height: 400px; margin-left: -12px; bottom: -223px; } .list-thinking .flow { top: 0px; opacity: .2; margin-left: 6px; height: 100%; } .list-thinking .flow span { margin: 0 19px; } .list-thinking .flow span:last-child { margin-left: 22px; position: relative; left: -3px; } .list-thinking.active .flow span { height: calc(100% - 145px); max-height: none !important; } .list-thinking.active .flow span:first-child { height: calc(100% - 146px); } .list-thinking.active .flow span:last-child { height: calc(100% - 146px); } } /* ------------------------------------------------------------ *\ List Triangles \* ------------------------------------------------------------ */ .list-triangles { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 0; margin-left: -22px; } .list-triangles li { display: inline-block; vertical-align: middle; width: 0; height: 0; border-style: solid; border-width: 0 9px 16px 9px; border-color: transparent transparent #f24b4b transparent; margin: 0 4px; } /* Mobile */ @media (max-width: 767px) { .list-triangles { display: none; } } /* ------------------------------------------------------------ *\ List Features \* ------------------------------------------------------------ */ .list-features { text-align: left; display: inline-block; font-weight: 700; font-size: 21px; margin-left: 210px; } .list-features li { position: relative; padding-left: 30px; } .list-features li ~ li { margin-top: 24px; } .list-features i { margin-right: 5px; position: absolute; top: 2px; left: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-features { margin-left: 0; font-size: 18px; } } /* Mobile */ @media (max-width: 767px) { .list-features { font-size: 16px; } .list-features li { padding-left: 23px; } .list-features li ~ li { margin-top: 18px; } .list-features i { width: 15px; height: 16px; } } /* ------------------------------------------------------------ *\ List Scenario \* ------------------------------------------------------------ */ .list-scenario { line-height: 1.2; font-size: 21px; letter-spacing: 0; } .list-scenario h4 { font-size: 21px; font-weight: 900; color: #f24b4b; position: relative; margin-bottom: 0px; } .list-scenario h4 i { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: -68px; } .list-scenario li:nth-child(2) h4 { color: #13042b; } .list-scenario li ~ li { margin-top: 26px; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-scenario { font-size: 18px; } .list-scenario h4 { margin-bottom: 5px; } } /* Mobile */ @media (max-width: 767px) { .list-scenario { font-size: 16px; letter-spacing: -0.01em; } .list-scenario li ~ li { margin-top: 19px; } .list-scenario h4 { font-size: 16px; letter-spacing: 0; margin-bottom: 0; } .list-scenario h4 i { width: 24px; height: 24px; left: -45px; } } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo { background: url(../css/images/logo.svg) no-repeat 0 0; width: 196px; height: 84px; display: inline-block; vertical-align: middle; font-size: 0; margin-left: 15px; text-decoration: none; } .logo-blue { background-image: url(../css/images/logo-blue.svg); } @media (max-width: 767px) { .logo { width: 172px; height: 72px; background-size: 100% 100%; margin-left: 0; } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .logo {background: url(../css/images/logo.svg) no-repeat top left;} .logo-blue {background: url(../css/images/logo-blue.svg) no-repeat top left;} } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav { font-size: 13px; font-weight: 700; text-transform: uppercase; } .nav ul { display: -webkit-flex; display: -ms-flexbox; display: flex; } .nav li { position: relative; } .nav li ~ li { margin-left: 24px; } .nav a { text-decoration: none; transition: color .3s; padding-bottom: 9px; display: block; } .nav a:hover { color: #f24b4b; } .nav .dropdown { position: absolute; top: 100%; right: 0; background: #f24b4b; color: #fff; width: 200px; text-align: right; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; } .nav .dropdown ul { display: block; } .nav .dropdown li ~ li { margin-left: 0; border-top: 2px solid #942126; } .nav .dropdown a { display: block; padding: 10px 15px; font-size: 13px; font-weight: 600; text-transform: none; transition: all .3s; } .nav .dropdown a:hover { color: #13042b; background: #fff; } .nav-alt { color: #f24b4b; } .nav-alt a:hover { color: #13042b; } .nav-alt2 { color: #f24b4b; } .nav-alt2 a:hover { color: #fff; } @media(min-width: 768px){ .nav li:hover .dropdown { opacity: 1; visibility: visible; } } @media (max-width: 767px) { .nav { position: fixed; top: 0; bottom: 0; left: -77%; width: 77%; transition: left .3s; overflow: auto; background: #13042b url(../css/images/mobile-nav-decor.png) no-repeat center bottom; text-align: left; padding: 65px 20px 8px; font-size: 20px; color: #f24b4b; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-flow: row wrap; } .nav ul { display: block; width: 100%; } .nav a { display: block; position: relative; } .nav li ~ li { margin-left: 0; } .nav > ul > li { padding-bottom: 1px; margin-bottom: 16px; } .nav > ul > li:after { content: ''; background: url(../css/images/nav-decor.png) no-repeat 0 0; width: 64px; height: 7px; position: absolute; top: 100%; left: -20px; background-size: 100% 100%; } .nav > ul > li:last-child:after { display: none; } .nav > ul > li > a:hover { color: #f24b4b; } .nav.active { left: 0; } .nav a:after { content: ''; background: url(../css/images/ico-dropdown.png) no-repeat 0 0; width: 10px; height: 17px; background-size: 100% 100%; display: block; position: absolute; top: 4px; right: 0; transition: transform .3s; } .nav .has-dropdown a:after { transform: rotate(90deg); } .nav .dropdown { opacity: 1; visibility: visible; position: relative; top: auto; left: auto; right: auto; display: none; width: auto; margin: 0 -20px 16px; text-align: left; } .nav .dropdown a { padding: 10px 33px 9px; } .nav .dropdown a:after { display: none; } } /* ------------------------------------------------------------ *\ Nav Secondary \* ------------------------------------------------------------ */ .nav-secondary { font-size: 33px; font-weight: 700; letter-spacing: 0.05em; padding: 64px 104px 0 89px; } .nav-secondary ul { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .nav-secondary a { text-decoration: none; transition: color .3s; position: relative; } .nav-secondary a:after { content: ''; display: inline-block; position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-size: 100% 100%; margin-top: 10px; opacity: 0; transition: opacity .3s; } .nav-secondary a:hover:after { opacity: 1; } .nav-secondary .style1 a:after { background: url(../css/images/style1.png) no-repeat 0 0; width: 175px; height: 38px; } .nav-secondary .style2 a:after { background: url(../css/images/style2.png) no-repeat 0 0; width: 170px; height: 15px; } .nav-secondary .style3 a:after { background: url(../css/images/style3.png) no-repeat 0 0; width: 145px; height: 31px; -webkit-transform: none; -ms-transform: none; transform: none; left: auto; right: 0; } .nav-secondary .style4 a:after { background: url(../css/images/style4.png) no-repeat 0 0; width: 122px; height: 62px; } @media (max-width: 1279px) { .nav-secondary { font-size: 28px; padding: 64px 20px 0; } } @media (max-width: 1023px) { .nav-secondary { font-size: 24px; } } @media (max-width: 767px) { .nav-secondary { padding: 70px 0 0; font-size: 31px; } .nav-secondary ul { display: block; } .nav-secondary li ~ li { margin-top: 24px; } .nav-secondary a:after { display: none; } .nav-secondary a:hover { color: #f24b4b; } } /* ------------------------------------------------------------ *\ Nav Trigger \* ------------------------------------------------------------ */ .nav-trigger { width: 38px; height: 26px; display: none; position: fixed; top: 14px; right: 16px; } .nav-trigger span { display: block; width: 100%; height: 4px; border-radius: 1px; background: #ccc; margin-bottom: 7px; } @media(max-width: 767px){ .nav-trigger { display: block; } } /* ------------------------------------------------------------ *\ Popup \* ------------------------------------------------------------ */ .popup-inner { max-width: 374px; margin: auto; text-align: center; background: #fff; border-radius: 10px; } .popup-head { background: #f24b4b; color: #fff; border-radius: 10px 10px 0 0; padding: 15px 5px; position: relative; } .popup-head .link-close-popup { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 17px; } .popup-title { font-size: 21px; font-weight: 400; display: inline-block; padding-right: 20px; } .popup-body { padding: 40px 20px 20px; color: #13042b; font-size: 14px; } /* ------------------------------------------------------------ *\ Progress \* ------------------------------------------------------------ */ .progress { position: fixed; left: 0; width: 100%; z-index: 50; transition: top .3s; top: 80px; } .progress.fixed { top: 52px; } .progress-inner { float: right; width: 279px; height: 16px; position: relative; } .progress-bar { width: 100%; height: 100%; display: block; background: url(../css/images/progress-bar.png) no-repeat 0 0; opacity: .14; } .progress-overlay { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: url(../css/images/progress-bar.png) no-repeat 0 0; z-index: 1; } .progress-overlay span { background: url(../css/images/progress-triangle.svg) no-repeat 0 0; width: 26px; height: 22px; background-size: 26px 22px; display: block; position: absolute; top: 100%; right: 0; margin-right: -13px; margin-top: 3px; } /* Tablet Portrait */ @media (max-width: 1023px) { .progress { top: 80px !important; } .progress.fixed { top: 30px !important; } } @media (max-width: 767px) { .progress { display: none; } } /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ .section { overflow: hidden; position: relative; } .section .video_wrap { border: 4px solid #000; width: 100%; /*height: 287px;*/ height: 0; padding-top: 56.25%; -webkit-border-radius: 4px; border-radius: 4px; position:relative; margin-bottom:30px; margin-top:20px; position: relative; } .section .video_wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .section .video_wrap-outer { max-width: 90%; } .section-title strong { font-weight: 900; } @media (max-width: 1023px) { .section .lines-tablet, .section .lines { display: none !important; } } @media (max-width: 767px) { .section-title { text-align: center; line-height: 1.3; letter-spacing: -0.025em; } .section .video_wrap-outer { max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; } } /* ------------------------------------------------------------ *\ Section Red \* ------------------------------------------------------------ */ .section-red { background: #f24b4b; } /* ------------------------------------------------------------ *\ Section Blue \* ------------------------------------------------------------ */ .section-blue .shell-small, .section-blue .shell { background: #13042b; } /* ------------------------------------------------------------ *\ Section White \* ------------------------------------------------------------ */ .section-white { background: #fff; color: #13042b; } /* ------------------------------------------------------------ *\ Section Primary \* ------------------------------------------------------------ */ .section-primary { font-weight: 400; letter-spacing: 0; line-height: 1.2; } .section-primary .section-title { font-weight: 400; line-height: 1.1; } .section-primary .section-content { position: relative; padding: 52px 0 55px; } .section-primary .section-image { position: absolute; bottom: -2px; right: -244px; } .section-primary .section-head { margin-bottom: 30px; } .section-primary .section-body { max-width: 600px; } .section-primary .section-body p:not(:last-child) { margin-bottom: 29px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-primary .section-title { font-size: 60px; } .section-primary .section-image { width: 60%; } .section-primary .section-body { max-width: 60%; } } /* Mobile */ @media (max-width: 767px) { .section-primary .section-title { font-size: 40px; } .section-primary .section-image { width: 100%; max-width: 350px; position: relative; top: auto; left: auto; bottom: auto; right: auto; margin: auto; text-align: center; } .section-primary .section-body { max-width: 100%; } } /* ------------------------------------------------------------ *\ Section Secondary \* ------------------------------------------------------------ */ .section-secondary { font-weight: 400; letter-spacing: 0; line-height: 1.2; text-align: right; } .section-secondary .section-content { position: relative; padding: 52px 0 55px; } .section-secondary .section-content:after { } .section-secondary .section-title { font-weight: 400; line-height: 1.1; } .section-secondary .section-image { position: absolute; bottom: -2px; left: -244px; } .section-secondary .section-head { margin-bottom: 30px; } .section-secondary .section-body { max-width: 620px; float: right; } .section-secondary .section-body p:not(:last-child) { margin-bottom: 29px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-secondary .section-title { font-size: 60px; } .section-secondary .section-image { width: 60%; } .section-secondary .section-body { max-width: 60%; } } /* Mobile */ @media (max-width: 767px) { .section-secondary { text-align: left; } .section-secondary .section-title { font-size: 40px; } .section-secondary .section-image { width: 100%; max-width: 350px; position: relative; top: auto; left: auto; bottom: auto; right: auto; margin: auto; text-align: center; } .section-secondary .section-body { max-width: 100%; float: none; } } /* ------------------------------------------------------------ *\ Section Begin \* ------------------------------------------------------------ */ .section-begin { background-image: url(../css/images/dots.png); background-repeat: repeat-x; } .section-begin:before { content: ''; position: absolute; bottom: 0; left: 0; background: url(../css/images/dots-decor1.png) no-repeat 0 0; width: 160px; height: 136px; } .section-begin .shell { position: relative; } .section-begin .lines svg { position: absolute; top: 0; left: 12px; width: 536px; } .section-begin .section-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .section-begin .section-content { -webkit-flex: 0 0 55.63%; -ms-flex: 0 0 55.63%; flex: 0 0 55.63%; max-width: 55.63%; padding: 35px 100px 93px 0; position: relative; z-index: 1; } .section-begin .section-image { -webkit-flex: 0 0 44.37%; -ms-flex: 0 0 44.37%; flex: 0 0 44.37%; max-width: 44.37%; text-align: center; padding: 0 10px; position: relative; } .section-begin .section-image-secondary { text-align: center; padding-bottom: 53px; } .section-begin .section-image-tertiary { position: absolute; bottom: 0; right: 0; } .section-begin .section-image-tertiary .fixed { position: absolute; bottom: 100px; right: 0; } .section-begin .section-entry-image { content: ''; background: url(../css/images/success-title-decor.png) no-repeat 0 0; width: 182px; height: 22px; display: inline-block; vertical-align: middle; margin-left: 20px; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .section-begin .lines svg { left: 14px; } } @media(max-width: 1600px){ .section-begin .section-content { padding-bottom: 115px; } .section-begin .section-image-secondary { padding-bottom: 30px; } .section-begin .section-image-tertiary { right: -40px; bottom: -30px; } } @media(max-width: 1320px){ .section-begin .lines svg { position: absolute; top: 0; left: -5px; width: 526px; } .section-begin .lines svg polyline { width: 100%; height: 100%; } .section-begin .section-content { padding-top: 19px; padding-bottom: 86px; } .section-begin .section-image-secondary img { max-height: 250px; } } @media (max-width: 1279px) { .section-begin .lines svg { width: 396px; left: 17px; } .section-begin .lines { display: none; } .section-begin .lines-tablet { display: block; } .section-begin .section-image { -webkit-flex: 0 0 43%; -ms-flex: 0 0 43%; flex: 0 0 43%; max-width: 43%; padding-left: 0px; } .section-begin .section-image img { position: relative; left: 68px; top: 3px; } .section-begin .section-image-secondary { display: none; } .section-begin .section-content { -webkit-flex: 0 0 57%; -ms-flex: 0 0 57%; flex: 0 0 57%; max-width: 57%; padding-top: 83px; padding-left: 70px; padding-right: 70px; } } @media (max-width: 1023px) { .section-begin .section-image { -webkit-flex: 0 0 415px; -ms-flex: 0 0 415px; flex: 0 0 415px; max-width: 415px; margin-right: 20px; } .section-begin .section-image img { left: -30px; } .section-begin .section-content { -webkit-flex: 0 0 calc(100% - 319px); -ms-flex: 0 0 calc(100% - 319px); flex: 0 0 calc(100% - 319px); max-width: calc(100% - 319px); padding: 120px 35px 120px 0; } } @media (max-width: 767px) { .section-begin { background-image: none; padding: 37px 0 50px; } .section-begin:before { display: none; } .section-begin .section-inner { display: block; } .section-begin .section-image { max-width: 100%; position: relative; z-index: 2; padding: 0; margin: 0; } .section-begin .section-image img { left: 0px; } .section-begin .section-image-tertiary { max-width: 251px; right: -50px; bottom: -40px; } .section-begin .section-content { max-width: 100%; padding: 31px 0 62px; position: relative; z-index: 2; } } /* ------------------------------------------------------------ *\ Section Problem \* ------------------------------------------------------------ */ .section-problem:after { content: ''; background: url(../css/images/problem-dots-aside.png) no-repeat 0 0; width: 197px; height: 738px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; } .section-problem .lines svg { width: 15px; position: absolute; top: 0; left: 12px; } .section-problem .shell { position: relative; } .section-problem .shell:after { content: ''; background: url(../css/images/wave1.png) no-repeat 0 0; width: 83px; height: 137px; position: absolute; bottom: 50px; left: 100%; margin-left: -20px; } .section-problem .section-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .section-problem .section-content { -webkit-flex: 0 0 59.43%; -ms-flex: 0 0 59.43%; flex: 0 0 59.43%; max-width: 59.43%; padding-right: 150px; } .section-problem .section-content p:not(:last-child) { margin-bottom: 25px; } .section-problem .section-image { -webkit-flex: 0 0 40.57%; -ms-flex: 0 0 40.57%; flex: 0 0 40.57%; max-width: 40.57%; } .section-problem .section-title { line-height: 1.11; font-weight: 400; margin-bottom: 20px; } .section-problem .section-title strong { display: block; font-weight: 900; } .section-problem .section-title span { color: #f24b4b; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .section-problem .lines svg { left: 14px; width: 15px; } .section-problem .lines svg line { stroke-width: 15px !important; } } @media(max-width: 1320px){ .section-problem .lines svg { left: -5px; } } @media (max-width: 1279px) { .section-problem .lines { display: none; } .section-problem .lines svg { left: 15px; } .section-problem .lines-tablet { display: block; } .section-problem .section-title { font-size: 54px; } } @media (max-width: 1023px) { .section-problem .section-image { max-width: 390px; -webkit-flex: 0 0 390px; -ms-flex: 0 0 390px; flex: 0 0 390px; margin-left: -100px; } .section-problem .section-title { font-size: 46px; } .section-problem .section-content { max-width: calc(100% - 290px); -webkit-flex: 0 0 calc(100% - 290px); -ms-flex: 0 0 calc(100% - 290px); flex: 0 0 calc(100% - 290px); padding-right: 30px; } } @media (max-width: 767px) { .section-problem { min-height: 640px; } .section-problem .shell { min-height: 700px; } .section-problem:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 5; display: block; background: linear-gradient(to bottom, rgba(21,3,49,1) 0%,rgba(21,3,49,0.84) 57%,rgba(21,3,49,0.84) 58%,rgba(21,3,49,0.20) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#150331', endColorstr='#a6150331',GradientType=0 ); } .section-problem .shell:after { display: none; } .section-problem .section-inner { display: block; } .section-problem .section-title { font-size: 36px; line-height: 1.3; margin-bottom: 25px; } .section-problem .section-image { position: absolute; top: 0; bottom: 0; left: 0; max-width: 100%; margin: 0; } .section-problem .section-content { position: relative; z-index: 10; max-width: 100%; padding: 30px 0; } .section-problem .section-content p:not(:last-child) { margin-bottom: 19px; } .section-problem .list-pipes { bottom: 0; } .section-problem .list-pipes .pipes { top: 60px; } } /* ------------------------------------------------------------ *\ Section Thinking \* ------------------------------------------------------------ */ .section-thinking:before { content: ''; background: url(../css/images/thinking-decor1.png) no-repeat 0 0; position: absolute; left: 0; bottom: 0; width: 226px; height: 654px; display: block; background-size: 100% auto; } .section-thinking:after { content: ''; background: url(../css/images/thinking-decor2.png) no-repeat 0 0; position: absolute; right: 20px; top: -30px; width: 226px; height: 654px; display: block; background-size: 100% auto; } .section-thinking p { font-weight: 600; } .section-thinking .shell { position: relative; } .section-thinking .lines { position: relative; z-index: 5; } .section-thinking .lines svg { position: absolute; top: -1px; left: -8px; height: 769px; } .section-thinking .section-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: 60px; position: relative; } .section-thinking .section-inner:before { content: ''; background: url(../css/images/thinking-decor3.png) no-repeat 0 0; width: 216px; height: 221px; position: absolute; right: 28px; top: 138px; } .section-thinking .section-image { -webkit-flex: 0 0 496px; -ms-flex: 0 0 496px; flex: 0 0 496px; max-width: 496px; } .section-thinking .section-content { padding-left: 80px; padding-right: 65px; font-weight: 400; color: #f24b4b; font-size: 23px; } .section-thinking .section-title { line-height: 1; margin-bottom: 20px; color: #13042b; } .section-thinking .section-title strong { font-weight: 900; } @supports ( -ms-ime-align: auto ) { .section-thinking { overflow: visible; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .section-thinking .lines svg { left: -6px; } } @media(max-width: 1320px){ .section-thinking .lines svg { left: -24px; height: 755px; } .section-thinking .section-inner { padding-top: 45px; } } @media(max-width: 1800px){ .section-thinking:before, .section-thinking:after { display: none; } .section-thinking .shell:before { content: ''; background: url(../css/images/thinking-decor1.png) no-repeat 0 0; position: absolute; right: 100%; bottom: 0; width: 226px; height: 654px; display: block; background-size: 100% auto; } .section-thinking .shell:after { content: ''; background: url(../css/images/thinking-decor2.png) no-repeat 0 0; position: absolute; left: 100%; top: -30px; width: 226px; height: 654px; display: block; background-size: 100% auto; } } @media (max-width: 1440px) { .section-thinking .shell:before, .section-thinking .shell:after { display: none; } } @media (max-width: 1279px) { .section-thinking .lines svg { height: 596px; left: -4px; } .section-thinking .section-inner:before { width: 172px; height: 147px; top: 110px; right: 0; } .section-thinking .section-image { max-height: 550px; } .section-thinking .section-title { font-size: 50px; padding-top: 40px; } .section-thinking .section-content { font-size: 18px; padding-left: 20px; } } @media (max-width: 1023px) { .section-thinking .section-inner { padding: 0; } .section-thinking .section-inner:before { content: none; } .section-thinking .section-image { max-height: 602px; margin-left: -100px; } .section-thinking .section-title { font-size: 36px; margin-bottom: 10px; } .section-thinking .section-content { font-size: 16px; padding-right: 0; } .section-thinking .section-content p { margin-bottom: .75em; } } @media (max-width: 767px) { .section-thinking { padding-bottom: 235px; } .section-thinking .shell { position: static; } .section-thinking .section-inner { display: block; padding-top: 26px; position: static; } .section-thinking .section-inner:before { display: none; } .section-thinking .section-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; top: 0px; max-width: 100%; margin-left: 0; max-height: none; } .section-thinking .section-content { position: relative; z-index: 5; max-width: 100%; padding: 0; font-size: 15px; } .section-thinking .section-title { line-height: 1.3; margin-bottom: 26px; padding-top: 0; } .section-thinking .section-title br { display: none; } } /* ------------------------------------------------------------ *\ Section Success \* ------------------------------------------------------------ */ .section-success:after { content: ''; background: url(../css/images/success-decor.png) no-repeat 0 0; width: 295px; height: 455px; display: block; position: absolute; bottom: 0; right: 0; } .section-success .shell { position: relative; } .section-success .lines { pointer-events: none; } .section-success .lines svg { position: absolute; top: 0; right: 27px; } .section-success .section-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 770px; } .section-success span[class^=cloud] { background: url(../css/images/cloud.svg) no-repeat 0 0; width: 150px; height: 101px; display: block; position: absolute; } .section-success .section-image { -webkit-flex: 0 0 360px; -ms-flex: 0 0 360px; flex: 0 0 360px; max-width: 360px; margin-right: 135px; background: #13042b; position: relative; z-index: 1; border: 1px solid #f24b4b; overflow: hidden; } .section-success .section-image:before { content: ''; position: absolute; top: -1px; bottom: -1px; left: -1px; right: -1px; border: 5px solid #f24b4b; } .section-success .lock { background: url(../css/images/keylock.svg) no-repeat 0 0; width: 362px; height: 555px; display: block; z-index: 2; position: relative; left: -1px; bottom: -2px; } .section-success .cloud1 { top: 375px; left: 165px; } .section-success .cloud2 { top: 636px; left: 93px; } .section-success .section-content { -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: 22px; padding: 0px 5px 0 91px; margin-top: -20px; } .section-success .section-content p:not(:last-child) { margin-bottom: 25px; } .section-success .section-title { line-height: 1.25; margin-bottom: 15px; margin-left: -16px; font-weight: 400; } .section-success .section-title .decor:after { content: ''; background: url(../css/images/success-title-decor.png) no-repeat 0 0; width: 182px; height: 22px; display: inline-block; vertical-align: middle; margin-left: 20px; } @supports ( -ms-ime-align: auto ) { .section-success .lines svg { right: 26px; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .section-success .lines svg { right: 6px; } } @media(max-width: 1320px){ .section-success .lines svg { right: 3px; } .section-success .section-inner { height: 730px; } } @media (max-width: 1279px) { .section-success .lines { position: relative; z-index: 4; } .section-success .lines svg { right: -15px; } .section-success .section-inner { height: auto; padding: 14px 0; } .section-success .section-title { font-size: 50px; margin-top: 50px; margin-left: 0; } .section-success .section-content { font-size: 18px; padding-left: 40px; } } @media (max-width: 1023px) { .section-success:after { content: none; } .section-success .section-inner { padding-bottom: 50px; } .section-success .section-image { margin-right: 0; } .section-success .section-title { font-size: 50px; } .section-success .section-title br { display: none; } .section-success .section-title .decor:after { display: block; } } @media (max-width: 767px) { .section-success:before { content: ''; background: url(../css/images/succes-mobile-decor.png) no-repeat 0 0; width: 218px; height: 174px; position: absolute; bottom: 0; left: 0; z-index: 5; } .section-success:after { display: none; } .section-success .shell { position: static; } .section-success .section-inner { display: block; height: auto; padding-bottom: 244px; padding-top: 0; } .section-success .section-title { font-size: 36px; } .section-success .section-content { padding: 29px 0 0; margin-top: 0; font-size: 15px; } .section-success .section-content p:not(:last-child) { margin-bottom: 19px; } .section-success span[class^=cloud] { width: 60px; height: 43px; } .section-success .section-image { max-width: 130px; position: absolute; bottom: 7px; right: 0; margin-right: -1px; } .section-success .lock { width: 142px; height: 199px; } .section-success .cloud1 { top: 163px; left: 55px; } .section-success .cloud2 { top: 256px; left: 26px; } .section-success .section-title { margin-bottom: 30px; margin-top: 0; } .section-success .section-title br { display: block; } .section-success .section-title .decor:after { display: none; } } /* ------------------------------------------------------------ *\ Section Book \* ------------------------------------------------------------ */ .section-book { text-align: center; } .section-book:after { content: ''; background: url(../css/images/book-decor.png) no-repeat 0 0; width: 576px; height: 295px; position: absolute; top: 493px; right: 0; } .section-book .shell { position: relative; } .section-book .shell:before { content: ''; background: url(../css/images/book-decor3.png) no-repeat 0 0; width: 282px; height: 97px; display: inline-block; vertical-align: middle; position: absolute; bottom: 175px; left: -75px; } .section-book .shell:after { content: ''; background: url(../css/images/book-decor4.png) no-repeat 0 0; width: 310px; height: 90px; display: inline-block; vertical-align: middle; position: absolute; bottom: 180px; right: -180px; } .section-book .lines { position: absolute; top: -19px; left: 1px; width: 100%; height: 136px; } .section-book .lines svg { position: absolute; top: 0; right: 65px; width: 582px; } .section-book .section-head { padding-top: 120px; padding-left: 17px; position: relative; z-index: 1; } .section-book .section-head:before { content: ''; background: url(../css/images/clouds.png) no-repeat 0 0; width: 579px; height: 223px; position: absolute; top: 59px; left: -210px; z-index: 2; } .section-book .section-title { line-height: 1; margin-bottom: 30px; font-weight: 400; } .section-book .section-title strong { position: relative; display: inline-block; } .section-book .section-title strong:before { content: ''; background: url(../css/images/book-title-decor.png) no-repeat 0 0; width: 219px; height: 27px; display: inline-block; position: absolute; top: 30px; right: 100%; margin-right: 20px; } .section-book .section-body { position: relative; padding: 121px 0 40px; z-index: 1; } .section-book .section-body:before { content: ''; background: url(../css/images/light.png) no-repeat 0 0; background-size: 100% 100%; width: 1308px; height: 678px; max-height: calc(100% + 130px); position: absolute; top: -110px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-left: -20px; } .section-book .section-entry { position: relative; max-width: 747px; margin: auto; color: #13042b; font-size: 22px; font-weight: 400; } .section-book .section-entry p { text-align: left; } .section-book .section-entry p:not(:last-child) { margin-bottom: 23px; } .section-book .section-actions { position: relative; margin-top: -20px; padding: 61px 0 78px; } .section-book .section-actions:before { content: ''; background: url(../css/images/book-decor2.png) no-repeat 0 0; width: 480px; height: 175px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .section-book .js-toggle { opacity: 0; transition: opacity .5s; } .section-book .js-toggle.active { opacity: 1; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .section-book .lines { height: 150px; left: 2px; top: -20px; } } @media(max-width: 1320px){ .section-book .lines svg { right: 38px; width: 588px; } .section-book .section-head { padding-left: 10px; } } @media (max-width: 1279px) { .section-book .lines { left: 11px; } .section-book .lines svg { right: 43px; width: 466px; } .section-book .section-head { padding-top: 89px; } .section-book .js-toggle { opacity: 1; } } @media (max-width: 1023px) { .section-book .section-head:after { content: ''; width: 10px; height: 96px; display: block; position: absolute; top: 0; left: 50%; margin-left: 5px; background-color: #ee322d; } .section-book .section-entry { font-size: 20px; } .section-book .section-actions { padding-top: 100px; } } @media (max-width: 767px) { .section-book:before { content: ''; width: 13px; height: 72px; background: #f54619; display: block; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; margin-left: 3px; } .section-book .shell:before, .section-book:after { display: none; } .section-book .shell:after { right: auto; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 173px; height: 51px; background-size: 100% 100%; bottom: 27px; } .section-book .section-title { position: relative; padding-bottom: 29px; line-height: 1.3; margin-bottom: 20px; } .section-book .section-title strong { position: static; } .section-book .section-title strong:before { top: auto; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 118px; height: 15px; background-size: 100% 100%; } .section-book .section-head { padding-top: 64px; position: relative; z-index: 2; } .section-book .section-head:before { width: 360px; background-size: 100% auto; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 20px; } .section-book .section-head:after { content: none; } .section-book .section-head img { position: relative; z-index: 2; } .section-book .section-body { padding: 47px 0 0; } .section-book .section-body:before { top: -101px; bottom: -70px; margin-left: -15px; width: 985px; height: auto; opacity: 0; transition: opacity .3s; } .section-book .section-body.active:before { opacity: 1; } .section-book .section-body p { font-size: 15px; } .section-book .section-entry p:not(:last-child) { margin-bottom: 20px; } .section-book .section-actions { padding: 76px 0 111px; } .section-book .section-actions:before { opacity: .5; } .section-book-secondary:before { display: none; } } /* ------------------------------------------------------------ *\ Section Contacts \* ------------------------------------------------------------ */ .section-contacts { padding: 26px 0; } .section-contacts .shell { position: relative; } .section-contacts .shell:before { content: ''; background: url(../css/images/contacts-decor2.png) no-repeat 0 0; width: 139px; height: 210px; display: inline-block; position: absolute; top: 25px; left: -75px; } .section-contacts .section-head { margin-bottom: 35px; } .section-contacts .section-title { text-align: center; } .section-contacts .section-inner { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; color: #13042b; font-weight: 700; padding: 38px 0 13px; font-size: 19px; max-width: 1015px; margin: auto; } .section-contacts .phone { margin-bottom: 0; margin-top: 2px; } .section-contacts .phone a { text-decoration: none; font-size: 31px; letter-spacing: 0.05em; display: inline-block; vertical-align: middle; margin-left: 10px; position: relative; top: -3px; color: #fff; } @media (max-width: 1279px) { .section-contacts .section-body { padding: 0 20px; } } @media (max-width: 1023px) { .section-contacts .section-title { font-size: 60px; } .section-contacts .phone { font-size: 21px; } .section-contacts .phone a { display: block; font-size: 26px; letter-spacing: 0.025em; margin-left: 0; margin-top: 10px; } } @media (max-width: 767px) { .section-contacts { padding: 30px 0 41px; } .section-contacts .shell:before { display: none; } .section-contacts .section-head { margin-bottom: 24px; } .section-contacts .section-body { padding: 0; } .section-contacts .section-title { font-size: 36px; } .section-contacts .section-inner { display: block; padding-top: 18px; } .section-contacts .section-inner .divider { margin: 2px 0; display: block; color: #fff; } .section-contacts .phone { font-size: 21px; text-align: center; display: block; margin-top: 20px; font-weight: 700; } .section-contacts .phone a {font-size: 28px; text-align: center; display: block; margin-top: 0px; font-weight: 700; } } /* ------------------------------------------------------------ *\ Section Breakthrough \* ------------------------------------------------------------ */ .section-breakthrough { font-weight: 400; letter-spacing: 0; font-size: 20px; } .section-breakthrough .shell-small { position: relative; } .section-breakthrough .shell-small:before { content: ''; background: url(../css/images/thinking-decor1.png) no-repeat 0 0; width: 234px; height: 727px; display: block; position: absolute; right: 100%; bottom: -47px; margin-right: 150px; } .section-breakthrough .shell-small:after { content: ''; background: url(../css/images/thinking-decor2.png) no-repeat 0 0; width: 258px; height: 716px; display: block; position: absolute; left: 100%; top: -47px; margin-left: 150px; } .section-breakthrough .section-content { position: relative; text-align: right; padding: 177px 0 75px; } .section-breakthrough .section-image { position: absolute; top: 0; left: -130px; } .section-breakthrough .section-entry { padding-left: 230px; } .section-breakthrough .section-body { padding-left: 150px; line-height: 1.2; } .section-breakthrough .section-body p:not(:last-child) { margin-bottom: 47px; } .section-breakthrough .section-title { font-weight: 400; margin-bottom: 31px; } .section-breakthrough .section-title strong { color: #f24b4b; } .section-breakthrough .section-head { margin-bottom: 27px; } .section-breakthrough .section-head h3 { font-size: 20px; letter-spacing: 0; margin-right: 5px; margin-bottom: 20px; } .section-breakthrough .section-head blockquote { font-size: 20px; color: #f24b4b; font-weight: 400; margin-right: 34px; letter-spacing: 0; } .section-breakthrough .section-head blockquote em { display: block; font-weight: 600; margin-right: -11px; } @media (max-width: 1440px) { .section-breakthrough .shell-small:before, .section-breakthrough .shell-small:after { display: none; } } @media (max-width: 1279px) { .section-breakthrough .section-image { left: -30px; top: 30px; } .section-breakthrough .section-image img { max-width: 400px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-breakthrough { font-size: 18px; } .section-breakthrough .section-content { padding-top: 130px; } .section-breakthrough .section-image { width: 50%; left: -45px; } .section-breakthrough .section-image img { max-width: 330px; } .section-breakthrough .section-title { font-size: 60px; } .section-breakthrough .section-entry { padding-left: 180px; } } /* Mobile */ @media (max-width: 767px) { .section-breakthrough { font-size: 16px; padding-top: 37px; letter-spacing: -0.01em; } .section-breakthrough p { margin-bottom: 39px !important; } .section-breakthrough .section-entry { text-align: left; padding-left: 0; } .section-breakthrough .section-head { margin-bottom: 10px; } .section-breakthrough .section-head h3 { font-size: 16px; letter-spacing: -0.02em; } .section-breakthrough .section-head blockquote { font-size: 16px; margin-right: 0; } .section-breakthrough .section-body { padding-left: 0; } .section-breakthrough .section-body p:not(:last-child) { margin-bottom: 20px; } .section-breakthrough .section-image { position: relative; left: auto; text-align: center; width: 100%; max-width: 218px; margin: -44px auto 0; top: 0; } .section-breakthrough .section-image img { max-width: 100%; } .section-breakthrough .section-content { padding-bottom: 12px; padding-top: 0; } .section-breakthrough .section-title { font-size: 37px; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 19px; } .section-breakthrough .section-title strong { font-size: 36px; } .section-breakthrough .section-title span { display: inline-block; position: relative; } .section-breakthrough .section-title span:after, .section-breakthrough .section-title span:before { content: ''; background: url(../css/images/footer-decor1.png) no-repeat 0 0; width: 91px; height: 11px; display: inline-block; vertical-align: middle; background-size: 100% 100%; margin: 0 10px; } } /* ------------------------------------------------------------ *\ Section Story \* ------------------------------------------------------------ */ .section-story { font-weight: 400; letter-spacing: 0; font-size: 21px; } .section-story .section-content { position: relative; padding: 54px 0 63px; } .section-story .section-image { position: absolute; bottom: -10px; right: -449px; } .section-story .section-entry { padding-right: 400px; } .section-story .section-head { margin-bottom: 40px; } .section-story .section-body p:not(:last-child) { margin-bottom: 20px; } .section-story .section-title { margin-bottom: 20px; line-height: 1.02; font-weight: 400; } .section-story .section-title span { color: #f24b4b; } @media (max-width: 1440px) { .section-story .section-image { width: 700px; right: -250px; } } @media (max-width: 1279px) { .section-story .section-image { width: 600px; right: -150px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-story { font-size: 18px; } .section-story .section-image { width: 58%; right: -110px; } .section-story .section-title { font-size: 60px; } .section-story .section-entry { padding-right: 40%; } } /* Mobile */ @media (max-width: 767px) { .section-story { font-size: 16px; line-height: 1.2; overflow: visible; z-index: 1; } .section-story .section-content { padding-bottom: 0; padding-top: 37px; } .section-story .section-head { margin-bottom: 23px; } .section-story .section-image { position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); right: auto; text-align: center; width: 100%; min-width: 468px; margin: 21px auto 0; } .section-story .section-title { font-size: 40px; text-align: left; } .section-story .section-entry { padding-right: 0; } } /* ------------------------------------------------------------ *\ Section Story Primary \* ------------------------------------------------------------ */ .section-story-primary { font-size: 20px; font-weight: 400; line-height: 1.2; } .section-story-primary .shell-small { position: relative; } .section-story-primary .section-head { background: url(../css/images/city.png) no-repeat center bottom; padding-top: 191px; } .section-story-primary .section-title { font-weight: 900; line-height: 1; position: relative; top: 7px; } .section-story-primary .section-body { max-width: 580px; position: relative; } .section-story-primary .section-body h3 { font-size: 22px; margin-bottom: 26px; } .section-story-primary .section-entry { padding: 35px 0 100px; } .section-story-primary .section-image { position: absolute; top: 0; right: -130px; } @media (max-width: 1279px) { .section-story-primary { font-size: 18px; } .section-story-primary .section-image { right: -100px; } .section-story-primary .section-body { max-width: 50%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-story-primary { font-size: 17px; } .section-story-primary .section-body { max-width: 53%; position: relative; z-index: 1; } .section-story-primary .section-image { width: 565px; right: -85px; } } /* Mobile */ @media (max-width: 767px) { .section-story-primary { font-size: 16px; overflow: visible; z-index: 2; } .section-story-primary .section-title { top: 4px; font-size: 38px; } .section-story-primary .section-image { position: relative; top: auto; right: auto; width: 355px; margin-top: -55px; margin-left: -10px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 492px; } .section-story-primary .section-head { height: 72px; background-size: auto 100%; padding-top: 34px; } .section-story-primary .section-body { max-width: 100%; } .section-story-primary .section-body h3 { font-size: 16px; margin-bottom: 20px; } .section-story-primary .section-entry { padding-bottom: 40px; padding-top: 27px; } } /* ------------------------------------------------------------ *\ Section Key \* ------------------------------------------------------------ */ .section-key { letter-spacing: 0; font-size: 21px; } .section-key .shell-small { position: relative; } .section-key .shell-small:before { content: ''; background: url(../css/images/thinking-decor1.png) no-repeat 0 0; width: 234px; height: 727px; display: block; position: absolute; right: 100%; bottom: -47px; margin-right: 50px; } .section-key .shell-small:after { content: ''; background: url(../css/images/thinking-decor2.png) no-repeat 0 0; width: 258px; height: 716px; display: block; position: absolute; left: 100%; top: -47px; margin-left: 50px; } .section-key .section-content { position: relative; text-align: right; padding: 54px 0 63px; } .section-key .section-image { position: absolute; bottom: -81px; left: -78px; } .section-key .section-entry { padding-left: 230px; } .section-key .section-head { margin-bottom: 37px; } .section-key .section-body { padding-left: 190px; } .section-key .section-body p:not(:last-child) { margin-bottom: 21px; } .section-key .section-title { font-weight: 400; line-height: 1; } .section-key .section-title strong { color: #f24b4b; } @media (max-width: 1440px) { .section-key .shell-small:before, .section-key .shell-small:after { display: none; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-key { font-size: 18px; } .section-key .section-image { width: 50%; } .section-key .section-title { font-size: 60px; } .section-key .section-entry { padding-left: 100px; } } /* Mobile */ @media (max-width: 767px) { .section-key { font-size: 16px; line-height: 1.2; } .section-key .section-entry { padding-left: 0; } .section-key .section-head { margin-bottom: 20px; } .section-key .section-body { padding-left: 0; text-align: left; } .section-key .section-image { position: relative; bottom: 0; top: 0; left: -59px; right: auto; text-align: center; width: 100%; width: 339px; margin: 8px auto -106px; } .section-key .section-title { font-size: 40px; } .section-key .section-content { padding: 24px 0 0; } } /* ------------------------------------------------------------ *\ Section Power \* ------------------------------------------------------------ */ .section-power { font-weight: 400; letter-spacing: 0; } .section-power:before { content: ''; background: url(../css/images/dots-decor1.png) no-repeat 0 0; width: 160px; height: 136px; position: absolute; bottom: 0; left: 0; } .section-power .section-content { position: relative; padding: 59px 0 68px; } .section-power .section-image { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: -220px; } .section-power .section-entry { padding-right: 420px; } .section-power .section-body p:not(:last-child) { margin-bottom: 24px; } .section-power .section-title { margin-bottom: 20px; line-height: 1; margin-bottom: 36px; font-weight: 400; } .section-power .section-title strong { font-weight: 700; } .section-power .section-title span { color: #13042b; font-weight: 900; position: relative; } .section-power .section-title span:after { content: ''; background: url(../css/images/power-lines.png) no-repeat 0 0; width: 145px; height: 261px; display: inline-block; vertical-align: middle; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: -100px; } @media (max-width: 1440px) { .section-power:before { display: none; } } @media (max-width: 1279px) { .section-power .section-image { right: -70px; } .section-power .section-image img { max-width: 500px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-power { font-size: 18px; } .section-power .section-image { width: 59%; right: -120px; } .section-power .section-image img { max-width: 350px; } .section-power .section-title { font-size: 60px; } .section-power .section-entry { padding-right: 300px; } } /* Mobile */ @media (max-width: 767px) { .section-power { font-size: 16px; line-height: 1.2; } .section-power .section-entry { padding-right: 0; } .section-power .section-head { margin-bottom: 0px; } .section-power .section-body { padding-right: 0; text-align: left; } .section-power .section-image { position: relative; bottom: 0; top: 0; left: auto; right: auto; text-align: center; width: 100%; max-width: 300px; margin: 35px auto 0; -webkit-transform: none; -ms-transform: none; transform: none; } .section-power .section-image img { max-width: 100%; } .section-power .section-title { font-size: 36px; text-align: left; line-height: 1.1; margin-bottom: 23px; } .section-power .section-title span:after { width: 76px; height: 131px; background-size: 100% 100%; right: -60px; } .section-power .section-content { padding-bottom: 0; padding-top: 24px; } } /* ------------------------------------------------------------ *\ Section Solution \* ------------------------------------------------------------ */ .section-solution { letter-spacing: 0; font-size: 21px; } .section-solution .shell-small { position: relative; } .section-solution .shell-small:before { content: ''; background: url(../css/images/thinking-decor1.png) no-repeat 0 0; width: 234px; height: 727px; display: block; position: absolute; right: 100%; bottom: -47px; margin-right: 150px; } .section-solution .shell-small:after { content: ''; background: url(../css/images/thinking-decor2.png) no-repeat 0 0; width: 258px; height: 716px; display: block; position: absolute; left: 100%; top: -47px; margin-left: 50px; } .section-solution .section-title { font-weight: 400; } .section-solution .section-content { position: relative; text-align: right; padding: 50px 0 63px; } .section-solution .section-image { position: absolute; top: -62px; left: -147px; } .section-solution .section-image-secondary { position: absolute; bottom: 0px; left: -26px; } .section-solution .section-entry { padding-left: 220px; } .section-solution .section-body { padding-left: 160px; line-height: 1.2; } .section-solution .section-body p:not(:last-child) { margin-bottom: 28px; } .section-solution .section-head { margin-bottom: 30px; } @media (max-width: 1440px) { .section-solution .shell-small:before, .section-solution .shell-small:after { display: none; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-solution { font-size: 18px; } .section-solution .section-image { width: 59%; left: -220px; } .section-solution .section-image-secondary { width: 40%; left: -60px; } .section-solution .section-title { font-size: 60px; } .section-solution .section-entry { padding-left: 60px; } } /* Mobile */ @media (max-width: 767px) { .section-solution { font-size: 16px; } .section-solution p { margin-bottom: 21px !important; } .section-solution .section-content { padding-bottom: 0; padding-top: 22px; } .section-solution .section-entry { padding-left: 0; } .section-solution .section-head { margin-bottom: 20px; } .section-solution .section-body { padding-left: 0; text-align: left; } .section-solution .section-image { position: relative; bottom: 0; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); min-width: 475px; right: auto; text-align: center; width: 110%; margin: -121px auto 0; margin-left: 18%; } .section-solution .section-image img { width: 100%; } .section-solution .section-title { font-size: 36px; line-height: 1.2; text-align: left; } .section-solution .section-title span:after { content: ''; background: url(../css/images/wave4.png) no-repeat 0 0; width: 149px; height: 15px; display: inline-block; vertical-align: middle; background-size: 100% 100%; margin-left: 40px; } } /* ------------------------------------------------------------ *\ Section Techniques \* ------------------------------------------------------------ */ .section-techniques { font-weight: 400; letter-spacing: 0; line-height: 1.2; } .section-techniques .section-content { position: relative; padding: 52px 0 55px; } .section-techniques .section-image { position: absolute; bottom: -2px; right: -244px; } .section-techniques .section-head { margin-bottom: 30px; } .section-techniques .section-body { padding-right: 400px; } .section-techniques .section-body p:not(:last-child) { margin-bottom: 29px; } .section-techniques .section-title { font-weight: 400; } .section-techniques .section-title span { color: #13042b; } @media (max-width: 1440px) { .section-techniques .section-image { right: -155px; } .section-techniques .section-image img { max-width: 550px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-techniques { font-size: 18px; } .section-techniques .section-image { width: 59%; right: -110px; } .section-techniques .section-title { font-size: 60px; } .section-techniques .section-body { padding-right: 300px; } } /* Mobile */ @media (max-width: 767px) { .section-techniques { font-size: 16px; } .section-techniques p { margin-bottom: 20px !important; } .section-techniques .section-content { padding-bottom: 0; padding-top: 28px; } .section-techniques .section-entry { padding-right: 0; } .section-techniques .section-head { margin-bottom: 26px; } .section-techniques .section-body { padding-right: 0; text-align: left; } .section-techniques .section-image { position: relative; bottom: 0; top: 0; left: auto; right: auto; text-align: center; width: 100%; max-width: 300px; margin: 43px auto 0; -webkit-transform: none; -ms-transform: none; transform: none; } .section-techniques .section-image img { max-width: 250px; } .section-techniques .section-title { font-size: 38px; text-align: left; line-height: 1.05; } } /* ------------------------------------------------------------ *\ Section Consultancy \* ------------------------------------------------------------ */ .section-consultancy { font-size: 20px; z-index: 2; } .section-consultancy .shell-small { position: relative; } .section-consultancy .shell-small:before { content: ''; background: url(../css/images/thinking-decor1.png) no-repeat 0 0; width: 234px; height: 727px; display: block; position: absolute; right: 100%; bottom: -47px; margin-right: 150px; } .section-consultancy .section-content { padding: 186px 0 60px; } .section-consultancy .section-title { color: #f24b4b; margin-bottom: 42px; line-height: 1; } .section-consultancy .section-title strong { color: #13042b; } .section-consultancy .section-head { margin-bottom: 24px; } .section-consultancy .section-head h3 { font-size: 20px; font-weight: 700; } .section-consultancy .section-body { max-width: 570px; } .section-consultancy .section-body p:not(:last-child) { margin-bottom: 24px; } .section-consultancy .section-image { right: -130px; } @media (max-width: 1440px) { .section-consultancy .shell-small:before, .section-consultancy .shell-small:after { display: none; } } @media (max-width: 1279px) { .section-consultancy .section-image { right: -20px; } .section-consultancy .section-image img { max-width: 390px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-consultancy .section-body { max-width: 60%; } .section-consultancy .section-image { right: -130px; } .section-consultancy .section-image img { max-width: 320px; } } /* Mobile */ @media (max-width: 767px) { .section-consultancy { font-size: 16px; } .section-consultancy p { margin-bottom: 21px !important; } .section-consultancy .section-title { font-size: 37px; text-align: left; letter-spacing: -0.025em; color: #13042b; margin-bottom: 27px; line-height: 1.05; } .section-consultancy .section-title span { display: inline-block; position: relative; vertical-align: middle; } .section-consultancy .section-title span:after { content: ''; background: url(../css/images/lines.png) no-repeat 0 0; width: 94px; height: 20px; display: inline-block; vertical-align: middle; margin-left: 20px; } .section-consultancy .section-title strong { color: #f24b4b; } .section-consultancy .section-head { margin-bottom: 20px; } .section-consultancy .section-head h3 { font-size: 16px; } .section-consultancy .section-body { max-width: 100%; } .section-consultancy .section-image { right: auto; margin-top: 28px; width: 339px; margin-left: -27px; } .section-consultancy .section-image img { width: 100%; } .section-consultancy .section-content { padding-top: 28px; padding-bottom: 0; } } /* ------------------------------------------------------------ *\ Section Consultation \* ------------------------------------------------------------ */ .section-consultation { font-size: 21px; overflow: visible; } .section-consultation .section-image { bottom: auto; top: -182px; left: -60px; } .section-consultation .section-image-secondary { position: absolute; bottom: 0; left: 83px; } .section-consultation .section-title { margin-bottom: 42px; line-height: 1; } .section-consultation .section-head { margin-bottom: 27px; } .section-consultation .section-head h3 { font-size: 21px; } .section-consultation .section-body p:not(:last-child) { margin-bottom: 26px; } .section-consultation .section-content { padding: 66px 0 86px; } .section-consultation .section-step { display: inline-block; position: absolute; top: 0; right: -61px; color: #fff; font-size: 62px; font-weight: 600; text-align: center; width: 122px; height: 60px; z-index: 5; } .section-consultation .section-step:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 60px 61px 0 61px; border-color: #13042b transparent transparent transparent; position: absolute; top: 0; left: 0; } .section-consultation .section-step:after { content: ''; background: url(../css/images/steps-decor1.png) no-repeat 0 0; width: 122px; height: 62px; position: absolute; left: 0; bottom: 15px; } .section-consultation .section-step span { position: relative; z-index: 1; line-height: 1; top: -22px; left: -4px; display: block; } .section-consultation .section-step span:after { content: ''; background: url(../css/images/steps-decor2.png) no-repeat 0 0; width: 127px; height: 117px; position: absolute; bottom: -20px; left: 80px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-consultation { font-size: 18px; } .section-consultation .section-step { right: 10px; } .section-consultation .section-body { max-width: 81%; } .section-consultation .section-image { left: -50px; top: -230px; width: 40%; } .section-consultation .section-image-secondary { left: 10px; } .section-consultation .section-head h3 { font-size: 18px; } } /* Mobile */ @media (max-width: 767px) { .section-consultation { font-size: 16px; } .section-consultation p { margin-bottom: 20px !important; } .section-consultation .section-step { right: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); margin-right: 7px; } .section-consultation .section-step { font-size: 41px; width: 98px; margin-left: -49px; } .section-consultation .section-step:before { border-width: 49px 49px 0 49px; } .section-consultation .section-step:after { width: 90px; height: 40px; background-size: 100% 100%; top: auto; top: 0; } .section-consultation .section-step span { top: -6px; } .section-consultation .section-step span:after { width: 69px; height: 70px; background-size: 100% 100%; left: 68px; top: -24px; } .section-consultation .section-title { font-size: 38px; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 21px; } .section-consultation .section-head { margin-bottom: 17px; } .section-consultation .section-body { text-align: left; max-width: 100%; } .section-consultation .section-content { padding-bottom: 224px; padding-top: 68px; } .section-consultation .section-image { margin-top: -160px; top: 0; left: auto; margin-bottom: 20px; display: none; } .section-consultation .section-image-secondary { min-width: 680px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 29px; } } /* ------------------------------------------------------------ *\ Section Milestones \* ------------------------------------------------------------ */ .section-milestones { font-size: 21px; } .section-milestones .shell-small { position: relative; } .section-milestones .shell-small:before { content: ''; background: url(../css/images/thinking-decor1.png) no-repeat 0 0; width: 234px; height: 727px; display: block; position: absolute; right: 100%; bottom: -47px; margin-right: 50px; } .section-milestones .section-title { color: #f24b4b; margin-bottom: 43px; line-height: 1; } .section-milestones .section-content { padding: 70px 0 44px; } .section-milestones .section-head { margin-bottom: 25px; } .section-milestones .section-head h3 { font-size: 21px; } .section-milestones .section-body p:not(:last-child) { margin-bottom: 27px; } .section-milestones .section-image { bottom: -27px; right: -148px; } .section-milestones .section-step { display: inline-block; position: absolute; top: 0; left: -61px; color: #fff; font-size: 62px; font-weight: 600; text-align: center; width: 150px; height: 75px; z-index: 5; } .section-milestones .section-step:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 75px 75px 0 75px; border-color: #f24b4b transparent transparent transparent; position: absolute; top: 0; left: 0; } .section-milestones .section-step:after { content: ''; background: url(../css/images/steps-decor3.png) no-repeat 0 0; width: 122px; height: 62px; position: absolute; left: 16px; bottom: 12px; } .section-milestones .section-step span { position: relative; z-index: 1; line-height: 1; top: -10px; display: block; } .section-milestones .section-step span:after { content: ''; background: url(../css/images/steps-decor4.png) no-repeat 0 0; width: 121px; height: 128px; position: absolute; bottom: 2px; left: -90px; } @media (max-width: 1440px) { .section-milestones .shell-small:before, .section-milestones .shell-small:after { display: none; } .section-milestones .section-image { right: -50px; } .section-milestones .section-image img { max-width: 400px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-milestones { font-size: 18px; } .section-milestones .section-step { left: 10px; } .section-milestones .section-step span { top: -7px; } .section-milestones .section-content { padding-top: 80px; } .section-milestones .section-image { width: 41%; right: -2%; } .section-milestones .section-image img { max-width: 350px; } } /* Mobile */ @media (max-width: 767px) { .section-milestones { font-size: 16px; } .section-milestones p { margin-bottom: 22px !important; } .section-milestones .section-step { font-size: 41px; width: 98px; margin-left: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-left: -7px; } .section-milestones .section-step:before { border-width: 49px 49px 0 49px; } .section-milestones .section-step:after { width: 90px; height: 40px; background-size: 100% 100%; bottom: auto; top: 0; left: 4px; } .section-milestones .section-step span:after { bottom: 1px; left: -61px; width: 79px; height: 84px; background-size: 100% 100%; } .section-milestones .section-content { padding-bottom: 0; padding-top: 76px; } .section-milestones .section-head { margin-bottom: 20px; } .section-milestones .section-head h3 { font-size: 16px; } .section-milestones .section-head h3 br { display: none; } .section-milestones .section-title { font-size: 38px; text-align: left; margin-bottom: 24px; } .section-milestones .section-title span { color: #13042b; font-size: 36px; } .section-milestones .section-image { width: 341px; max-width: none; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-top: -28px; margin-left: 4px; } .section-milestones .section-image img { width: 100%; max-width: none; } } /* ------------------------------------------------------------ *\ Section Design \* ------------------------------------------------------------ */ .section-design { font-size: 21px; padding-top: 100px; letter-spacing: 0; line-height: 1.2; } .section-design .section-head { text-align: center; } .section-design .section-title { line-height: 1; font-weight: 400; margin-bottom: 41px; } .section-design .section-title strong { font-weight: 700; color: #f24b4b; } .section-design .section-body { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 70px; -moz-column-gap: 70px; column-gap: 70px; min-height: 400px; } .section-design .section-body h3 { font-size: 21px; margin-bottom: 27px; } .section-design .section-body p { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .section-design .section-image { margin-top: -57px; text-align: center; } .section-design .section-step { display: inline-block; position: absolute; top: 0; left: 50%; color: #13042b; font-size: 62px; font-weight: 600; text-align: center; width: 150px; height: 75px; z-index: 5; margin-left: -75px; } .section-design .section-step:before { content: ''; width: 0; height: 0; border-style: solid; border-width: 75px 75px 0 75px; border-color: #fff transparent transparent transparent; position: absolute; top: 0; left: 0; } .section-design .section-step:after { content: ''; background: url(../css/images/steps-decor1.png) no-repeat 0 0; width: 122px; height: 62px; position: absolute; left: 13px; bottom: 12px; } .section-design .section-step span { position: relative; z-index: 1; line-height: 1; top: -10px; display: block; } .section-design .section-step span:after { content: ''; background: url(../css/images/steps-decor5.png) no-repeat 0 0; width: 91px; height: 100px; position: absolute; bottom: -20px; left: -50px; } @media (max-width: 1279px) { .section-design .section-image { margin-top: -30px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-design { font-size: 18px; } .section-design .section-title { font-size: 60px; } .section-design .section-body { -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } } /* Mobile */ @media (max-width: 767px) { .section-design { font-size: 16px; padding-top: 72px; } .section-design .section-body { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -webkit-columns: 1; -moz-columns: 1; columns: 1; } .section-design .section-body h3 { font-size: 16px; margin-bottom: 21px; } .section-design .section-body .video_wrap-outer { order: 2; } .section-design .section-body > p:last-child { order: 3; } .section-design .section-body .home-lists { padding-bottom: 0; } .section-design .section-image { margin-top: 23px; width: 320px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); position: relative; } .section-design .section-title { font-size: 38px; text-align: left; line-height: 1.05; margin-bottom: 24px; } .section-design .section-title strong { display: inline-block; } .section-design .section-title strong:after { content: ''; background: url(../css/images/link-decor.png) no-repeat 0 0; width: 119px; height: 13px; background-size: 100% 100%; display: inline-block; vertical-align: middle; margin-left: 20px; } .section-design .section-step { font-size: 41px; width: 98px; margin-left: -49px; } .section-design .section-step:before { border-width: 49px 49px 0 49px; } .section-design .section-step:after { width: 90px; height: 40px; background-size: 100% 100%; top: auto; top: 0; } .section-design .section-step span { top: 0; } } /* ------------------------------------------------------------ *\ Section Turbo \* ------------------------------------------------------------ */ .section-turbo { } .section-turbo .shell-small { position: relative; } .section-turbo .shell-small:before { content: ''; background: url(../css/images/thinking-decor1.png) no-repeat 0 0; width: 234px; height: 727px; display: block; position: absolute; right: 100%; bottom: -47px; margin-right: 50px; } .section-turbo .section-title { color: #f24b4b; } .section-turbo .section-title span { color: #13042b; } .section-turbo .section-body { max-width: 670px; position: relative; z-index: 1; } .section-turbo .section-body p:not(:last-child) { margin-bottom: 19px; } .section-turbo .section-content { padding-bottom: 86px; } .section-turbo .section-image { right: -445px; } @media (max-width: 1440px) { .section-turbo .shell-small:before, .section-turbo .shell-small:after { display: none; } .section-turbo .section-image { right: -400px; } .section-turbo .section-image img { max-width: 650px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-turbo { font-size: 18px; } .section-turbo .section-body { max-width: 60%; } .section-turbo .section-image { right: -170px; } .section-turbo .section-image img { max-width: 100%; } } /* Mobile */ @media (max-width: 767px) { .section-turbo { font-size: 16px; } .section-turbo .section-head { margin-bottom: 19px; } .section-turbo .section-body { max-width: 100%; } .section-turbo .section-content { padding-bottom: 0; padding-top: 25px; } .section-turbo .section-image { right: auto; margin-top: 20px; width: 405px; max-width: none; margin-left: 45px; } .section-turbo .section-image img { width: 100%; } .section-turbo .section-title { font-size: 38px; text-align: left; } .section-turbo .section-title span span { display: inline-block; vertical-align: middle; position: relative; } .section-turbo .section-title span span:after { content: ''; background: url(../css/images/style2.png) no-repeat 0 0; width: 170px; height: 15px; display: inline-block; vertical-align: middle; margin-left: 10px; } } /* ------------------------------------------------------------ *\ Section Features \* ------------------------------------------------------------ */ .section-features { text-align: center; } .section-features:before { content: ''; background: url(../css/images/contacts-decor2.png) no-repeat 0 0; width: 139px; height: 210px; display: block; position: absolute; top: 20px; right: 20px; } .section-features:after { content: ''; background: url(../css/images/dots-decor1.png) no-repeat 0 0; width: 160px; height: 136px; display: block; position: absolute; bottom: 0; left: 0; } .section-features .section-title { max-width: 760px; margin: 0 auto 30px; font-weight: 400; line-height: 1; } .section-features .section-content { position: relative; padding: 71px 0 300px; } .section-features .section-head { margin-bottom: 33px; } .section-features .section-body h3 { color: #13042b; text-align: left; max-width: 522px; margin: auto; font-size: 28px; font-weight: 900; letter-spacing: 0; } .section-features .section-body h3:before { content: ''; background: url(../css/images/decor1.png) no-repeat 0 0; width: 170px; height: 15px; display: block; margin: 10px 0 22px; } .section-features .section-image { position: absolute; left: 0; top: -240px; margin-left: -1375px; } .section-features .section-image-secondary { position: absolute; bottom: 20px; right: -401px; } @media (max-width: 1440px) { .section-features:before, .section-features:after { display: none; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-features { } .section-features .section-title { font-size: 60px; } .section-features .section-image { width: 400px; margin-left: 0; top: -100px; } .section-features .section-image-secondary { width: 700px; right: -100px; } .section-features .section-content { padding-top: 130px; } } /* Mobile */ @media (max-width: 767px) { .section-features .section-head { margin-bottom: 28px; } .section-features .section-title { font-size: 38px; margin-bottom: 0; } .section-features .section-title span { font-size: 30px; color: #13042b; } .section-features .section-image { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); min-width: 871px; left: 223px; top: -186px; } .section-features .section-image-secondary { width: 600px; right: auto; left: 0px; bottom: 0px; } .section-features .section-content { padding: 17px 0 150px; } .section-features .section-body h3 { font-size: 16px; margin-top: -8px; } .section-features .section-body h3:before { width: 138px; height: 12px; background-size: 100% 100%; margin-bottom: 18px; } } /* ------------------------------------------------------------ *\ Section Paths \* ------------------------------------------------------------ */ .section-paths { overflow: visible; position: relative; z-index: 1; line-height: 1.15; } .section-paths .section-content { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: relative; } .section-paths .section-content:before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; background: url(../css/images/brake.png) repeat-y 0 0; width: 23px; margin-left: -12px; } .section-paths .section-image { position: absolute; top: 30px; left: -400px; } .section-paths .section-title { font-weight: 900; font-size: 65px; margin-bottom: 33px; } .section-paths .section-group { max-width: 45%; -webkit-flex: 0 0 45%; -ms-flex: 0 0 45%; flex: 0 0 45%; position: relative; padding: 325px 0 81px; } .section-paths .section-group:first-child { margin-right: 100px; } .section-paths .section-group:last-child { text-align: right; } .section-paths .section-group:last-child .section-image { left: auto; right: -411px; top: 50px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-paths { font-size: 18px; } .section-paths .section-title { font-size: 40px; } .section-paths .section-group:first-child { margin-right: 0px; } } /* Mobile */ @media (max-width: 767px) { .section-paths { font-size: 15px; letter-spacing: -0.01em; } .section-paths p { font-weight: 400; } .section-paths .shell-small { position: relative; } .section-paths .shell-small:before { content: ''; background: url(../css/images/white-line.png) repeat-y 0 0; width: 47px; height: auto; position: absolute; top: 0; left: 0; bottom: 0; margin-left: -28px; } .section-paths .section-content { -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; } .section-paths .section-content:before { display: none; } .section-paths .section-group { max-width: 100%; width: 100%; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; padding-top: 220px; padding-bottom: 15px; line-height: 1.2; } .section-paths .section-title { font-size: 38px; margin-bottom: 19px; } .section-paths .section-group:first-child { margin-right: 0px; -webkit-order: 2; -ms-flex-order: 2; order: 2; background: #fff; color: #f24b4b; position: relative; padding-left: 0px; padding-top: 184px; padding-right: 20px; } .section-paths .section-group:first-child:before { content: ''; background: #fff; position: absolute; top: 0; bottom: 0; right: 100%; width: 700px; } .section-paths .section-group:first-child:after { content: ''; background: url(../css/images/white-line.png) repeat-y 0 0; position: absolute; top: 0; bottom: 0; left: 100%; width: 700px; margin-left: -30px; } .section-paths .section-group:first-child p { position: relative; z-index: 2; } .section-paths .section-group:first-child .section-image { max-width: 463px; left: -223px; top: -7px; } .section-paths .section-group:first-child .section-title { text-align: left; } .section-paths .section-group:last-child { text-align: right; padding-left: 30px; padding-top: 196px; padding-bottom: 30px; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .section-paths .section-group:last-child:before { content: ''; background: #fff; position: absolute; top: 0; bottom: 0; right: 100%; width: 700px; } .section-paths .section-group:last-child .section-title { text-align: right; } .section-paths .section-group:last-child .section-image { max-width: 530px; top: 3px; right: -276px; } } /* ------------------------------------------------------------ *\ Section Reunion \* ------------------------------------------------------------ */ .section-reunion { text-align: center; font-weight: 400; font-size: 21px; letter-spacing: 0; padding-bottom: 43px; } .section-reunion .section-image { margin-top: -250px; margin-bottom: 7px; } .section-reunion .section-image-secondary { margin: 24px 0 19px; width: 2000px; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .section-reunion .section-title { line-height: 1; font-weight: 400; } .section-reunion .section-title span { color: #f24b4b; } .section-reunion .section-head { margin-bottom: 27px; } .section-reunion .section-body { max-width: 830px; margin: auto; } .section-reunion .section-body p:not(:last-child) { margin-bottom: 22px; } @media (max-width: 1279px) { .section-reunion { font-size: 18px; } .section-reunion .section-image { min-width: 1300px; margin-top: -200px; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .section-reunion .section-title { font-size: 60px; } .section-reunion .section-image-secondary { width: 1200px; } } /* Mobile */ @media (max-width: 767px) { .section-reunion { font-size: 16px; line-height: 1.2; overflow: visible; position: relative; z-index: 2; letter-spacing: -0.01em; } .section-reunion .section-image { width: 520px; min-width: 0; margin-bottom: 24px; margin-top: 0; margin-left: -34px; } .section-reunion .section-image img { width: 100%; margin-top: -350px; } .section-reunion .section-head { margin-bottom: 19px; } .section-reunion .section-title { font-size: 38px; margin-bottom: 0px; } .section-reunion .section-title br { display: none; } .section-reunion .section-image-secondary { width: 861px; margin-top: 18px; margin-left: -12px; margin-bottom: 15px; } .section-reunion .section-content { padding-bottom: 4px; } } /* ------------------------------------------------------------ *\ Section Synergy \* ------------------------------------------------------------ */ .section-synergy .shell-small { padding-top: 75px; padding-bottom: 77px; } .section-synergy .section-title { line-height: 1; margin-bottom: 34px; } .section-synergy .section-title span { color: #f24b4b; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-synergy { font-size: 18px; } } /* Mobile */ @media (max-width: 767px) { .section-synergy { font-size: 16px; letter-spacing: -0.01em; } .section-synergy .shell-small { padding: 24px 0 358px; } .section-synergy .section-title { text-align: left; margin-bottom: 21px; } } /* ------------------------------------------------------------ *\ Section Innovation \* ------------------------------------------------------------ */ .section-innovation { overflow: visible; position: relative; z-index: 1; } .section-innovation .section-image { position: absolute; left: -180px; top: -413px; } .section-innovation .section-image-secondary { position: absolute; left: -31px; bottom: 13px; } .section-innovation .section-content { position: relative; padding-top: 95px; } .section-innovation .section-title { line-height: 1; margin-bottom: 36px; } .section-innovation .section-title span { color: #13042b; } .section-innovation .section-content { padding-bottom: 90px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-innovation { font-size: 18px; } .section-innovation .section-title { font-size: 50px; } .section-innovation .section-content { padding-top: 40px; } .section-innovation .section-image { width: 1000px; left: -20%; top: -55%; } } /* Mobile */ @media (max-width: 767px) { .section-innovation { font-size: 16px; } .section-innovation p { margin-bottom: 23px !important; } .section-innovation .section-image { position: relative; left: -77px; top: auto; width: 410px; max-width: none; margin: -351px auto 28px; text-align: center; } .section-innovation .section-image img { width: 100%; } .section-innovation .section-image-secondary { position: relative; left: auto; bottom: auto; max-width: 300px; margin: 20px auto 0; } .section-innovation .section-head { margin-bottom: 20px; } .section-innovation .section-title { font-size: 36px; text-align: left; letter-spacing: -0.03em; margin-bottom: 0; line-height: 1.1; } .section-innovation .section-title strong:first-of-type { font-size: 31px; } .section-innovation .section-content { padding-bottom: 23px; } } /* ------------------------------------------------------------ *\ Section Chapter \* ------------------------------------------------------------ */ .section-chapter { text-align: center; font-size: 21px; } .section-chapter .shell-small { padding-bottom: 55px; } .section-chapter .section-title { font-size: 65px; font-weight: 400; line-height: 1; color: #13042b; margin-bottom: 8px; } .section-chapter .section-title:after { content: ''; background: url(../css/images/footer-decor1.png) no-repeat 0 0; width: 114px; height: 14px; display: block; margin: 37px auto 0; } .section-chapter .section-title span { color: #f24b4b; font-size: 60px; } .section-chapter .section-title strong:last-of-type { font-size: 72px; } .section-chapter .section-head { position: relative; padding-top: 40px; margin-bottom: 43px; } .section-chapter .section-head * { position: relative; z-index: 1; } .section-chapter .section-head:after { content: ''; background: url(../css/images/light2.png) no-repeat 0 0; width: 1376px; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 0; bottom: 0; background-size: 100% 100%; } .section-chapter .section-head img { position: relative; top: 9px; } .section-chapter .section-body { max-width: 825px; margin: auto; line-height: 1.2; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-chapter { font-size: 18px; } .section-chapter .section-title { font-size: 50px; } .section-chapter .section-title span { font-size: 50px; } .section-chapter .section-title strong:last-of-type { font-size: 60px; } .section-chapter .section-head img { top: 0; } } /* Mobile */ @media (max-width: 767px) { .section-chapter { font-size: 16px; } .section-chapter .section-title { font-size: 38px; line-height: 1.1; } .section-chapter .section-title:after { margin-top: 15px; } .section-chapter .section-title span { font-size: 38px; } .section-chapter .section-title strong:last-of-type { font-size: 38px; } .section-chapter .section-head { padding-top: 26px; margin-bottom: 38px; } .section-chapter .section-head:after { width: 875px; bottom: -3px; } .section-chapter .section-head img { max-width: 199px; } .section-chapter .shell-small { padding-bottom: 58px; } } /* ------------------------------------------------------------ *\ Section You \* ------------------------------------------------------------ */ .section-you { } .section-you .shell-small { position: relative; } .section-you .shell-small:before { content: ''; background: url(../css/images/thinking-decor1.png) no-repeat 0 0; width: 234px; height: 727px; display: block; position: absolute; right: 100%; bottom: -47px; margin-right: 100px; } .section-you .section-title { line-height: 1; } .section-you .section-title strong { color: #f24b4b; } .section-you .section-image { bottom: auto; top: 0; right: -45px; } .section-you .section-head { margin-bottom: 20px; } .section-you .section-body p { line-height: 1.15; } .section-you .section-body h4 { font-size: 21px; font-weight: 600; margin-bottom: 26px; } .section-you .section-body h3 { font-size: 21px; font-weight: 900; color: #f24b4b; } @media (max-width: 1440px) { .section-you .shell-small:before, .section-you .shell-small:after { display: none; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-you { font-size: 18px; } .section-you .section-image { width: 40%; right: -20px; } .section-you .section-title { font-size: 50px; } } /* Mobile */ @media (max-width: 767px) { .section-you { font-size: 16px; } .section-you p { line-height: 1.2 !important; margin-bottom: 20px !important; } .section-you .section-content { padding-top: 0; padding-bottom: 40px; } .section-you .section-image { width: 158px; max-width: none; margin: 0px auto 30px; right: auto; position: relative; left: -15px; } .section-you .section-title { font-size: 38px; text-align: left; line-height: 1.05; margin-bottom: 0px; } .section-you .section-head { margin-bottom: 29px; } .section-you .section-body h4, .section-you .section-body h3 { font-size: 16px; } .section-you .section-body h4 { margin-bottom: 20px; } } /* ------------------------------------------------------------ *\ Section Example \* ------------------------------------------------------------ */ .section-example { font-size: 20px; } .section-example .section-content { padding: 195px 0 66px; } .section-example .section-title { line-height: 1; margin-bottom: 39px; } .section-example .section-title span { color: #f24b4b; } .section-example .section-title em { font-style: normal; } .section-example .section-head { margin-bottom: 23px; } .section-example .section-head h3 { font-size: 20px; letter-spacing: -0.01em; } .section-example .section-body p:not(:last-child) { margin-bottom: 25px; } .section-example .section-image { right: -430px; } @media (max-width: 1440px) { .section-example .section-body { max-width: 550px; } } @media (max-width: 1279px) { .section-example .section-image { right: -370px; max-width: 80%; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-example .section-body { max-width: 60%; } .section-example .section-image { right: -210px; max-width: 71%; width: auto; } } /* Mobile */ @media (max-width: 767px) { .section-example { font-size: 16px; } .section-example p { margin-bottom: 20px !important; } .section-example .section-title { font-size: 38px; text-align: left; margin-bottom: 24px; line-height: 0.95; } .section-example .section-body { max-width: 100%; } .section-example .section-head { margin-bottom: 20px; } .section-example .section-head h3 { font-size: 16px; } .section-example .section-image { right: auto; margin-top: -24px; width: 475px; max-width: none; } .section-example .section-content { padding-top: 40px; padding-bottom: 0; } } /* ------------------------------------------------------------ *\ Section Scenario \* ------------------------------------------------------------ */ .section-scenario { position: relative; padding-bottom: 15px; } .section-scenario:after { content: ''; background: url(../css/images/wave.png) repeat-x 0 0; width: 100%; height: 22px; display: block; position: absolute; bottom: 0; left: 0; } .section-scenario .shell-small { position: relative; } .section-scenario .section-head { text-align: center; padding: 51px 0 43px; } .section-scenario .section-content { position: relative; padding-right: 350px; padding-bottom: 80px; } .section-scenario .section-image { position: absolute; bottom: 0; right: -200px; } .section-scenario .section-title { font-size: 48px; line-height: 1; font-weight: 400; } .section-scenario .section-title strong { color: #f24b4b; } .section-scenario:nth-child(even) { } .section-scenario:nth-child(even) .section-content { text-align: right; padding-left: 380px; padding-right: 0; } .section-scenario:nth-child(even) .section-image { right: auto; bottom: auto; } .section-scenario:nth-child(even) .list-scenario h4 i { left: auto; right: -64px; } .section-scenario1 .section-image { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: -300px; } .section-scenario2 .section-image { right: -350px; bottom: 0; } .section-scenario3 .section-image { left: -20px; top: 0; } .section-scenario4 { overflow: visible; } .section-scenario4:after { z-index: 5; bottom: -13px; background-image: url(../css/images/wave-half.png); } .section-scenario4 .section-image { bottom: 20px; right: -240px; } .section-scenario5:after { display: none; } .section-scenario5 .section-image { bottom: auto; top: -288px; left: -200px; z-index: 2; } .section-scenario5 .section-image-secondary { position: absolute; bottom: -11px; left: -320px; } @media (max-width: 1440px) { .section-scenario1 .section-image { left: -50px; max-width: 42%; } .section-scenario4 .section-image { max-width: 47%; right: -130px; } .section-scenario5 .section-image { max-width: 35%; left: -130px; } .section-scenario5 .section-image-secondary { left: -190px; max-width: 60%; } } @media (max-width: 1279px) { .section-scenario .section-content { padding-left: 20px; } .section-scenario .section-content { padding-left: 40px; } .section-scenario:nth-child(even) .section-content { padding-right: 40px; } .section-scenario4 .section-image { max-width: 44%; right: -50px; } .section-scenario5 .section-image { max-width: 35%; left: -140px; } } @media (max-width: 1023px) { .section-scenario .section-content { padding-left: 60px; } .section-scenario:nth-child(even) .section-content { padding-right: 60px; } .section-scenario .section-head { padding: 20px 0 30px; } .section-scenario .section-image { right: -224px; } .section-scenario1 .section-image { max-width: 61%; } .section-scenario2 .section-image { right: -360px; } .section-scenario4 .section-image { right: -20px; max-width: 53%; } .section-scenario5 .section-image { left: -50px; top: auto; bottom: 150px !important; } .section-scenario5 .section-image-secondary { left: -50px; } } /* Mobile */ @media (max-width: 767px) { .section-scenario { padding-bottom: 0; } .section-scenario .section-image { position: relative; top: auto; left: auto; right: auto; bottom: auto; margin-top: 20px; -webkit-transform: none; -ms-transform: none; transform: none; } .section-scenario .section-content { padding-right: 0; } .section-scenario .section-head { padding-top: 21px; padding-bottom: 19px; } .section-scenario .section-title { font-size: 30px; line-height: 1.1; } .section-scenario .section-title strong { font-size: 38px; } .section-scenario .section-content { padding-left: 45px; } .section-scenario:nth-child(even) .section-content { padding-right: 0px; padding-left: 45px; text-align: left; } .section-scenario .list-scenario h4 i { left: -40px !important; } .section-scenario:nth-child(3) .section-content { padding-bottom: 22px; } .section-scenario:nth-child(4) .section-image { max-width: 200px; text-align: center; } .section-scenario:nth-child(4) .section-content { padding-bottom: 40px; } .section-scenario:nth-child(5) .section-content { padding-bottom: 9px; } .section-scenario1 .section-image { max-width: 100%; } .section-scenario2 .section-image { width: 340px; margin-left: -70px; margin-top: 30px; } .section-scenario2 .section-title strong { font-size: 35px; } .section-scenario3 .section-image { margin-top: 30px; margin-bottom: 8px; } .section-scenario4 .section-image { max-width: none; margin-top: -5px; } .section-scenario5 .section-content { padding-bottom: 0; margin-bottom: -20px; } .section-scenario5 .section-image { width: 100%; max-width: none; margin: -1px auto 0px; z-index: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: auto !important; } .section-scenario5 .section-image img { width: 111%; max-width: none; } .section-scenario5 .section-image-secondary { position: static; } } /* ------------------------------------------------------------ *\ Sectino Tip \* ------------------------------------------------------------ */ .section-tip { padding: 73px 0 0; text-align: center; font-size: 20px; overflow: visible; z-index: 1; font-weight: 400; } .section-tip:before { content: ''; background: url(../css/images/wave-bold.png) repeat-x 0 0; width: 100%; height: 40px; position: absolute; top: -18px; left: 0; } .section-tip:after { content: ''; background: url(../css/images/wave-dark.png) repeat-x 0 0; width: 100%; height: 22px; position: absolute; bottom: -14px; left: 0; } .section-tip .section-title { font-size: 55px; font-weight: 900; letter-spacing: -0.01em; margin-bottom: 32px; } .section-tip .section-body { max-width: 615px; margin: auto; } .section-tip .section-body h3 { font-size: 20px; letter-spacing: -0.01em; margin-bottom: 20px; } .section-tip .section-image { margin-top: 15px; } .section-tip .section-outer { background: #13042b url(../css/images/bg-shapes1.png) repeat 0 0; position: relative; } .section-tip .section-outer:before { content: ''; background: url(../css/images/wave.png) repeat-x 0 0; width: 100%; height: 22px; position: absolute; top: -13px; left: 0; z-index: 2; } .section-tip .section-outer .shell { background: #13042b; } /* Mobile */ @media (max-width: 767px) { .section-tip { font-size: 16px; padding-top: 32px; text-align: left; } .section-tip .section-head { margin-bottom: 18px; } .section-tip .section-title { font-size: 38px; line-height: 1.1; margin-bottom: 0; } .section-tip .section-title span { font-weight: 400; } .section-tip .section-body h3 { font-size: 16px; margin-bottom: 14px; } .section-tip .section-image { margin-top: 10px; } .section-tip .section-outer img { width: 324px; max-width: none; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } /* ------------------------------------------------------------ *\ Section Workshop \* ------------------------------------------------------------ */ .section-workshop { padding-top: 186px; font-size: 20px; } .section-workshop > .shell-small { position: relative; } .section-workshop .shell-small:before { content: ''; background: url(../css/images/thinking-decor1.png) no-repeat 0 0; width: 234px; height: 727px; display: block; position: absolute; right: 100%; bottom: -47px; margin-right: 50px; } .section-workshop .section-title { font-weight: 400; line-height: 1; color: #f24b4b; margin-bottom: 41px; } .section-workshop .section-title strong { color: #13042b; } .section-workshop .section-head { margin-bottom: 25px; } .section-workshop .section-head h3 { font-size: 20px; } .section-workshop .section-content { padding: 0 0 85px; } .section-workshop .section-body { max-width: 100%; padding-right: 425px; } .section-workshop .section-body p:not(:last-child) { margin-bottom: 24px; } .section-workshop .section-image { bottom: 31%; right: 0; margin-right: -241px; } @media (max-width: 1440px) { .section-workshop .shell-small:before, .section-workshop .shell-small:after { display: none; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-workshop .shell-small:before { display: none; } .section-workshop .section-image { margin-right: -85px; max-width: 53%; } .section-workshop .section-body { padding-right: 300px; } } /* Mobile */ @media (max-width: 767px) { .section-workshop { font-size: 16px; padding-top: 26px; } .section-workshop p { margin-bottom: 20px !important; } .section-workshop .section-title { font-size: 38px; text-align: left; font-weight: 600; margin-bottom: 35px; line-height: 0.95; } .section-workshop .section-title span { font-weight: 400; position: relative; display: inline-block; vertical-align: middle; } .section-workshop .section-title span:after { content: ''; background: url(../css/images/wave4.png) no-repeat 0 0; width: 149px; height: 15px; display: inline-block; vertical-align: middle; margin-left: 20px; } .section-workshop .section-head { margin-bottom: 19px; } .section-workshop .section-head h3 { font-size: 16px; } .section-workshop .section-body { padding-right: 0; } .section-workshop .section-image { margin-right: 0px; max-width: none; margin-top: -22px; width: 282px; } .section-workshop .section-content { padding-bottom: 0px; margin-bottom: -35px; } } /* ------------------------------------------------------------ *\ Section How \* ------------------------------------------------------------ */ .section-how { text-align: left; font-size: 21px; } .section-how .section-body { max-width: 580px; } .section-how .section-title { margin-bottom: 40px; } .section-how .section-content { padding: 55px 0 82px; } .section-how .section-image { left: -135px; } @media (max-width: 1440px) { .section-how .section-body { max-width: 100%; padding-left: 430px; } .section-how .section-image { left: 0; max-width: 420px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-how .section-body { max-width: 100%; padding-left: 330px; } .section-how .section-image { left: 0px; max-width: 320px; } } /* Mobile */ @media (max-width: 767px) { .section-how { font-size: 16px; } .section-how p { margin-bottom: 21px !important; } .section-how .section-title { margin-bottom: 31px; font-size: 38px; text-align: left; } .section-how .section-body { padding-left: 0; } .section-how .section-image { left: auto; max-width: 250px; margin-top: 30px; } .section-how .section-content { padding-bottom: 0; padding-top: 30px; } } /* ------------------------------------------------------------ *\ Section Approach \* ------------------------------------------------------------ */ .section-approach { font-size: 21px; } .section-approach .shell-small { position: relative; } .section-approach .shell-small:before { content: ''; background: url(../css/images/book-decor4.png) no-repeat 0 0; width: 310px; height: 90px; display: inline-block; position: absolute; top: 100px; right: 100%; -webkit-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); margin-right: 50px; } .section-approach .shell-small:after { content: ''; background: url(../css/images/contacts-decor2.png) no-repeat 0 0; width: 139px; height: 210px; display: inline-block; position: absolute; top: 50px; left: 100%; margin-left: 100px; } .section-approach .section-head { text-align: center; line-height: 1; padding: 58px 0 40px; } .section-approach .section-body { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 80px; -moz-column-gap: 80px; column-gap: 80px; } .section-approach .section-body p { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } .section-approach .section-title { font-weight: 400; } .section-approach .section-title span { color: #f24b4b; } .section-approach .section-title strong { font-weight: 700; } .section-approach .section-image { text-align: center; position: relative; bottom: -5px; margin-top: -100px; width: 1366px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); margin-left: 170px; } .section-approach .int-list { font-weight: inherit; } @media (max-width: 1440px) { .section-approach .shell-small:before, .section-approach .shell-small:after { display: none; } } @media (max-width: 1279px) { .section-approach .section-image { margin-left: 150px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-approach { font-weight: 400; } .section-approach .section-image { margin-top: -60px; margin-left: 200px; } .section-approach .section-head { padding: 25px 0; } .section-approach .shell-small:before, .section-approach .shell-small:after { display: none; } } /* Mobile */ @media (max-width: 767px) { .section-approach { font-size: 16px; } .section-approach p { margin-bottom: 18px !important; } .section-approach .section-body { -webkit-columns: 1; -moz-columns: 1; columns: 1; } .section-approach .section-image { margin-top: -50px; margin-left: 0; width: 748px; bottom: auto; margin-left: 150px; } } /* ------------------------------------------------------------ *\ Section Tools \* ------------------------------------------------------------ */ .section-tools { background: #13042b; } .section-tools .section-image { left: -30px; } .section-tools .section-head { margin-bottom: 44px; } .section-tools .section-title { line-height: 1; } .section-tools .section-title strong { font-weight: 900; } .section-tools .section-title span { color: #f24b4b; } .section-tools .section-content { padding: 58px 0 86px; } .section-tools .section-body { max-width: 600px; } .section-tools .section-body h4 { color: #f24b4b; font-size: 25px; margin-top: 48px; line-height: 1.25; } .section-tools .section-body h4 strong { display: block; font-size: 31px; } .section-tools .section-image { bottom: auto; top: 10%; } @media (max-width: 1279px) { .section-tools .section-image { left: -30px; } .section-tools .section-image img { max-width: 370px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-tools .section-body { max-width: 100%; padding-left: 300px; } .section-tools .section-image { max-width: 40%; left: -10px; } .section-tools .section-image img { max-width: 300px; } } /* Mobile */ @media (max-width: 767px) { .section-tools { line-height: 1.3; } .section-tools .section-title { font-size: 38px; margin-bottom: 28px; line-height: 1.2; } .section-tools .section-head { margin-bottom: 0; } .section-tools .section-body { padding-left: 0px; } .section-tools .section-body h4 { font-size: 20px; margin-top: -21px; } .section-tools .section-body h4 strong { font-size: 30px; } .section-tools .section-image { max-width: none; width: 360px; margin: 0px auto 0; left: -35px; } .section-tools .section-image img { max-width: none; } .section-tools .section-content { padding-bottom: 1px; padding-top: 31px; } } /* ------------------------------------------------------------ *\ Section Dates \* ------------------------------------------------------------ */ .section-dates { padding: 33px 0; } .section-dates .shell { max-width: 1160px; } .section-dates .section-title { color: #f24b4b; font-weight: 400; margin-left: 60px; } .section-dates .section-head { margin-bottom: 40px; } .section-dates .section-group { border: 3px solid #f24b4b; padding: 57px 60px 52px; position: relative; } .section-dates .section-group ~ .section-group { margin-top: 53px; } .section-dates .section-group:before { content: ''; position: absolute; top: -3px; right: -3px; width: 430px; height: 3px; background: #fff; display: block; } .section-dates .section-group:after { content: ''; position: absolute; top: -3px; right: -3px; width: 3px; height: 150px; background: #fff; display: block; } .section-dates .section-group h5 { font-size: 30px; font-weight: 900; color: #f24b4b; display: inline-block; margin-bottom: 24px; } .section-dates .section-group h5:after { content: ''; background: url(../css/images/style2.png) no-repeat 0 0; background-size: 100% 100%; width: 141px; height: 12px; display: inline-block; margin-left: 20px; } .section-dates .section-group-icon { position: absolute; left: -25px; top: -25px; } .section-dates .section-group-image { position: absolute; right: -59px; top: -40px; z-index: 1; } .section-dates .section-group-image img { position: relative; z-index: 1; } .section-dates .section-group-image:after { content: ''; background: url(../css/images/image-wave.png) no-repeat 0 0; width: 10px; height: 395px; position: absolute; right: 52px; top: 100px; } .section-dates .section-group-title { font-size: 47px; text-transform: uppercase; font-weight: 900; line-height: 1; margin-bottom: 14px; } .section-dates .section-group-title strong { font-weight: 900; display: block; } .section-dates .section-group-title span { color: #f24b4b; } .section-dates .section-group-title small { font-size: 28px; font-weight: 600; text-transform: none; display: inline-block; margin-bottom: 8px; } .section-dates .section-group2 { padding-top: 30px; } .section-dates .section-group2 .section-group-icon { top: -45px; left: -45px; } .section-dates .section-group2 .section-group-image { top: -27px; } .section-dates .section-group3 { padding-top: 30px; } .section-dates .section-group3 .section-group-icon { top: 0px; left: 0px; } .section-dates .section-group3 .section-group-image { top: -25px; } .section-dates .section-entry { padding-right: 40px; font-size: 20px; font-weight: 400; margin-bottom: 46px; letter-spacing: 0; } .section-dates .section-entry p { padding-right: 200px; font-weight: 300; } @media (max-width: 1279px) { .section-dates .section-group { padding-right: 40px; padding-left: 35px; } .section-dates .section-entry { padding-right: 240px; } .section-dates .section-entry p { padding-right: 0; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-dates .section-group { padding-right: 20px; } .section-dates .section-group:before { width: 250px; } .section-dates .section-group3, .section-dates .section-group2 { padding-top: 55px; } .section-dates .section-group-image { right: -20px; } .section-dates .section-group-image:after { right: 13px; top: 130px; } } /* Mobile */ @media (max-width: 767px) { .section-dates { padding-bottom: 15px; } .section-dates .shell { padding: 0 3px; width: 100%; max-width: 338px; } .section-dates .section-title { margin-left: 0; font-size: 38px; } .section-dates .section-group { padding-top: 17px; padding-bottom: 12px; padding-left: 20px; padding-right: 15px; } .section-dates .section-group:before { width: 175px; } .section-dates .section-group:after { height: 42px; } .section-dates .section-group-image { max-width: 120px; right: -4px; top: -50px; } .section-dates .section-group-image:after { display: none; } .section-dates .section-group-icon { left: 0; top: 0; position: relative; margin-bottom: 10px; } .section-dates .section-group2 { padding-top: 70px; } .section-dates .section-group2 .section-group-image { top: -52px; } .section-dates .section-group3 { padding-top: 100px; } .section-dates .section-group3 .section-group-icon { top: 0; left: 0; position: absolute; } .section-dates .section-group3 .section-group-image { top: -50px; } .section-dates .section-group h5 { font-size: 28px; text-align: center; display: block; margin-bottom: 13px; } .section-dates .section-group h5:after { margin-left: 0; display: block; margin: auto; width: 97px; height: 8px; background-size: 100% 100%; } .section-dates .section-group-title { font-size: 28px; letter-spacing: -0.03em; } .section-dates .section-group-title small { font-size: 16px; } .section-dates .section-group ~ .section-group { margin-top: 91px; } .section-dates .section-entry { padding-right: 0; font-size: 16px; margin-bottom: 7px; } .section-dates .section-entry p { font-weight: 400; } } /* ------------------------------------------------------------ *\ Section Join \* ------------------------------------------------------------ */ .section-join { font-size: 21px; font-weight: 700; color: #f24b4b; padding: 35px 0 54px; overflow: visible; } .section-join .section-content { position: relative; max-width: 785px; margin: auto; position: relative; padding-right: 37%; } .section-join .section-content:after { content: ''; background: url(../css/images/figures.png) no-repeat 0 0; width: 159px; height: 255px; position: absolute; top: 100%; right: 100%; margin-right: 70px; margin-top: 13px; } .section-join .section-image { position: absolute; top: -80px; right: 0; margin-right: -72%; } .section-join .section-title { line-height: 1.15; margin-bottom: 35px; } .section-join .section-title span, .section-join .section-title strong { display: inline-block; vertical-align: middle; position: relative; font-weight: 900; } .section-join .section-title strong { color: #13042b; } .section-join .section-title strong:before { content: ''; background: url(../css/images/wave2.png) no-repeat 0 0; width: 127px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 15px; } .section-join .section-title span { color: #f24b4b; margin-left: 27px; } .section-join .section-title span:after { content: ''; background: url(../css/images/wave3.png) no-repeat 0 0; width: 209px; height: 26px; display: inline-block; vertical-align: middle; margin-left: 20px; } .section-join .section-actions { padding-top: 126px; text-align: center; } @media (max-width: 1440px) { .section-join .section-content:after { display: none; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-join .section-image { max-width: 70%; margin-right: -32%; top: -20px; } .section-join .section-actions { padding-top: 70px; } .section-join .section-content:after { display: none; } } /* Mobile */ @media (max-width: 767px) { .section-join { font-size: 16px; padding-top: 0; padding-bottom: 22px; } .section-join .btn { font-size: 21px; border-radius: 10px; padding: 11px 38px; } .section-join .section-content { padding-right: 0; } .section-join .section-image { position: relative; top: auto; margin: 0 auto; width: 550px; max-width: none; margin-top: 5px; } .section-join .section-title { font-size: 38px; margin-bottom: 27px; } .section-join .section-title strong:before { width: 66px; height: 8px; background-size: 100% 100%; } .section-join .section-title span:after { width: 109px; height: 14px; background-size: 100% 100%; } .section-join .section-actions { padding-top: 20px; } } @media ( max-width: 1320px ) and ( min-width: 1281px ) and (-ms-high-contrast: none), (-ms-high-contrast: active) { .section-thinking .section-inner { padding-top: 15px; } .section-thinking .lines { top: -12px; } .section-thinking .lines svg { left: -25px; } .section-success .lines svg { right: 23px; } .section-book .shell { left: -44px; } .section-begin .lines svg { left: -26px; width: 531px; } .section.intro .line { margin-left: -152px; } .section.intro .intro-content { left: -44px; } } @media ( max-width: 1280px ) and (-ms-high-contrast: none), (-ms-high-contrast: active) { .section.intro .line { margin-left: -108px; } .section.intro .intro-title .lines { margin-left: -104px; } .section-begin .lines svg { left: 20px; } .section-begin .lines svg polyline { stroke-width: 7px; } .section-problem .lines svg { left: 38px; } .section-thinking .lines svg { height: 714px; left: 5px; } .section-thinking .section-inner { padding-top: 0; } .section-success .lines svg { right: 6px; } .section-book .shell { left: -27px; } } @media ( max-width: 1279px ) and (-ms-high-contrast: none), (-ms-high-contrast: active) { .section .lines, .section.intro .line { display: none; } } /* ------------------------------------------------------------ *\ Socials \* ------------------------------------------------------------ */ .socials { color: #000; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-right: 7px; } .socials.cloned { display: none; } .socials span { font-size: 19px; font-weight: 700; } .socials ul { list-style: none; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-left: 66px; } .socials .underwave { content: ''; background: url(../css/images/social-wave.png) no-repeat 0 0; width: 388px; height: 26px; display: inline-block; vertical-align: middle; margin-right: 15px; position: absolute; bottom: 60px; right: 68px; } .socials li ~ li { margin-left: 50px; } .socials a { transition: opacity .3s; } .socials a:hover { opacity: .6; } .callus { color: #000; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-right: 7px; } .callus.cloned { display: none; } .callus span { font-size: 19px; font-weight: 700; } .callus ul { list-style: none; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-left: 66px; } .callus li ~ li { margin-left: 50px; } .callus a { transition: opacity .3s; } .callus a:hover { opacity: .6; } @media (max-width: 1320px) { .socials .underwave { content: ''; background: url(../css/images/social-wave.png) no-repeat 0 0; width: 388px; height: 26px; display: inline-block; vertical-align: middle; margin-right: 15px; position: absolute; bottom: 60px; right: 37px; } } @media (max-width: 1279px) { .socials .underwave { content: ''; background: url(../css/images/social-wave.png) no-repeat 0 0; width: 388px; height: 26px; display: inline-block; vertical-align: middle; margin-right: 15px; position: absolute; bottom: 60px; right: -36px; } } @media (max-width: 1023px) { .socials .underwave { content: ''; background: url(../css/images/social-wave.png) no-repeat 0 0; width: 388px; height: 26px; display: inline-block; vertical-align: middle; margin-right: 15px; position: absolute; bottom: 178px; right: -36px; } } @media (max-width: 767px) { .socials .underwave { content: ''; background: url(../css/images/social-wave.png) no-repeat 0 0; width: 388px; height: 26px; display: inline-block; vertical-align: middle; margin-right: 15px; position: absolute; top: 409px; right: 150px; } } @media (max-width: 767px) { /* .socials { display: block; } */ .socials ul { margin-left: 0; justify-content: center; } /* .socials span { font-size: 20px; display: block; margin-bottom: 10px; } */ .socials.cloned { display: block; width: 100%; text-align: center; margin-top: auto; position: relative; } .socials.cloned:before { content: ''; background: url(../css/images/socials-mobile-decor.png) no-repeat 0 0; width: 84px; height: 8px; position: absolute; top: -33px; right: -12px; } .socials.cloned ul { justify-content: center; } .socials.cloned ul a:after { display: none; } .socials.cloned span { display: none; } .socials.cloned .underwave { display: none; } .socials.cloned .ico-linkedin { width: 32px; height: 30px; } .socials.cloned .ico-twitter { width: 38px; height: 30px; } .socials.cloned .ico-facebook { width: 16px; height: 30px; } .socials { font-size: 20px; text-align: center; display: block; margin-top: 20px; font-weight: 700; margin-bottom: 40px; margin-top: 70px; } .socials span { font-size: 20px; text-align: center; display: block; margin-top: 20px; font-weight: 700; } .callus { font-size: 20px; text-align: center; display: block; margin-top: 20px; font-weight: 700; margin-bottom: 40px; } .callus span { font-size: 20px; text-align: center; display: block; margin-top: 20px; font-weight: 700; } } /* ------------------------------------------------------------ *\ Recaptcha \* ------------------------------------------------------------ */ .grecaptcha-badge { display: none; }