/* Table of Contents 01. Settings ---------------------------------- 02. Sprite ------------------------------------ 03. Generic ----------------------------------- 04. Base -------------------------------------- 05. Fonts ------------------------------------- 06. Helpers ----------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- Grid ------------------------------------- Responsive Helpers ----------------------- 07. Reset ------------------------------------- 08. Regions ----------------------------------- 09. Container --------------------------------- 10. Content ----------------------------------- 11. Footer ------------------------------------ 12. Header ------------------------------------ Header Fixed ----------------------------- 13. Header Alt -------------------------------- 14. Main -------------------------------------- 15. Shell ------------------------------------- 16. Sidebar ----------------------------------- 17. Wrapper ----------------------------------- 18. Modules ----------------------------------- 19. Accordions -------------------------------- 20. Accordion --------------------------------- 21. Accordion Alt ----------------------------- 22. Fade In ----------------------------------- 23. Article Alt ------------------------------- Article Alt Primary ---------------------- Is Mozimma ------------------------------- Article Alt Secondary -------------------- Article Alt Primary ---------------------- Article Alt Primary ---------------------- 24. Articles ---------------------------------- Articles Primary ------------------------- Articles Primary Alt --------------------- Articles Primary Def --------------------- Articles Secondary ----------------------- Articles Teritary ------------------------ Articles Primary Alt --------------------- Articles Teritary ------------------------ Articles Primary ------------------------- Articles Primary Alt --------------------- Articles Primary Def --------------------- 25. Article ----------------------------------- Article Primary -------------------------- Article Primary Alt ---------------------- Article Primary Def ---------------------- Article Secondary ------------------------ Article Primary -------------------------- Article Primary Alt ---------------------- Article Primary Def ---------------------- Articles Secondary Alt ------------------- 26. Article History --------------------------- Article History Reversed ----------------- 27. Bar Rating -------------------------------- 28. Bar Points -------------------------------- 29. Breadcrumps ------------------------------- 30. Button ------------------------------------ Button Disabled -------------------------- Button Def ------------------------------- Button Disabled -------------------------- 31. Button Circle ----------------------------- 32. Button Alt -------------------------------- 33. Button Big -------------------------------- 34. Button Burger ----------------------------- 35. Button Fav -------------------------------- 36. Component --------------------------------- 37. Detail ------------------------------------ 38. Features ---------------------------------- Mobile ----------------------------------- 39. Feature ----------------------------------- 40. Feature Alt ------------------------------- 41. Feature Def ------------------------------- Feature Def Priamry ---------------------- Feature Def Secondary -------------------- Feature Def Teritary --------------------- Feature Def Size0 ------------------------ Feature Def Size1 ------------------------ Feature Def Size2 ------------------------ Feature Def Quaternary ------------------- Feature Def Senary ----------------------- Feature Def Septenary -------------------- Feature Def Secondary -------------------- Feature Def Quaternary ------------------- Feature Def Teritary --------------------- Feature Def Size2 ------------------------ Feature Def Senary ----------------------- Feature Def Quaternary ------------------- Feature Def Septenary -------------------- 42. Form Elements ----------------------------- Field ------------------------------------ Select ----------------------------------- Checkbox --------------------------------- Checkbox Primary ------------------------- Checkbox Secondary ----------------------- Checkbox Teritary ------------------------ Checkbox Quaternary ---------------------- Checkbox Def ----------------------------- Checkbox Def ----------------------------- Radio ------------------------------------ Radio Primary ---------------------------- Radio Secondary -------------------------- Radio Secondary Alt ---------------------- Radio Teritary --------------------------- Radio Primary ---------------------------- Radio Secondary -------------------------- Radio Secondary -------------------------- Form Upload ------------------------------ 43. Form Contact ------------------------------ Form Contact Small ----------------------- Form Contact Small ----------------------- Form Contact Small ----------------------- 44. Form -------------------------------------- Form Primary ----------------------------- Form Primary ----------------------------- Form Mail -------------------------------- Form Secondary --------------------------- Form Alt --------------------------------- Form Alt Primary ------------------------- Form Alt Secondary ----------------------- Form Alt Teritary ------------------------ Form Teritary ---------------------------- Form teritary ---------------------------- Form Secondary --------------------------- Form Alt --------------------------------- Form Primary ----------------------------- Form Alt Teritary ------------------------ Form Mail -------------------------------- Form Secondary --------------------------- Form Alt --------------------------------- Form Teritary ---------------------------- Form Alt Alt ----------------------------- 45. Form Code --------------------------------- 46. Form ALt ---------------------------------- 47. Form Def ---------------------------------- Form Def Primary ------------------------- Form Def Primary ------------------------- 48. Number Fields ----------------------------- 49. Gadget ------------------------------------ 50. Gadget Primary ---------------------------- 51. Icons ------------------------------------- 52. Ico X ------------------------------------- 53. Ico Plus ---------------------------------- Ico Plus Alt ----------------------------- Ico Plus Alt ----------------------------- 54. Ico Circle -------------------------------- 55. Intro Alt --------------------------------- Intro Alt Pink --------------------------- Intro Alt White -------------------------- Intro Alt Small -------------------------- Intro Alt Size1 -------------------------- Intro Alt White -------------------------- Intro Alt White Def ---------------------- Intro Alt Size1 -------------------------- Intro Alt Small -------------------------- 56. Link -------------------------------------- 57. Link ALt ---------------------------------- 58. Link Secondary ---------------------------- 59. List -------------------------------------- 60. LIst Features ----------------------------- List Features Primary -------------------- 61. List Features Primary --------------------- 62. List Contacts ----------------------------- 63. List Steps -------------------------------- 64. List Infos -------------------------------- 65. List stars -------------------------------- 66. List Checkboxes --------------------------- 67. List Actions ------------------------------ 68. List Services ----------------------------- 69. List Radios ------------------------------- 70. List Radios Primary ----------------------- 71. List Radios Secondary --------------------- List Radios Secondary Alt ---------------- 72. List Prices ------------------------------- 73. List Total -------------------------------- 74. List Details ------------------------------ 75. List Links -------------------------------- 76. List Actions ------------------------------ 77. List Adresses ----------------------------- 78. List Payments ----------------------------- 79. List Engagements -------------------------- 80. List Motto -------------------------------- 81. Logo -------------------------------------- 82. Nav --------------------------------------- 83. Nav Secondary ----------------------------- Nav Secondary Alt ------------------------ Nav Secondary Alt ------------------------ 84. Nav Teritary ------------------------------ 85. Popup Alt --------------------------------- 86. Popup ------------------------------------- Popup Size1 ------------------------------ Popup Text ------------------------------- Popup Primary ---------------------------- Popup Secondary -------------------------- Popup Size1 ------------------------------ 87. Products ---------------------------------- Products Secondary ----------------------- Products Secondary ----------------------- 88. Product ----------------------------------- Product Primary -------------------------- Product Primary Alt ---------------------- Product Checkbox ------------------------- Product Secondary ------------------------ Tablet Portrait -------------------------- Product Secondary ------------------------ Product Primary -------------------------- Product Primary Alt ---------------------- Product Checkbox ------------------------- Product Secondary ------------------------ 89. Product Alt ------------------------------- 90. Products Primary -------------------------- 91. Product Primary --------------------------- 92. Products Secondary ------------------------ 93. Product Secondary ------------------------- Product Secondary Alt -------------------- Product Secondary Def -------------------- Product Secondary Single ----------------- Product Secondary Big -------------------- Product Secondary Order ------------------ Product Secondary Big -------------------- Product Secondary Single ----------------- Product Secondary Big -------------------- Product Secondary Alt -------------------- Product Secondary Def -------------------- Product Secondary Big -------------------- Product Secondary Order ------------------ 94. Products Small ---------------------------- Products Small --------------------------- 95. Product Small ----------------------------- Product Small Primary -------------------- Product Small Secondary ------------------ Product Small Teritary ------------------- Product Small Teritary ------------------- Product Small Teritary ------------------- 96. Search ------------------------------------ 97. Section ----------------------------------- Section Gray ----------------------------- Section Primary -------------------------- Section Secondary ------------------------ Section Teritary ------------------------- Section Quaternary ----------------------- Section Articles ------------------------- Section Senary --------------------------- Section Septenary ------------------------ Section Size1 ---------------------------- Section Size2 ---------------------------- Section Size3 ---------------------------- Section Size4 ---------------------------- Section Size5 ---------------------------- Section Primary -------------------------- Section Secondary ------------------------ Section Teritary ------------------------- Section Quaternary ----------------------- Section Articles ------------------------- Section Senary --------------------------- Section Size1 ---------------------------- Section Size2 ---------------------------- Section Size3 ---------------------------- Section Size4 ---------------------------- Section Septenary ------------------------ Section Size5 ---------------------------- 98. Section Product --------------------------- 99. Section Alt ------------------------------- Section Alt Primary ---------------------- Section Alt Primary ---------------------- 100. Section Card ----------------------------- 101. Section Primary -------------------------- 102. Section Contact -------------------------- Section Contact Primary ------------------ 103. Section Secondary ------------------------ 104. Section Def ------------------------------ 105. Section Main ----------------------------- Section Main Size1 ----------------------- Section Main Size2 ----------------------- Section Main Size3 ----------------------- Section Main Size4 ----------------------- Section Main Size5 ----------------------- Section Main Size6 ----------------------- 106. Section Engagements ---------------------- 107. Section Motto ---------------------------- 108. Section History -------------------------- 109. Section Slider --------------------------- 110. Section Octonary ------------------------- Section Octonary Alt --------------------- Section Octonary Small ------------------- 111. Section Default -------------------------- 112. Services --------------------------------- Services Gray ---------------------------- 113. Service ---------------------------------- 114. Slick ------------------------------------ 115. Slider Main ------------------------------ 116. Slider Products -------------------------- Slider Products Primary ------------------ Slider Products Secondary ---------------- Slider Products Teritary ----------------- Slider Products Quaternary --------------- Slider Products Primary ------------------ Slider Products Secondary ---------------- Slider Products Quaternary --------------- 117. Slider ----------------------------------- Slider Product --------------------------- Slider Primary --------------------------- Slider Product --------------------------- Slider Primary --------------------------- 118. Slider Tablet ---------------------------- 119. Slider Mobile ---------------------------- 120. Slider History --------------------------- Slick Styles ----------------------------- 121. Socials ---------------------------------- 122. Stat ------------------------------------- 123. Tabs ------------------------------------- 124. Tab -------------------------------------- 125. Table ------------------------------------ 126. Table Alt -------------------------------- Table Alt Size1 -------------------------- Table Alt Size1 -------------------------- 127. Widget ----------------------------------- 128. Widget ----------------------------------- Widget Cart ------------------------------ Widget Contact --------------------------- Widget Contact --------------------------- 129. Widget Info ------------------------------ 130. Widgets Primary Alt ---------------------- 131. Widget Primary --------------------------- 132. Widget cart ------------------------------ Widget Cart Empty ------------------------ Widget Cart Alt -------------------------- Widget Cart Alt -------------------------- 133. Widget Big ------------------------------- 134. Widget Primary --------------------------- 135. Widgets Dropdown ------------------------- 136. Widget Dropdown -------------------------- 137. Widget Secondary ------------------------- Widget Secondary Size1 ------------------- Widget Secondary Size2 ------------------- Widget Secondary Size3 ------------------- 138. Widgets Teritary ------------------------- 139. Widget Teritary -------------------------- Widget Teritary Alt ---------------------- Widget Teritary Alt ---------------------- 140. Widget Orders ---------------------------- 141. Widget Callout --------------------------- 142. Widget Quaternary ------------------------ Widget Quaternary Alt -------------------- Widget Quaternary Alt -------------------- Widget Quaternary Alt -------------------- 143. Themes ----------------------------------- */ /* ------------------------------------------------------------ *\ Settings \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Sprite \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Generic \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ body { min-width: 320px; background: #fff; font-family: Akzidenz Grotesk BQ, Helvetica, sans-serif; font-size: 16px; line-height: 1.25; color: #262A39; } body.no-scroll { overflow: hidden; } @media (max-width: 767px) { body.no-scroll { overflow: hidden; } } a { color: inherit; text-decoration: underline; } a:hover, a[href^="tel"] { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.625em; } h2 { font-size: 22px; font-weight: 700; } h3 { font-size: 12px; font-weight: 700; } h4 { font-size: 10px; font-weight: 500; } @media (max-width: 767px) { h2 { font-size: 18px; } h3 { font-size: 12px; font-weight: 700; } h4 { font-size: 10px; font-weight: 500; } } p, ul, ol, dl, hr, 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; } .body--gray { background-color: #e6ecf0; } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ @font-face { font-family: 'Akzidenz Grotesk BQ'; src: url('../fonts/Akzidenz-Grotesk-BQ-Bold_2810.woff') format('woff'), url('../fonts/Akzidenz-Grotesk-BQ-Bold_2810.svg') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Akzidenz Grotesk BQ'; src: url('../fonts/Akzidenz-Grotesk-BQ-Light_2831.woff') format('woff'), url('../fonts/Akzidenz-Grotesk-BQ-Light_2831.svg') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Akzidenz Grotesk BQ'; src: url('../fonts/Akzidenz-Grotesk-BQ-Medium_2839.woff') format('woff'), url('../fonts/Akzidenz-Grotesk-BQ-Medium_2839.svg') format('svg'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Akzidenz Grotesk BQ'; src: url('../fonts/Akzidenz-Grotesk-BQ-Regular_2840.woff') format('woff'), url('../fonts/Akzidenz-Grotesk-BQ-Regular_2840.svg') format('svg'); font-weight: 400; font-style: normal; } /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* Clear */ .clear:after { content: ''; display: block; clear: both; } /* Notext */ .notext { overflow: hidden; text-indent: 101%; white-space: nowrap; } /* Hidden */ [hidden], .hidden { display: none !important; } /* Alignleft */ .alignleft { float: left; } /* Alignright */ .alignright { float: right; } /* Disabled */ [disabled], .disabled { cursor: default; } /* Grid */ .cols { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .cols--secondary { margin: 0 -10px; } .cols--secondary .col { padding: 0 10px; } .cols--teritary { margin: 0 -6px; } .cols--teritary .col { padding: 0 6px; } .col { max-width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1; flex: 1 1; } .col--1of2 { max-width: 50%; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; } .col--1of3 { max-width: 33.33%; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; } .col--2of3 { max-width: 66.67%; -webkit-box-flex: 0; -ms-flex: 0 0 66.67%; flex: 0 0 66.67%; } .col--size1 { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col--size2 { -webkit-box-flex: 0; -ms-flex: 0 0 58.6%; flex: 0 0 58.6%; max-width: 58.6%; } .col--size3 { -webkit-box-flex: 0; -ms-flex: 0 0 41.4%; flex: 0 0 41.4%; max-width: 41.4%; } /* 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: 1199px) { .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: 1200px) { .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; } } .visible-mobile { display: none !important; } .visible-mobile-inline { display: none !important; } @media (max-width: 767px) { .visible-mobile { display: block !important; } .visible-mobile-inline { display: inline-block !important; } .hidden-mobile { display: none !important; } } .selectric { border: none; border-bottom: 2px solid #D8D8D8; background: none; } .selectric .label { background: none; border: none; margin: 0; text-align: right; color: #0092C7; font-weight: 500; font-size: 16px; height: auto; line-height: 1; padding: 0 25px 6px 0; } .selectric .button { display: none; } .selectric-items { background: #fff; width: 136px; padding: 4px; } .selectric-items li { padding: 0 5px; font-size: 14px; position: relative; text-align: right; } .selectric-items li:after { content: ''; position: absolute; top: 50%; left: 4px; -webkit-transform: translateY(-50%) rotate(-45deg); -ms-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); width: 8px; height: 5px; border-bottom: 2px solid #0092C7; border-left: 2px solid #0092C7; margin-top: -1px; opacity: 0; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .selectric-items li:hover { background: #e6f1fe !important; } .selectric-items li + li { margin: 5px 0 0; } .selectric-items .selected { background: #e6f1fe !important; } .selectric-items .selected:after { opacity: 1; } .selectric-items .highlighted { background: #e6f1fe !important; } .selectric .label { background: none; border: none; margin: 0; text-align: center; padding: 0; color: #0092C7; font-weight: 500; font-size: 16px; height: auto; line-height: 1; padding-bottom: 6px; } /* ------------------------------------------------------------ *\ Reset \* ------------------------------------------------------------ */ * { padding: 0; margin: 0; outline: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; } template { display: none; } html { -webkit-tap-highlight-color: rgba(0,0,0,0); 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; -moz-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; 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; } /* ------------------------------------------------------------ *\ Regions \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Content \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { background: #E9F5FA; padding: 34px 0; } .footer .col + .col { position: relative; padding-left: 40px; } .footer .col + .col:after { content: ''; position: absolute; top: -20px; bottom: -36px; left: 0; width: 1px; background: #b8c5ce; } .footer .footer__title { font-size: 14px; font-weight: 500; text-transform: uppercase; color: #5F87A0; position: absolute; top: 20px; right: 50%; margin-right: -520px; } .footer .footer__ico { position: absolute; top: -52px; right: 50%; margin-right: -547px; } .footer .footer__nav { font-size: 10px; line-height: 1.7; color: #6A92AA; text-transform: uppercase; } .footer .footer__nav a { text-decoration: none; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .footer .footer__nav a:hover { color: #4bc6f3; } .footer .footer__nav ul { margin: 0; } .footer .footer__nav ul + ul { margin: 18px 0 0; } .footer .footer__nav-secondary { font-size: 7px; font-weight: 700; text-transform: uppercase; position: relative; } .footer .footer__nav-secondary a { text-decoration: none; color: #5F87A0; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; font-size: 9px; } .footer .footer__nav-secondary a:hover { color: #4bc6f3; } .footer .footer__nav-secondary ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .footer .footer__nav-secondary li + li { margin-left: 28px; } .footer .footer__body { border-top: 1px solid #b8c5ce; position: relative; padding: 76px 0 88px; } .footer .footer__bar { border-top: 1px solid #b8c5ce; color: #5F87A0; padding: 24px 0 0; } .footer .footer__bar p { font-size: 11px; margin: 0; color: #5F87A0; } .footer .footer__bar .shell { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer .footer__bar .footer__link { font-size: 8px; font-weight: 500; text-transform: uppercase; color: #5F87A0; text-decoration: none; } .footer .footer__bar .footer__link i { vertical-align: middle; margin-left: 5px; } .footer--white { background: #fff; } @media (max-width: 1199px) { .footer .footer__title { margin-right: -420px; } .footer .footer__ico { margin-right: -447px; } } @media (max-width: 1023px) { .footer .footer__title { margin-right: -320px; } .footer .footer__ico { margin-right: -347px; } } @media (max-width: 767px) { .footer { padding: 46px 0; } .footer .footer__ico { margin-right: 0; left: auto; right: 18px; } .footer .footer__title { margin-right: 0; left: auto; right: 47px; top: 8px; font-size: 9px; } .footer .footer__body { padding: 42px 0 0; } .footer .footer__bar { border-top: none; padding: 32px 0 0; } .footer .footer__bar p { font-size: 12px; } .footer .footer__bar .footer__link { font-size: 10px; font-weight: 500; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer .footer__bar .footer__link i { margin: 0 5px 0 0; } .footer .footer__bar .shell { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer .footer__bar .footer__nav-secondary { left: 0; margin: 25px 0 0; -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; font-weight: 500; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; font-size: 10px; line-height: 1.6; } .footer .footer__nav-secondary { text-align: center; } .footer .footer__nav-secondary ul { display: block; margin: 0 -10px; } .footer .footer__nav-secondary ul li { position: relative; display: inline-block; } .footer .footer__nav-secondary ul li:after { content: ''; position: absolute; top: 50%; left: 0; width: 9px; height: 1px; background: #759cb3; } .footer .footer__nav-secondary ul li + li { margin-left: 0; padding-left: 12px; } .footer .cols { display: block; margin: 0 -10px; } .footer .col { max-width: 100%; } .footer .col + .col { padding: 0; } .footer .col + .col:after { display: none; } .footer .footer__nav ul + ul { margin: 0; } } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { background: #fff; position: absolute; top: 0; left: 0; width: 100%; z-index: 100; -webkit-transition: background .4s, -webkit-box-shadow .4s; -o-transition: background .4s, box-shadow .4s; transition: background .4s, box-shadow .4s, -webkit-box-shadow .4s; } .header .header__bar { border-bottom: 2px solid #dfe6ec; -webkit-transition: opacity .4s, visibility .4s; -o-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; } .header .header__body { padding: 31px 0; } .header .header__body .nav { position: relative; left: 48px; -webkit-transition: top .4s; -o-transition: top .4s; transition: top .4s; top: 0; } .header .header__body .shell { position: relative; } .header .header__body .logo { height: 50px; width: 140px; position: absolute; top: 17px; left: 10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: -4px; z-index: 100; } .header .header__body .header__aside { position: absolute; top: -5px; right: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition: top .4s, right .4s; -o-transition: top .4s, right .4s; transition: top .4s, right .4s; } .header .header__body .search { position: relative; top: -5px; } .header .header__body-foot { display: none; } .header .dropdown-btn { position: absolute; top: -33px; right: 10px; opacity: 0; visibility: hidden; } /* Header Fixed */ .header.fixed { -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1) } @media (min-width: 1420px) { .header .shell { max-width: 1550px; } .header .shell.shell--size9 { max-width: 960px; } } @media (max-width: 1199px) { .header .header__body .logo { left: 15px; } .header .header__body .header__aside { right: 15px; } } @media (max-width: 1023px) { .header .header__body .nav { left: 0; } .header .header__body .header__aside { top: -3px; } } @media (max-width: 767px) { .header .header__bar { padding: 11px 0 0; text-align: center; } .header .header__bar .shell { padding: 0; } .header .search .search__field { border-bottom: 1px solid #6A92AA; font-size: 13px; } .header .header__aside .search { position: absolute; top: 100%; left: 0; width: 100%; opacity: 0; visibility: hidden; -webkit-transition: opacity .3s, visibility .3s; -o-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } /*.header .header__aside .search { opacity: 1; visibility: visible; }*/ .header .header__body { padding: 12px 0; } .header .header__body .logo { position: relative; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); top: 0; left: 0; margin: 0 0 0 55px; -webkit-transition: margin-left .4s; -o-transition: margin-left .4s; transition: margin-left .4s; } .header .header__body .btn-burger { position: absolute; top: 50%; left: 19px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: -2px; } .header .header__body .header__aside { right: 24px; top: 10px; } .header .header__body-inner { position: absolute; top: 55px; left: 0; width: 100%; height: calc(100vh - 55px); background: #81A1B5; z-index: 100; padding: 27px 10px 120px; overflow-y: auto; opacity: 0; visibility: hidden; -webkit-transition: opacity .4s, visibility .4s; -o-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; } .header .header__body-foot { display: block; margin: 72px 10px 42px; color: #fff; text-align: center; } .header .header__body-foot a { text-decoration: none; } .header .header__body-foot p { font-size: 15px; font-weight: 700; margin-bottom: 9px; text-transform: uppercase; } .header .header__body-foot .btn { width: 100%; font-size: 11px; padding: 12px 10px; } .header.search-visible .header__aside .search { opacity: 1; visibility: visible; } } /* ------------------------------------------------------------ *\ Header Alt \* ------------------------------------------------------------ */ .header-alt { text-align: center; padding: 33px 0 16px; border-bottom: 2px solid #d8e1e8; } .header-alt .shell { position: relative; } .header-alt .header__link { position: absolute; top: 50%; left: 12px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-decoration: none; font-size: 12px; font-weight: 500; color: #000; margin-top: -4px; } .header-alt .header__link i { margin-right: 7px; vertical-align: middle; } @media (max-width: 767px) { .header-alt { padding: 16px 0 6px; } .header-alt .header__link { font-size: 0; left: 8px; } .header-alt .header__link i { margin: 0; } } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: 1500px; padding-left: 10px; padding-right: 10px; margin: auto; } @media (max-width: 1420px) { .shell { max-width: 1122px; } } .shell--size1 { max-width: 1010px; } .shell--size2 { max-width: 866px; } .shell--size3 { max-width: 773px; } .shell--size4 { max-width: 1050px; } .shell--size5 { max-width: 800px; } .shell--size6 { max-width: 795px; } .shell--size7 { max-width: 1050px; } .shell--size8 { max-width: 855px; } .shell--size9 { max-width: 960px; } .shell--size10 { max-width: 906px; } .shell--size11 { max-width: 1140px; } .shell--size12 { max-width: 920px; } .shell--size13 { max-width: 1170px; } .shell--size14 { max-width: 820px; } .shell--size15 { max-width: 1120px; } .shell--size16 { max-width: 905px; } .shell--size17 { max-width: 940px; } .shell--size18 { max-width: 997px; } /*.shell--size19 { max-width: 1168px; }*/ .shell--size19 { max-width: 1192px; } .shell--size20 { max-width: 880px; } .shell--fluid { max-width: none; } .shell-height { min-height: 300px;} @media (max-width: 1199px) { .shell { padding: 0 15px; } } @media (max-width: 767px) { .shell { padding: 0 10px; } } /* ------------------------------------------------------------ *\ Sidebar \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { min-height: 100vh; overflow: hidden; padding-top: 108px; } .wrapper--primary { padding-top: 0 !important; } @media (max-width: 1023px) { .wrapper { padding-top: 104px; } } @media(min-width: 767px){ .wrapper.active .header { background: #81a2b5; } .wrapper.active .header .logo { width: 140px; height: 50px; margin-top: 10px; } .wrapper.active .header .alt { opacity: 0; visibility: hidden; } .wrapper.active .header .header__bar { opacity: 0; visibility: hidden; } .wrapper.active .header .header__aside { top: 9px; right: -8px; } .wrapper.active .header .search { width: 66px; } .wrapper.active .header .search .search__field { color: #262A39; font-size: 12px; } .wrapper.active .header .ico-search { background-image: url(../images/icons/ico-search-dark.svg); width: 18px; height: 18px; } .wrapper.active .header .dropdown-btn { opacity: 1; visibility: visible; } .wrapper.active .nav { font-size: 12px; top: 10px; } .wrapper.active .nav .active a { color: #262A39; } .wrapper.active .nav .current > a { color: #fff; } } @media (max-width: 767px) { .wrapper { padding-top: 99px; } .wrapper.visible-nav { padding-top: 104px; } .wrapper.visible-nav .header .header__aside, .wrapper.visible-nav .header .header__bar { opacity: 0; visibility: hidden; } .wrapper.visible-nav .header { background: #81a2b5; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; } .wrapper.visible-nav .header .logo { width: 120px; height: 43px; margin-left: 90px; } .wrapper.visible-nav .header .header__body-inner { opacity: 1; visibility: visible; } .wrapper.hide-els > *:not(.popup) { opacity: 0; } } /* ------------------------------------------------------------ *\ Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Accordions \* ------------------------------------------------------------ */ .accordions { background: #0092c7; border-radius: 2px; color: #fff; } .accordions .accordions__entry { padding: 40px 32px 24px; font-size: 14px; line-height: 1.29; } .accordions .accordions__entry h2 { border-bottom: 2px solid #fff; font-size: 16px; padding-bottom: 5px; margin-bottom: 16px; } .accordions .accordions__entry p { font-weight: 500; margin: 0; } .accordions .accordions__entry .accordions__hint { text-align: right; font-size: 12px; line-height: 1.33; margin: 20px 0 0; font-weight: 400; } .accordions .accordions__body { border-top: 2px solid #fff; padding: 27px 30px 19px; } @media (max-width: 767px) { .accordions .accordions__entry { padding: 40px 19px 27px; } .accordions .accordions__entry .accordions__hint { margin: 30px 0 0; } .accordions .accordions__body { padding: 27px 24px 22px; } } /* ------------------------------------------------------------ *\ Accordion \* ------------------------------------------------------------ */ .accordion .accordion__head { position: relative; } .accordion .accordion__head h2 { font-size: 16px; margin: 0; } .accordion .accordion__btn { position: absolute; top: -2px; right: 14px; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; -o-transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .accordion .accordion__body { margin: 14px 0 0; font-size: 12px; line-height: 1.33; text-transform: uppercase; display: none; } .accordion.active .accordion__btn { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .accordion.active .accordion__btn .ico-plus:before { -webkit-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } @media (max-width: 767px) { .accordion .accordion__btn { right: 0; } } /* ------------------------------------------------------------ *\ Accordion Alt \* ------------------------------------------------------------ */ .accordion-alt { border: 1px solid #E6E6E6; margin-top: 10px; background: #f9f9f9; min-height: 82px; } .accordion-alt .accordion__head { color: #b9babe; padding: 32px 19px 0; } .accordion-alt .accordion__head h3 { font-size: 15px; text-transform: uppercase; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .accordion-alt .accordion__head h3 a { text-decoration: none; pointer-events: none } .accordion-alt .accordion__body { padding: 28px 20px 20px; display: none; } .accordion-alt .accordion__body > h3 { margin: 22px 0 0; font-size: 15px; } .accordion-alt .accordion__body .list-radios-secondary { margin: 28px 0 0; } .accordion-alt .accordion__body .widget-secondary + .form { margin-top: 41px; } .accordion-alt .accordion__body--primary { padding: 28px 20px 37px; } .accordion-alt .accordion__body--secondary { padding: 11px 20px 34px; } .accordion-alt + .accordion-alt { margin-top: 9px; } .accordion-alt.active { background: #fff; } .accordion-alt.active .accordion__head { color: #262A39; } .accordion-alt.active .accordion__body { display: block; } @media (max-width: 767px) { .accordion-alt { min-height: 55px; } .accordion-alt .accordion__head { padding: 19px 10px 0; } .accordion-alt .accordion__body { padding: 19px 8px 25px; } .accordion-alt .accordion__body--size1 { padding: 37px 6px 9px; } .accordion-alt .accordion__body--size2 { padding: 27px 18px 9px; } .accordion-alt .accordion__body--primary { padding: 27px 18px 9px; } } /* ------------------------------------------------------------ *\ Fade In \* ------------------------------------------------------------ */ .animate-fadein { -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); opacity: 0; -webkit-transition: opacity 1.5s, -webkit-transform 1.5s; -o-transition: opacity 1.5s, transform 1.5s; transition: opacity 1.5s, transform 1.5s, -webkit-transform 1.5s; } .animate-fadein.animated { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } /* ------------------------------------------------------------ *\ Article Alt \* ------------------------------------------------------------ */ .article-alt { max-width: 704px; margin: 62px auto 0; position: relative; left: -73px; } .article-alt > a { display: block; height: 100%; text-decoration: none; color: inherit; } .article-alt .article__image-holder { overflow: hidden; } .article-alt .article__image { padding-top: 55%; background-size: cover; position: relative; -webkit-transition: .6s; -o-transition: .6s; transition: .6s; } .article-alt .article__image img { position: absolute; top: 20px; left: 20px; } .article-alt .article__body { position: absolute; top: 89px; left: 464px; width: 480px; } .article-alt .article__body h2 { font-size: 17px; font-weight: 500; text-transform: uppercase; margin-bottom: 17px; } .article-alt .article__body h2 span { background: #fff; padding: 4px; } .article-alt .article__body p { font-size: 26px; text-transform: uppercase; line-height: 1.58; color: #fff; margin-bottom: 52px; position: relative; left: 12px; } .article-alt .article__body p strong { background: #0092C7; -webkit-box-shadow: 0 0 0 10px #0092C7; box-shadow: 0 0 0 10px #0092C7; font-weight: 400; } .article-alt .article__body p span { position: relative; left: 6px; } .article-alt .article__body .link { display: block; text-align: right; margin-right: 43px; padding-right: 50px; padding-bottom: 14px; } .article-alt .article__body .link:after { content: ''; position: absolute; bottom: 0; left: 50px; right: 10px; height: 2px; background: #0092C7; } .article-alt .article__body--primary { left: 385px; width: 525px; } .article-alt .article__body--primary .link { padding-right: 18px; margin-left: 43px; } .article-alt .article__body-alt { width: 352px; background: #fff; color: #262A39; position: absolute; top: 105px; right: 57px; text-align: center; padding: 32px 28px 40px; font-size: 14px; line-height: 1.2; -webkit-box-shadow: 0 2px 34px 0 #D7E1E7; box-shadow: 0 2px 34px 0 #D7E1E7 } .article-alt .article__body-alt h2 { font-size: 25px; line-height: 1.2; margin-bottom: 12px; font-weight: 500; } .article-alt .article__body-alt p { margin: 0 0 36px; } /* Article Alt Primary */ .article-alt--primary { max-width: 100%; margin: 0; left: 0; } .article-alt--primary .article__image { max-width: 839px; padding-top: 46.2%; } .article-alt--primary .article__body { right: 0; left: auto; width: 507px; top: 126px; } .article-alt--primary .article__body h2 { font-size: 17px; font-weight: 500; color: #262A39; margin: 0 0 11px; position: relative; left: -4px; } .article-alt--primary .article__body h3 { font-size: 26px; text-transform: uppercase; line-height: 1.58; color: #fff; margin-bottom: 52px; position: relative; left: 12px; } .article-alt--primary .article__body h3 strong { background: #0092C7; -webkit-box-shadow: 0 0 0 10px #0092C7; box-shadow: 0 0 0 10px #0092C7; font-weight: 400; } .article-alt--primary .article__body h3 span { position: relative; left: 6px; background: #0092C7; padding: 0; } .homepage-article .article-alt--primary .article__body h3 span { position: initial; } .article-alt--primary .article__body .link { margin-right: 70px; } /* Is Mozimma */ .is-mozilla .article-alt .article__body h2 { left: 0; } .is-mozilla .article-alt .article__body h2 strong { display: inline; padding: 0.5em 0em; background-color: #0092C7; -webkit-box-shadow: 1em 0 0 #0092C7; box-shadow: 1em 0 0 #0092C7; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .is-mozilla .article-alt .article__body h2 span { left: 10px; } .is-mozilla .article-alt--primary .article__body h3 { left: 12px; } .is-mozilla .article-alt--primary .article__body h3 strong { display: inline; padding: 0.5em 0; background-color: #0092C7; -webkit-box-shadow: 1em 0 0 #0092C7; box-shadow: 1em 0 0 #0092C7; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .is-mozilla .article-alt--primary .article__body h3 span { left: 10px; } /* Article Alt Secondary */ .article-alt--secondary { max-width: 100%; margin: 0; left: 0; } .article-alt--secondary .article__image { padding-top: 45%; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .article-alt .article__body h2 { left: 0; } .article-alt .article__body h2 strong { display: inline; padding: 0.5em 0; background-color: #0092C7; -webkit-box-shadow: 1em 0 0 #0092C7; box-shadow: 1em 0 0 #0092C7; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .article-alt .article__body h2 span { left: 10px; } .article-alt--primary .article__body h3 { left: 12px; } .article-alt--primary .article__body h3 strong { display: inline; padding: 0.5em 0; background-color: #0092C7; -webkit-box-shadow: 1em 0 0 #0092C7; box-shadow: 1em 0 0 #0092C7; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .article-alt--primary .article__body h3 span { left: 10px; } } @media(min-width: 1199px){ .article-alt > a:hover .article__image { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } @media (max-width: 1199px) { /* Article Alt Primary */ .article-alt--primary .article__image { max-width: calc(100% - 200px); } } @media (max-width: 1023px) { .article-alt { left: 0; margin-bottom: 120px; } .article-alt .article__body { top: auto; bottom: -120px; left: 20px; width: calc(100% - 40px) } .article-alt .article__body h2 { margin-bottom: 30px; } .article-alt .article__body-alt { position: static; -webkit-box-shadow: none; box-shadow: none; width: 100%; padding: 32px 0 0; } .article-alt--primary .article__image { max-width: 100%; } } @media (max-width: 767px) { .article-alt { margin: 0 auto 25px; } .article-alt .article__image { padding-top: 64%; } .article-alt .article__body { bottom: -33px; left: 0; width: 100%; } .article-alt .article__body { padding-left: 19px; } .article-alt .article__body h3 { font-size: 10px; margin-bottom: 11px; } .article-alt .article__body h3 span { padding: 2px 4px; } .article-alt .article__body h2 { font-size: 14px; line-height: 1.25; margin-bottom: 18px; left: 0; } .article-alt .article__body h2 strong { -webkit-box-shadow: 5px 0 0 5px #0092C7, 16px 0 0 5px #0092C7; box-shadow: 5px 0 0 5px #0092C7, 16px 0 0 5px #0092C7; } .article-alt .article__body h2 span { left: 10px; } .article-alt .article__body .link { font-size: 15px; margin-right: 19px; padding: 0 12px 7px 0; max-width: 136px; margin-left: auto; } .article-alt .article__body .link:after { left: 0; } .article-alt .article__body .link i { margin-left: 17px; } /* Article Alt Primary */ .article-alt--primary { margin-bottom: -13px; } .article-alt--primary .article__image { padding-top: 62%; } .article-alt--primary .article__body { position: relative; bottom: auto; top: -28px; padding: 0 20px 0 29px; } .article-alt--primary .article__body br { display: none; } .article-alt--primary .article__body h2 { display: none; } .article-alt--primary .article__body h3 { font-size: 16px; line-height: 1.25; left: 0; margin-bottom: 19px; } .article-alt--primary .article__body h3 strong { -webkit-box-shadow: 0 0 0 4px #0092C7, 15px 0 0 4px #0092C7; box-shadow: 0 0 0 4px #0092C7, 15px 0 0 4px #0092C7; } .article-alt--primary .article__body h3 span { padding: 0; left: 6px; } .article-alt--primary .article__body .link { max-width: 126px; margin-right: 4px; } .article-alt--primary .article__body .link:after { right: 35px; width: 126px; left: auto; } .article-alt .article__image img { left: 0; } .article-alt .article__body p { margin-bottom: 19px; font-size: 16px; width: 94%; } } /* ------------------------------------------------------------ *\ Articles \* ------------------------------------------------------------ */ .articles { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -20px -30px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .articles .article { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; padding: 0 20px 30px; } /* Articles Primary */ .articles--primary { margin: 0 -10px -30px; } .articles--primary .article { padding: 0 10px 30px; } /* Articles Primary Alt */ .articles--primary-alt { margin: 0; margin-right: -220px; padding-left: 20px; margin-left: -20px; overflow-x: auto; -ms-flex-wrap: nowrap; flex-wrap: nowrap; justify-content: flex-start; } .articles--primary-alt .article { padding: 0; -webkit-box-flex: 0; -ms-flex: 0 0 320px; flex: 0 0 320px; min-width: 320px; } .articles--primary-alt .article + .article { margin-left: 20px; } /* Articles Primary Def */ .articles--primary-def { margin: 0; display: block; } .articles--primary-def .article { padding: 0; max-width: 100%; } .articles--primary-def .article + .article { margin-top: 61px; } /* Articles Secondary */ .articles--secondary { margin: 0 -30px -30px; } .articles--secondary .article { padding: 0 30px 30px; } /* Articles Teritary */ .articles--teritary { margin: 0 -23px -46px; } .articles--teritary .article { padding: 0 23px 46px; } @media (max-width: 1439px) { /* Articles Primary Alt */ .articles--primary-alt { margin: 0 -10px; padding-left: 0; } .articles--primary-alt .article { padding: 0 10px; -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; min-width: 25%; } .articles--primary-alt .article + .article { margin-left: 0; } } @media (max-width: 1023px) { .articles--primary-alt { margin-bottom: -20px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .articles--primary-alt .article { padding: 0 10px 20px; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; min-width: 50%; } /* Articles Teritary */ .articles--teritary { margin: 0 -5px -10px; } .articles--teritary .article { padding: 0 5px 10px; } .articles--teritary .article br { display: none; } } @media (max-width: 767px) { .articles { display: block; margin: 0; } .articles .article { max-width: 100%; padding: 0; } .articles .article + .article { margin: 32px 0 0; } .articles .article--secondary-alt + .article--secondary-alt { margin: 12px 0 0; } /* Articles Primary */ .articles--primary .article + .article { margin: 0 0; } .articles--primary .slick-slide { padding: 0 12px !important; } .articles--primary .slick-list { margin: 0 -12px !important; } /* Articles Primary Alt */ .articles--primary-alt { white-space: nowrap; margin-right: -15px; padding-right: 20px; } .articles--primary-alt .article { display: inline-block; vertical-align: top; max-width: 220px; padding: 0; white-space: normal; } .articles--primary-alt .article + .article { margin: 0 0 0 16px; } /* Articles Primary Def */ .articles--primary-def .article + .article { margin: 22px 0 0; } } /* ------------------------------------------------------------ *\ Article \* ------------------------------------------------------------ */ .article { text-align: center; } .article .article__image { border-radius: 50%; overflow: hidden; max-width: 176px; margin: auto; position: relative; } .article .article__image .article__label { position: absolute; bottom: 28px; left: 0; background: #fff; text-decoration: none;text-transform: uppercase; font-size: 9px; font-weight: 500; padding: 2px 4px 2px 13px; } .article .article__image-inner { display: block; background-size: cover; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; -o-transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .article .article__image-inner:not(.actu){ padding-top: 100%; } .article .article__body { margin: 20px 0 0; } .article .article__body h3 { font-size: 14px; line-height: 1.29; text-transform: uppercase; margin-bottom: 10px; min-height: 36px; } /* Article Primary */ .article--primary { text-align: left; } .article--primary .article__image { border-radius: 0; max-width: 100%; } /*.article--primary .article__image-inner { padding-top: 74%; }*/ .article--primary .article__body { margin: 10px 0 0; } .article--primary .article__body h4 { font-size: 11px; line-height: 1.36; font-weight: 700; text-transform: uppercase; } .article--primary .article__body h4 a { text-decoration: none; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } /* Article Primary Alt */ .article--primary-alt .article__image { -webkit-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .2); box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .2); } /*.article--primary-alt .article__image-inner { padding-top: 59%; }*/ .article--primary-alt .article__body { margin: 21px 0 0; } .article--primary-alt .article__body h2 { font-size: 12px; margin-bottom: 10px; text-transform: uppercase; font-weight: 400; } .article--primary-alt .article__body h3 { font-size: 18px; line-height: 1.17; text-transform: none; font-weight: 400; } /* Article Primary Def */ .article--primary-def { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: 0 10px 30px 0 rgba(32, 33, 47, .08); box-shadow: 0 10px 30px 0 rgba(32, 33, 47, .08); border-radius: 4px; overflow: hidden; position: relative; } .article--primary-def .article__link-alt { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; } .article--primary-def .article__image { -webkit-box-flex: 0; -ms-flex: 0 0 360px; flex: 0 0 360px; } .article--primary-def .article__image-inner { padding-top: 87%; } .article--primary-def .article__body { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; margin: 0; padding: 19px 36px 10px 21px; } .article--primary-def .article__body h2 { font-size: 12px; margin-bottom: 18px; text-transform: uppercase; font-weight: 400; } .article--primary-def .article__body h3 { font-size: 20px; line-height: 1.17; text-transform: none; margin: 0 0 26px; min-height: 0; } .article--primary-def .article__body p { font-size: 16px; line-height: 1.17; } /* Article Secondary */ .article--secondary > a { display: block; height: 100%; text-decoration: none; color: inherit; } .article--secondary .article__image { border-radius: 0; max-width: 100%; } /*.article--secondary .article__image-inner { padding-top: 100%; }*/ .article--secondary .article__body { margin: 22px 0 0; } .article--secondary .article__body h3 { min-height: 0; margin-bottom: 18px; } @media(min-width: 1199px){ .article .article__image:hover .article__image-inner { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } /*.article .article__image a:hover .article__image-inner { transform: scale(1.1); }*/ .article--primary .article__body h4 a:hover { opacity: .7; } .article--primary-def:hover .article__image-inner { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .article--secondary > a:hover .article__image-inner { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } } @media (max-width: 1023px) { .article .article__body h3 { min-height: 54px; } .article--primary-def .article__body h3 { min-height: 0; } .article--secondary .article__body h3 { min-height: 0; } } @media (max-width: 767px) { .article .article__body { margin: 22px 0 0; } .article .article__body h3 { min-height: 0; margin-bottom: 6px; } /* Article Primary */ .article--primary .article__image-inner { padding-top: 73%; } .article--primary .article__image .article__label { bottom: 30px; } .article--primary .article__body { margin: 6px 0 0; } /* Article Primary Alt */ .article--primary-alt .article__image-inner { padding-top: 66%; min-height: 147px; } .article--primary-alt .article__body { margin: 17px 0 0; } /* Article Primary Def */ .article--primary-def { display: block; border-radius: 0; } .article--primary-def .article__image-inner { padding-top: 58%; } .article--primary-def .article__body { margin: 0; padding: 10px 10px 35px; } .article--primary-def .article__body h2 { font-size: 12px; margin-bottom: 15px; } .article--primary-def .article__body h3 { font-size: 18px; line-height: 1.2; margin: 0 0 18px; } .article--primary-def .article__body p { font-size: 14px; line-height: 1.2; } /* Articles Secondary Alt */ .article--secondary-alt > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: left; } .article--secondary-alt .article__image { -webkit-box-flex: 0; -ms-flex: 0 0 103px; flex: 0 0 103px; margin: 0; } .article--secondary-alt .article__body { margin: 0; padding: 0 0 0 13px; } .article--secondary-alt .article__body h3 { margin-bottom: 9px; } } /* ------------------------------------------------------------ *\ Article History \* ------------------------------------------------------------ */ .article-history { display: -webkit-box; display: -ms-flexbox; display: flex; } .article-history + .article-history { margin-top: 99px; } .article-history .article__content { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-right: 50px; } .article-history .article__image { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .article-history figure { text-align: right; } .article-history h2 { margin-bottom: 20px; font-size: 18px; } .article-history ul { list-style: none; } .article-history li { position: relative; padding-left: 15px; } .article-history li:before { content: ''; position: absolute; top: 6px; left: 0; width: 5px; height: 5px; background: #0092c7; border-radius: 50%; } .article-history li span { font-weight: 500; } /* Article History Reversed */ .article-history--reversed { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .article-history--reversed .article__content { padding-right: 0; padding-left: 50px; } .article-history--reversed figure { text-align: left; } @media (max-width: 1023px) { .article-history { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .article-history .article__content { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; max-width: 100%; padding-right: 0; } .article-history .article__image { height: 100%; margin-bottom: 30px; } .article-history .article__image img { width: 100%; } .article-history--reversed .article__content { padding-left: 0 } } @media (max-width: 767px) { .article-history + .article-history { margin-top: 38px; } } /* ------------------------------------------------------------ *\ Article Product \* ------------------------------------------------------------ */ .article-product { padding: 60px 0 113px; } .article-product .article__head { margin-bottom: 20px; } .article-product .article__head h3 { overflow: hidden; display: inline-block; padding: 7px 10px 3px 31px; background: #fff; font-size: 18px; line-height: 1.25; text-transform: uppercase; } .article-product .article__body { margin-bottom: 100px; } .article-product .article__body h3 { margin-bottom: 21px; font-size: 18px; line-height: 1.22; } .article-product .article__foot { text-align: center; } .article-product figure { margin-bottom: 50px; text-align: center; } .article-product h2 { margin-bottom: 49px; font-weight: normal; font-size: 20px; line-height: 1.3; } .article-product p { margin-bottom: 29px; } .article-product p a { border-bottom: 2px solid #0092c7; text-decoration: none; line-height: 1.2; -webkit-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; } .article-product p a:hover { color: #0092c7; } .article-product strong { display: block; margin: 40px 0 60px; font-size: 16px; } .article-product .article__head h1 span { background: #fff; padding: 5px 10px 5px 30px; font-size: 18px; } /* ------------------------------------------------------------ *\ Bar Rating \* ------------------------------------------------------------ */ .bar-rating { pointer-events: none; } .bar-rating .br-widget a { display: inline-block; background: url(../images/temp/star-gray.png) no-repeat 0 0; width: 9px; height: 7px; background-size: 100% 100%; position: relative; } .bar-rating .br-widget a:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/temp/star-blue.png) no-repeat 0 0; background-size: 100% 100%; opacity: 0; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .bar-rating .br-widget a + a { margin-left: 1px; } .bar-rating .br-widget .br-active:after { opacity: 1; } .bar-rating .br-widget .br-selected:after { opacity: 1; } .bar-rating .br-current-rating { display: none; } .bar-rating--primary .br-widget a { width: 12px; height: 9px; } .bar-rating--primary .br-widget a + a { margin-left: 2px; } .bar-rating--alt { border: 2px solid #0092C7; border-radius: 2px; width: 128px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; } .bar-rating--alt .br-widget a { width: 15px; height: 11px; } .bar-rating--enabled { pointer-events: auto; } /* ------------------------------------------------------------ *\ Bar Points \* ------------------------------------------------------------ */ .bar-points { background: #E9F5FA; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 6px; text-align: left; } .bar-points img { margin-right: 7px; } @media (max-width: 767px) { .bar-points { padding: 12px 10px; } .bar-points img { margin-right: 11px; } } /* ------------------------------------------------------------ *\ Breadcrumps \* ------------------------------------------------------------ */ .breadcrumps { font-size: 11px; color: #262A39; } .breadcrumps ul { list-style: none; } .breadcrumps ul li { display: inline-block; position: relative; padding-right: 6px; margin-right: -2px; } .breadcrumps ul li:after { content: '›'; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 17px; margin-top: -1px; } .breadcrumps .active { padding-right: 0; margin-right: 0; } .breadcrumps .active:after { display: none; } .breadcrumps .active a { text-decoration: none; } @media (max-width: 767px) { .breadcrumps { font-size: 12px; line-height: .9; } .breadcrumps ul li { padding-right: 0; display: inline; } .breadcrumps ul li:after { position: static; -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); right: 4px; display: inline-block; vertical-align: middle; } } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { letter-spacing: 0.07rem; display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-weight: 500; font-size: 0.75rem; background: #0092C7; color: #fff; text-transform: uppercase; padding: 19px 6px; min-width: 135px; border: 1px solid #0092C7; -webkit-transition: background .4s, color .4s; -o-transition: background .4s, color .4s; transition: background .4s, color .4s; } .btn--white { background: #fff; color: #0092C7; } .btn--gray { background: #9B9B9B; border-color: #9B9B9B; color: #fff; } .btn--size1 { font-size: 0.75rem; padding: 10px 6px; } .btn--small { font-size: 0.75rem; padding: 8px 10px; min-width: 93px; } .btn--size2 { font-size: 0.75rem; padding: 12px 24px; } .btn--size3 { font-size: 0.75rem; padding: 12px 9px; } .btn--size4 { padding: 12px 10px; min-width: 190px; } .btn--size5 { font-size: 0.75rem; padding: 12px 7px; } .btn--size6 { padding: 11px 10px; min-width: 202px; } .btn--size7 { font-size: 0.75rem; padding: 12px 10px; min-width: 234px; } .btn--size8 { padding: 12px 10px; min-width: 248px; } .btn--size9 { padding: 12px 10px; min-width: 220px; } .btn--size10 { padding: 12px 10px; min-width: 290px; } .btn--size11 { font-size: 0.75rem; padding: 13px 10px; min-width: 187px; } .btn--size12 { padding: 14px 10px; min-width: 173px; } .btn--size13 { font-size: 0.75rem; padding: 10px 10px; min-width: 255px; } .btn--size14 { font-size: 0.75rem; padding: 11px 10px; min-width: 190px; } .btn--size15 { font-size: 0.75rem; padding: 10px 10px; min-width: 225px; } .btn--size16 { font-size: 0.75rem; padding: 12px 10px; min-width: 225px; } /* Button Disabled */ .btn-disabled { background: #BCCCD8; border-color: #BCCCD8; pointer-events: none; } /* Button Def */ .btn--def { background: #fff; border-color: #fff; color: #262A39; font-size: 0.75rem; width: 100%; min-width: 0; text-align: left; position: relative; padding: 22px 15px; } .btn--def i { position: absolute; top: 50%; right: 22px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* Button Disabled */ .btn--disabled { opacity: .3; pointer-events: none; } .btn--disabled-alt { pointer-events: none; } @media(min-width: 1025px){ .btn:hover { background: #fff; color: #0092C7; } .btn--white:hover { background: #0092C7; color: #fff; } } /* ------------------------------------------------------------ *\ Button Circle \* ------------------------------------------------------------ */ .btn-circle { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #fff; position: relative; } .btn-circle i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .btn-circle .ico-cart { background-image: url(../images/icons/ico-cart-blue.svg); } .btn-circle--alt { width: 31px; height: 31px; border-color: #1099cd; } /* ------------------------------------------------------------ *\ Button Alt \* ------------------------------------------------------------ */ .btn-alt { display: inline-block; text-decoration: none; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; background: #4367B2; border-radius: 2px; width: 100%; max-width: 320px; color: #fff; text-align: center; position: relative; padding: 13px 10px; -webkit-transition: background .4s, color .4s; -o-transition: background .4s, color .4s; transition: background .4s, color .4s; } .btn-alt:hover { background: #37538e; color: #fff; } .btn-alt i { position: absolute; top: 50%; left: 13px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .btn-alt--white { background: #fff; -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .3); box-shadow: 0 0 4px 0 rgba(0, 0, 0, .3); color: #262A39; } /* ------------------------------------------------------------ *\ Button Big \* ------------------------------------------------------------ */ .btn-big { display: inline-block; position: relative; font-size: 14px; font-weight: 700; padding-left: 103px; text-transform: uppercase; } .btn-big > i { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: left .4s; -o-transition: left .4s; transition: left .4s; } .btn-big:hover > i { left: 10px; } @media (max-width: 767px) { .btn-big { padding-left: 66px; } } /* ------------------------------------------------------------ *\ Button Burger \* ------------------------------------------------------------ */ .btn-burger { display: none; width: 39px; height: 19px; position: relative; } .btn-burger span { width: 100%; height: 3px; background: #5f87a0; position: absolute; left: 0; -webkit-transition: top .2s .25s, left .2s .25s, opacity .2s .25s, -webkit-transform .2s 0s; -o-transition: top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s; transition: top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s, -webkit-transform .2s 0s; } .btn-burger span:first-child { top: 0; } .btn-burger span:nth-child(2) { top: 8px; } .btn-burger span:last-child { top: 16px; } .btn-burger.active span { background: #262A39; -webkit-transition: background .2s, top .2s, left .2s, opacity .2s, -webkit-transform .2s .25s; -o-transition: background .2s, top .2s, left .2s, opacity .2s, transform .2s .25s; transition: background .2s, top .2s, left .2s, opacity .2s, transform .2s .25s, -webkit-transform .2s .25s; } .btn-burger.active span:first-child { top: 8px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .btn-burger.active span:nth-child(2) { opacity: 0; } .btn-burger.active span:last-child { top: 8px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } @media (max-width: 767px) { .btn-burger { display: block; width: 36px; } } /* ------------------------------------------------------------ *\ Button Fav \* ------------------------------------------------------------ */ .btn-fav { display: inline-block; text-decoration: none; position: relative; line-height: 0; } .btn-fav i { -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .btn-fav i + i { position: absolute; top: 0; left: 0; opacity: 0; } .btn-fav.active i { opacity: 0; } .btn-fav.active i + i { opacity: 1; } /* ------------------------------------------------------------ *\ Component \* ------------------------------------------------------------ */ .components { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 -10px; } .component { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; padding: 0 10px; } .component .component__head { position: relative; width: 220px; height: 220px; margin: 0 auto 15px; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 50%; color: #fff; text-align: center; } .component .component__head h5 { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 12px; line-height: 1.25; } .component .component__head h6 { position: absolute; bottom: 22.73%; left: 0; right: 0; text-align: center; font-size: 12px; line-height: 1.25; } .component h4 { margin-bottom: 10px; font-weight: bold; font-size: 14px; line-height: 1.25; text-align: center; text-transform: uppercase; } .component p { padding: 0 12px; text-align: center; } @media (max-width: 1023px) { .components { margin: -10px; } .component { -webkit-box-flex: 0; -ms-flex: 0 0 49.5%; flex: 0 0 49.5%; max-width: 49.5%; padding: 10px; } .component p { max-width: 230px; margin: 0 auto; } } @media (max-width: 767px) { .components { display: block; margin: -10px 0; } .component { max-width: 100%; } } /* ------------------------------------------------------------ *\ Detail \* ------------------------------------------------------------ */ .detail { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .detail .detail__bullet { display: inline-block; width: 20px; height: 20px; border: 2px solid #262a39; background: #fff; font-weight: bold; font-size: 10px; line-height: 1.8; color: #0092c7; border-radius: 50%; text-align: center; } .detail .detail__list { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; padding-right: 45px; margin-bottom: 0; list-style: none; } .detail .detail__list li { position: relative; padding-left: 30px; font-size: 12px; line-height: 1.2; text-transform: uppercase; } .detail .detail__list li + li { margin-top: 20px; } .detail .detail__list li sup { font-size: 9px; } .detail .detail__list .detail__bullet { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .detail .detail__figure { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; position: relative; text-align: center; } .detail .detail__figure .detail__bullet { position: absolute; } .detail .detail__figure .detail__bullet--one { top: 10.45%; left: 44%; } .detail .detail__figure .detail__bullet--two { top: 29%; left: 35%; } .detail .detail__figure .detail__bullet--three { top: 43%; left: 53.5%; } .detail .detail__figure .detail__bullet--four { top: 52.5%; left: 38.2%; } .detail .detail__text { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; padding-left: 40px; } .detail .detail__text span { margin-bottom: 1px; font-weight: bold; font-size: 64px; color: #0092c7; } @media (max-width: 1023px) { .detail .detail__figure { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 27px; } .detail .detail__list, .detail .detail__text { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .detail .detail__text { padding-left: 30px; } .detail .detail__figure .detail__bullet--one { top: 9.45%; left: 45.5%; } .detail .detail__figure .detail__bullet--two { top: 28%; left: 38.6%; } .detail .detail__figure .detail__bullet--three { top: 42.5%; left: 52.8%; } .detail .detail__figure .detail__bullet--four { top: 52%; left: 41%; } } @media (max-width: 767px) { .detail .detail__list { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0 53px; margin: 0 auto; } .detail .detail__list li + li { margin-top: 19px; } .detail .detail__text { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; padding: 0 53px; margin-top: 29px; } .detail .detail__figure { margin-bottom: 30px; } .detail .detail__figure .detail__bullet--one { top: 10.45%; left: 46%; } .detail .detail__figure .detail__bullet--two { top: 29%; left: 40.2%; } .detail .detail__figure .detail__bullet--four { top: 53%; left: 42%; } } @media (max-width: 374px) { .detail .detail__text { padding: 0 44px; } } /* ------------------------------------------------------------ *\ Features \* ------------------------------------------------------------ */ .features .features__actions { text-align: center; margin: 14px 0 0; } .features .features__actions--primary { margin: 27px 0 0; } /* Mobile */ @media (max-width: 767px) { .features .features__actions { margin: 18px 0 0; } .features .features__actions .btn { min-width: 195px; } } /* ------------------------------------------------------------ *\ Feature \* ------------------------------------------------------------ */ .feature { border: 1px solid #E6E6E6; } .feature .feature__head { min-height: 80px; padding: 26px 28px 10px 19px; position: relative; } .feature .feature__head h3 { font-size: 15px; font-weight: 500; position: relative; top: 6px; margin: 0; } .feature .feature__head h3 span { font-weight: 400; } .feature .feature__head h3 strong { font-weight: 700; text-transform: uppercase; } .feature .feature__head h3 + p { margin: 24px 0 0; } .feature .feature__head p { font-size: 15px; } .feature .feature__head .link-alt { position: absolute; top: 50%; right: 28px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .feature .feature__head--primary { padding: 14px 28px 31px 19px; } .feature + .feature { margin-top: 11px; } @media (max-width: 767px) { .feature .feature__head { min-height: 70px; padding: 11px 28px 7px 10px; } .feature .feature__head h3 span { display: block; } .feature .feature__head h3 + p { margin: 14px 0 0; } .feature .feature__head .link-alt { right: 15px; } .feature .feature__head--primary { padding: 6px 28px 7px 10px; } } /* ------------------------------------------------------------ *\ Feature Alt \* ------------------------------------------------------------ */ .feature-alt { border: 1px solid #E6E6E6; } .feature-alt:after { content: ''; display: table; clear: both; } .feature-alt .feature__body { float: left; width: calc(100% - 363px); border-right: 1px solid #dfdfdf; padding: 16px 21px 19px 11px; } .feature-alt .feature__body .feature__title { padding-left: 12px; } .feature-alt .feature__aside { float: right; width: 360px; padding: 13px 21px; } .feature-alt .feature__title { text-transform: uppercase; font-size: 13px; margin: 0; } .feature-alt .feature__title--blue { color: #0092C7; font-size: 14px; } .feature-alt .feature__title + .products-small { margin-top: 20px; } .feature-alt .feature__title + .list-details { margin: 20px 0 0; } .feature-alt .feature__title + h5 { margin: 3px 0 0; font-size: 12px; font-weight: 500; text-transform: uppercase; } .feature-alt .list-details + .feature__title { margin: 34px 0 0; } .feature-alt .list-details + .feature__title--blue { margin: 13px 0 0; } .feature-alt .feature__foot { border-top: 1px solid #E1E1E1; padding-top: 20px; text-align: right; } @media (max-width: 1023px) { .feature-alt .feature__body { width: calc(100% - 250px); } .feature-alt .feature__aside { width: 247px; } } @media (max-width: 767px) { .feature-alt .feature__body, .feature-alt .feature__aside { width: 100%; float: none; border: none; } .feature-alt .feature__aside { border-bottom: 1px solid #dfdfdf; padding: 21px 12px 18px; } .feature-alt .list-details + .feature__title { margin: 25px 0 0; } .feature-alt .list-details + .feature__title--blue { margin: 14px 0 0; } .feature-alt .feature__body { padding: 26px 12px 22px; } .feature-alt .feature__body .feature__title { padding-left: 0; } .feature-alt .feature__title + .products-small { margin: 20px -12px 0; } .feature-alt .feature__foot { margin: -11px -12px 0; padding-top: 19px; } } /* ------------------------------------------------------------ *\ Feature Def \* ------------------------------------------------------------ */ .feature-def { padding: 40px 50px 60px; position: relative; } .feature-def .table { margin-right: -83px; } .feature-def .feature__head { margin-bottom: 87px; } .feature-def .feature__head h3 { font-size: 16px; font-weight: 700; margin: 0; } .feature-def .feature__head h3 + p { margin: 5px 0 0; } .feature-def .feature__head p { font-size: 12px; } .feature-def .feature__head--primary { margin-bottom: 51px; } .feature-def .feature__body-alt { font-size: 15px; line-height: 1.15; } .feature-def .feature__body-alt p { margin: 0 0 27px; } .feature-def .feature__body-alt h4 { display: inline-block; min-width: 247px; background: #F3F4F5; font-size: 15px; font-weight: 400; text-align: center; padding: 13px 3px; } .feature-def .feature__body-alt h4 strong { display: block; font-size: 20px; font-weight: 700; margin: 6px 0 0; color: #0092C7; } .feature-def .feature__actions { margin: 9px 0 0; } .feature-def .feature__body + .feature__head { margin: 57px 0 41px; } .feature-def + .feature-def { padding: 45px 50px 60px; } .feature-def + .feature-def--primary { padding: 53px 50px 25px; } .feature-def + .feature-def:after { content: ''; position: absolute; top: 0; left: 0; width: 100vw; height: 2px; background: #dfe6ec; } /* Feature Def Priamry */ .feature-def--primary .feature__head { margin-bottom: 26px; } /* Feature Def Secondary */ .feature-def--secondary { padding: 52px 50px 78px; } .feature-def--secondary .feature__head { margin-bottom: 55px; } /* Feature Def Teritary */ .feature-def--teritary { padding: 52px 62px 40px; } .feature-def--teritary .feature__head { margin-bottom: 42px; } /* Feature Def Size0 */ .feature-def--size0 { padding: 0 !important; } /* Feature Def Size1 */ .feature-def--size1 { padding: 31px 62px 35px !important; } /* Feature Def Size2 */ .feature-def--size2 { padding: 42px 62px 35px !important; } .feature-def--size2 .feature__head { margin-bottom: 33px; } /* Feature Def Quaternary */ .feature-def--quaternary { padding: 53px 50px 35px; } .feature-def--quaternary .feature__head { margin-bottom: 54px; } .feature-def--quaternary .list-checkboxes + .btn { margin: 20px 0; padding-left: 25px; padding-right: 25px; } /* Feature Def Senary */ .feature-def--senary { padding: 53px 50px 35px; } .feature-def--senary .feature__head { margin-bottom: 19px; } /* Feature Def Septenary */ .feature-def--septenary { padding: 53px 50px 35px; } .feature-def--septenary .feature__head { margin-bottom: 12px; } .feature-def--septenary .feature__body + .feature__head { margin: 44px 0 23px; } @media (max-width: 1439px) { .feature-def .table { margin-right: 0; } } @media (max-width: 1023px) { .feature-def .feature__body-alt br { display: none; } /* Feature Def Secondary */ .feature-def--secondary { margin-right: 0; } /* Feature Def Quaternary */ .feature-def--quaternary .form-def { margin-right: 135px; } } @media (max-width: 767px) { .feature-def { padding: 0 !important; } .feature-def:after { left: -10px; } .feature-def .feature__head--primary { margin-bottom: 46px; } .feature-def .feature__body-alt { text-align: center; padding: 0 19px; } .feature-def .feature__body-alt p { margin: 0 0 16px; } .feature-def .feature__body + .feature__head { margin: 30px 0 41px; } .feature-def .feature__actions { margin: 13px 0 0; } .feature-def .feature__actions .btn { display: block; font-size: 12px; padding: 12px 10px; } .feature-def + .feature-def { margin: 29px 0 0; padding: 28px 0 0 !important; } .feature-def + .feature-def:after { left: -10px; } .feature-def + .feature-def--primary { margin: 19px 0 0; padding: 26px 0 0 !important; } .feature-def--secondary + .feature-def--primary { margin: 25px 0 0; padding: 26px 0 0 !important; } .feature-def + .feature-def--size1 { margin: 32px 0 0; padding: 18px 0 0 !important; } .feature-def--size1 + .feature-def { margin: 32px 0 0; padding: 35px 0 0 !important; } .feature-def--size0 + .feature-def--size0 { margin: 6px 0 0; padding: 26px 0 0 !important; } /* Feature Def Teritary */ .feature-def--teritary .feature__head { text-align: center; margin-bottom: 35px; } /* Feature Def Size2 */ .feature-def--size2 .feature__head { text-align: center; margin-bottom: 19px; } .feature-def--size2 .feature__body { padding: 0 13px; } /* Feature Def Senary */ .feature-def--senary { margin-top: 15px; } /* Feature Def Quaternary */ .feature-def--quaternary { padding-top: 15px !important; } .feature-def--quaternary .feature__head { margin-bottom: 28px; } .feature-def--quaternary .form-def { margin-right: 0; } /* Feature Def Septenary */ .feature-def--septenary { padding-top: 15px !important; } .feature-def--septenary .feature__head { margin-bottom: 15px; } .feature-def--septenary .feature__body + .feature__head { margin: 30px 0 13px; } .feature-def--quaternary .list-checkboxes + .btn { margin: 20px 0 0; width: 100%; } } /* ------------------------------------------------------------ *\ Form Elements \* ------------------------------------------------------------ */ input::-webkit-input-placeholder { color: inherit; opacity: 1; } input:-ms-input-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:-ms-input-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; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } select::-ms-expand { display: none; } /* Field */ .field { width: 100%; height: 40px; border: none; border-radius: 0; padding: 0 10px; background: #E6ECF0; resize: none; } textarea.field { height: 120px; padding: 10px; } .field-alt { width: 100%; height: 37px; border: 2px solid #dee5eb; border-radius: 2px; padding: 0 10px; background: #fff; text-align: center; color: #182A45; font-size: 15px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .field-alt::-webkit-input-placeholder { color: #9ca4af; } .field-alt::-moz-placeholder { color: #9ca4af; } .field-alt:-moz-placeholder { color: #9ca4af; } .field-alt:-ms-input-placeholder { color: #9ca4af; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } @media (max-width: 767px) { textarea.field { height: 140px; } } /* Select */ .select { width: 90px; position: relative; } #selctQt-pop { width: 90px; position: relative; } .select:after { content: ''; position: absolute; top: 50%; right: 5px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 7px 5.5px 0 5.5px; border-color: #0091c6 transparent transparent transparent; pointer-events: none; margin-top: -3px; } .select select { border: none; width: 100%; border-radius: 0; border-bottom: 2px solid #D8D8D8; font-weight: 500; color: #0092C7; text-align: center; padding-bottom: 5px; background: none; } /* Checkbox */ .checkbox input { display: none; } .checkbox input:checked + label:after { background: #0092C7; } .checkbox label { display: block; font-size: 14px; font-weight: 400; color: #0092C7; position: relative; padding-left: 20px; } .checkbox label:after { content: ''; position: absolute; top: 4px; left: 0; width: 12px; height: 12px; border-radius: 2px; border: 2px solid #0092C7; -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; } .checkbox label a { text-decoration: underline; } .checkbox label a:hover { text-decoration: none; } /* Checkbox Primary */ .checkbox--primary label { font-size: 12px; line-height: 1.17; color: #262A39; padding-left: 22px; } /* Checkbox Secondary */ .checkbox--secondary label { line-height: 1.57; color: #262A39; padding-left: 22px; } /* Checkbox Teritary */ .checkbox--teritary label { font-size: 13px; color: #262A39; padding-left: 20px; } /* Checkbox Quaternary */ .checkbox--quaternary label { font-size: 14px; color: #262A39; padding-left: 20px; } /* Checkbox Def */ .checkbox-def input { display: none; } .checkbox-def input:checked + label:before { opacity: 1; } .checkbox-def label { display: inline-block; position: relative; font-size: 13px; font-weight: 700; color: #5F87A0; text-transform: uppercase; padding-right: 58px; } .checkbox-def label i { vertical-align: middle; margin-right: 12px; position: relative; top: -4px; } .checkbox-def label:after, .checkbox-def label:before { content: ''; position: absolute; top: 0; right: 17px; } .checkbox-def label:after { width: 19px; height: 19px; background: #E9F5FA; } .checkbox-def label:before { z-index: 10; background: url(../images/temp/ico-check.svg) no-repeat 0 0; width: 20px; height: 14px; background-size: 100% 100%; right: 13px; opacity: 0; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .checkbox-def--primary label { font-size: 12px; font-weight: 400; color: #002B4E; padding: 0 0 0 38px; } .checkbox-def--primary label:after, .checkbox-def--primary label:before { right: auto; left: 0; margin-top: -3px; } .checkbox-def--primary label:before { margin-left: 3px; } @media (max-width: 767px) { .checkbox--primary label { font-size: 14px; line-height: 1.57; } /* Checkbox Def */ .checkbox-def label { font-size: 12px; padding-right: 64px; } .checkbox-def label:after, .checkbox-def label:before { margin-right: 10px; } .checkbox-def--primary label { padding-right: 0; } } /* Radio */ .radio input { display: none; } .radio input:checked + label:before { opacity: 1; visibility: visible; } .radio label { display: block; position: relative; font-size: 14px; font-weight: 400; padding-left: 20px; } .radio label:after { content: ''; position: absolute; top: 3px; left: 0; width: 12px; height: 12px; border: 1px solid #0092C7; border-radius: 50%; -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; } .radio label:before { content: ''; position: absolute; top: 6px; left: 3px; width: 6px; height: 6px; background: #0092C7; border-radius: 50%; opacity: 0; visibility: hidden; -webkit-transition: opacity .4s, visibility .4s; -o-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; } /* Radio Primary */ .radio--primary label { font-size: 15px; line-height: 1.13; font-weight: 700; padding-left: 31px; } .radio--primary label span { font-weight: 400; position: absolute; top: 50%; left: 111px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .radio--primary label span strong { display: block; } /* Radio Secondary */ .radio--secondary input:checked + label { border-color: #0092C7; } .radio--secondary label { border: 1px solid #D8D8D8; width: 191px; height: 75px; -webkit-transition: border-color .4s; -o-transition: border-color .4s; transition: border-color .4s; } .radio--secondary label img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; } .radio--secondary label:after { display: none; } .radio--secondary label:before { background: url(../images/temp/ico-check.png) no-repeat 0 0; width: 15px; height: 15px; background-size: 100% 100%; border-radius: 0; top: auto; left: auto; bottom: -9px; right: -9px; } /* Radio Secondary Alt */ .radio--secondary-alt label { width: 52px; height: 38px; } /* Radio Teritary */ .radio--teritary label { text-transform: none; font-size: 12px; padding-left: 26px; } .radio--teritary label:after { width: 15px; height: 15px; margin-top: -4px; } .radio--teritary label:before { width: 9px; height: 9px; margin-top: -4px; } @media (max-width: 767px) { /* Radio Primary */ .radio--primary label { padding-left: 45px; } .radio--primary label:after, .radio--primary label:before { margin-left: 13px; } /* Radio Secondary */ .radio--secondary label { width: 100%; height: 48px; } .radio--secondary label img { max-width: 80px; } .list-radios-secondary.list-radios-secondary--alt { display:flex; justify-content: center; } } @media(max-width: 374px){ /* Radio Secondary */ .radio--secondary label { width: 68px; height: 40px; } .radio--secondary label img { -webkit-transform: translate(-50%, -50%) scale(.8); -ms-transform: translate(-50%, -50%) scale(.8); transform: translate(-50%, -50%) scale(.8); } } .form-error { display: none; margin: 3px 0 0; color: #ff0505; font-size: 14px; font-weight: 400; } .error-container .form-error { display: block; } .error{color: #ff355a; font-size: 0.75rem; font-weight: 400;} .margintop20{margin-top: 20px;} /* Form Upload */ .form-upload input { display: none; } /* ------------------------------------------------------------ *\ Form Contact \* ------------------------------------------------------------ */ .form-contact { max-width: 900px; margin: auto; position: relative; padding-left: 300px; padding-bottom: 33px; } .form-contact .form__field { width: 100%; border: none; border-radius: 0; background: none; color: #5F87A0; font-size: 10px; border-bottom: 1px solid #ced7de; padding-bottom: 6px; } .form-contact .form__head { position: absolute; top: -14px; left: 0; width: 400px; margin-right: 40px; } .form-contact .form__head h4 { font-size: 16px; line-height: 20px; color: #5F87A0; font-weight: 300; padding-right: 40px;} .form-contact .form__body input, .form-contact .form__body button { font-size: 0.75rem; } .form-contact .form__head h4 strong { font-weight: 700; } .form-contact .form__body { position: relative; padding-right: 117px; margin-left: 100px; } .form-contact .form__body .form__btn { position: absolute; bottom: 0; right: 0; line-height: 14px; padding: 10px 20px; letter-spacing: normal;} .form-contact .checkbox { margin: 20px 0 0; } /* Form Contact Small */ .form-contact--small { padding-left: 0; padding-bottom: 0; } .form-contact--small .form__field { color: #262A39; font-size: 13px; } .form-contact--small .form__body { padding-right: 121px; } .form-contact--small .form__body .form__btn { font-size: 8px; min-width: 121px; padding: 11px 10px; } @media (max-width: 1023px) { .form-contact { padding-bottom: 70px; } /* Form Contact Small */ .form-contact--small { padding-bottom: 0; } .form-contact--small .form__body .btn { min-width: 94px; padding: 11px 10px; } } @media (max-width: 767px) { .form-contact { padding: 0 10px 80px; } .form-contact .form__head { position: static; margin: 0 0 20px; width: 100%; padding: 0; } .form-contact .form__head h4 { font-size: 16px; line-height: 1.25; } .form-contact .form__body { padding-right: 120px; } .form-contact .form__field { font-size: 12px; padding-bottom: 9px; } .form-contact .form__btn { min-width: 110px; font-size: 12px; padding: 11px 10px; } /* Form Contact Small */ .form-contact--small .form__field { font-size: 15px; padding-bottom: 9px; } .form-contact--small .form__body { padding-right: 94px; } .form-contact--small .form__body .form__btn { min-width: 94px; } .form-contact--small .checkbox { margin: 14px 0 0; } .form-contact--small .checkbox label { line-height: 1.57; } } /* ------------------------------------------------------------ *\ Form \* ------------------------------------------------------------ */ .form { padding: 34px 50px 34px 39px; } .form .list-checkboxes { margin: 23px 0 0; } .form .form__head { border-bottom: 2px solid #003593; padding-bottom: 5px; margin-bottom: 31px; } .form .form__head h2 { font-size: 16px; } .form .form__title { text-transform: uppercase; font-size: 20px; margin-bottom: 23px; } .form .form__head-alt { margin-bottom: 20px; } .form .form__head-alt h3 { font-size: 15px; font-weight: 700; text-transform: uppercase; } .form .form__head-alt h3 span { text-transform: none; } .form .form__head-alt h3 em { font-style: normal; font-size: 14px; text-transform: none; font-weight: 400; } .form .form__head-alt p { font-size: 12px; line-height: 1.17; } .form .form__head-alt h4 { font-size: 12px; text-transform: uppercase; margin: 0; font-weight: 400; } .form .form__head-def { margin-bottom: 39px; text-align: center; } .form .form__head-def h3 { font-size: 18px; line-height: 1.44; } .form .form__label { text-transform: uppercase; display: block; margin-bottom: 2px; font-size: 12px; font-weight: 400; } .form .form__hint { text-align: right; font-size: 12px; color: #5D6F7B; } .form .form__left { text-align: left; margin-top: 25px} .form .form__center { text-align: center;} .form .form__body > .checkbox { margin-top: 20px; margin-bottom: 21px; } .form .form__row + .form__row { margin-top: 22px; } .form .form__row--primary { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -4px; margin-right: -4px; } .form .form__col { padding: 0 4px; -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .form .form__col--size1 { -webkit-box-flex: 0; -ms-flex: 0 0 53%; flex: 0 0 53%; max-width: 53%; } .form .form__col--size2 { -webkit-box-flex: 0; -ms-flex: 0 0 47%; flex: 0 0 47%; max-width: 47%; } .form .form__controls { position: relative; } .form .form__controls > i { position: absolute; top: 50%; right: 13px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; } .form .form__row-alt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 14px; } .form .form__row-alt h3 { margin: 0 21px 0 0; text-transform: uppercase; display: block; font-weight: 400; } .form .form__actions { text-align: center; margin: 45px 0 0; } .form .form__actions .btn { padding: 12px 20px; } /* Form Primary */ .form--primary { padding: 0; } .form--primary .form__row + .form__row { margin-top: 25px; } .form--primary .form__row--primary ~ .form__row { margin-top: 20px; } .form--primary .form__body > p { text-align: right; margin: 16px 7px 0 0; } .form--primary .form__actions { margin: 22px 0 0; text-align: left; } .form--primary .form__actions .btn { min-width: 192px; } /* Form Primary */ .form--primary-alt .list-radios { margin-top: -10px; } .form--primary-alt .list-checkboxes { margin: 16px 0 0; } .form--primary-alt .list-checkboxes li + li { margin: 14px 0 -3px; } .form--primary-alt .form__body > p { margin: 11px 0 0; } .form--primary-alt .form__actions { margin: 15px 0 0; } .form--primary-alt .form__actions .btn { min-width: 0; width: 100%; } .form--primary-alt .form__actions .btn + .list-actions { margin: 6px 0 0; } .form--primary-alt .form__actions .list-actions li + li { margin: 5px 0 0; } /* Form Mail */ .form--mail { padding: 20px 18px 25px; max-width: 380px; } .form--mail .form__actions { text-align: left; margin: 10px 0 0; } .form--mail .form__actions .btn { padding: 12px 31px; } /* Form Secondary */ .form--secondary { padding: 0; } .form--secondary .form__head-alt { margin-bottom: 17px; } .form--secondary .form__head-alt h3 { text-transform: none; margin: 0; } .form--secondary .form__head-alt p { margin: 16px 0 0; font-size: 15px; color: #9B9B9B; } .form--secondary .form__body { position: relative; padding-right: 195px; } .form--secondary .form__body .btn { position: absolute; bottom: 0; right: 0; } /* Form Alt */ .form--alt { padding: 0; } .form--alt .form__head-alt { margin-bottom: 25px; } .form--alt .form__body { padding-right: 87px; } .form--alt .form__row + .form__row { margin-top: 19px; } .form--alt .form__actions { text-align: left; margin: 22px 0 0; } /* Form Alt Primary */ .form--alt-primary .form__head-alt { margin-bottom: 35px; } .form--alt-primary .form__body { max-width: 300px; padding-right: 0; } .form--alt-primary .form__actions { margin: 26px 0 0; } /* Form Alt Secondary */ .form--alt-secondary .form__head-alt { margin-bottom: 11px; } .form--alt-secondary .form__body { padding-right: 0; max-width: 300px; } .form--alt-secondary .form__body > .checkbox { margin: 30px 0 0; } .form--alt-secondary .form__actions { margin: 26px 0 0; } .form--alt-secondary .form__actions .btn { min-width: 0; width: 100%; max-width: 300px; } .form--alt-secondary .list-radios-secondary { margin: 0 !important; } .form--alt-secondary .list-radios-secondary + .form__row { margin-top: 17px; } /* Form Alt Teritary */ .form--alt-teritary .list-checkboxes { margin: 40px -80px 0 0; } .form--alt-teritary .list-services { margin: 0; margin-right: -30px; } .form--alt-teritary .list-services + .form__row { margin-top: 24px; } .form--alt-teritary .form__row + .form__row { margin-top: 27px; } .form--alt-teritary .form__head-alt { margin-bottom: 32px; } .form--alt-teritary .form__body { padding-right: 0; max-width: 300px; } /* Form Teritary */ .form--teritary { padding: 29px 20px; border: 1px solid #E6E6E6; max-width: 713px; margin: auto; } .form--teritary .list-checkboxes { margin: 18px 0 0; } .form--teritary .form__body { max-width: 378px; margin: auto; } .form--teritary .form__actions { margin: 20px 0 0; } .form--teritary .form__actions .btn { padding: 13px 10px; } .form--teritary .form__row + .form__row { margin-top: 19px; } @media (max-width: 1023px) { /* Form teritary */ .form--teritary { max-width: 640px; } /* Form Secondary */ .form--secondary .form__body { padding-right: 0; } .form--secondary .form__body .btn { position: static; width: 100%; margin-top: 10px; } /* Form Alt */ .form--alt .form__body { padding-right: 0; max-width: 100%; } } @media (max-width: 767px) { .form { padding: 25px 0 34px; } .form .list-checkboxes { margin: 21px 0 0; } .form .form__head { margin-bottom: 18px; } .form .form__row + .form__row { margin-top: 19px; } .form .form__actions { margin: 22px 0 0; } .form .form__actions .btn { min-width: 0; width: 100%; } .form .form__title { text-align: center; border-bottom: 2px solid #dfe6ec; font-size: 16px; padding-bottom: 16px; margin: 0 45px 20px; } /* Form Primary */ .form--primary { padding: 0; } .form--primary .field { height: 44px; } .form--primary .form__actions { margin: 46px 0 0; } /* Form Alt Teritary */ .form--alt-teritary .list-services { margin-right: 0; } /* Form Mail */ .form--mail { padding: 11px 10px 7px; max-width: 100%; } /* Form Secondary */ .form--secondary { padding: 0; } /* Form Alt */ .form--alt { padding: 0; } /* Form Teritary */ .form--teritary { max-width: 100%; border: none; padding: 0; } .form--teritary .list-checkboxes { margin: 18px 0 0; } .form--teritary .form__head-def { padding: 0; margin: 0 -5px 55px; } .form--teritary .form__actions { margin: 22px 0 0; } .form--teritary .form__actions .btn { width: 100%; max-width: 189px; } /* Form Alt Alt */ .form--primary-alt .list-checkboxes { margin: 17px 0 0; } .form--primary-alt .field { height: 40px; } .form--primary-alt .form__row + .form__row { margin-top: 24px; } .form--primary-alt .form__actions { margin: 16px 0 0; } .form--primary-alt .form__actions .btn + .list-actions .btn-alt { width: 100%; max-width: 100%; } } /* ------------------------------------------------------------ *\ Form Code \* ------------------------------------------------------------ */ .form-code { max-width: 720px; position: relative; padding-left: 264px; } .form-code .field { height: 50px; font-size: 14px; padding: 0 25px; color: #5F87A0; } .form-code .form__head { width: 264px; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: left; margin-top: 3px; } .form-code .form__head h3 { font-size: 15px; color: #5F87A0 } .form-code .form__body { padding-right: 156px; position: relative; } .form-code .form__body .btn { position: absolute; top: 0; right: 0; font-size: 18px; padding: 13px 10px; min-width: 147px; } @media (max-width: 767px) { .form-code { padding-left: 0; } .form-code .field { height: 40px; padding: 0 10px; } .form-code .form__head { position: static; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); margin-bottom: 15px; } .form-code .form__body { padding-right: 106px; } .form-code .form__body .btn { font-size: 12px; min-width: 106px; padding: 12px 10px; max-height: 40px; } } /* ------------------------------------------------------------ *\ Form ALt \* ------------------------------------------------------------ */ .form-alt .checkbox label { font-size: 12px; line-height: 1.85; } .form-alt .form__controls { position: relative; } .form-alt .form__controls i { position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .form-alt .form__foot { margin: 33px 0 0; } .form-alt .form__foot .btn { margin: 17px 0 0; } .form-alt .ico-info { cursor: pointer; } .form-alt .ico-info:hover { opacity: .8; } @media (max-width: 1023px) { .form-alt .checkbox br { display: none; } } @media (max-width: 767px) { .form-alt .form__foot { margin: 24px 9px 0; text-align: center; } .form-alt .form__foot .checkbox { text-align: left; } .form-alt .form__foot .btn { margin: 27px 0 0; } } /* ------------------------------------------------------------ *\ Form Def \* ------------------------------------------------------------ */ .form-def { max-width: 455px; } .form-def .field-alt { font-size: 12px; text-align: left; padding: 0 10px; } .form-def label, .form-def h5 { font-size: 12px; font-weight: 400; margin: 0; } .form-def label span { display: block; font-size: 12px; opacity: .5; text-transform: none; margin: 2px 0 0; } .form-def .form__controls { position: relative; } .form-def .form__controls .link-alt { position: absolute; top: 50%; left: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-left: 15px; white-space: nowrap; } .form-def .form__foot { margin: 18px 0 0; font-size: 10px; line-height: 1.1; } .form-def .form__foot a { text-decoration: underline; } .form-def .form__foot a:hover { text-decoration: none; } .form-def .form__row { position: relative; padding-left: 160px; } .form-def .form__row > h5, .form-def .form__row > label { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-transform: uppercase; } .form-def .form__row--secondary { padding-left: 160px; } .form-def .form__row--secondary .field-alt { text-align: center; } .form-def .form__row--secondary .form__controls { max-width: 150px; } .form-def .form__row--teritary { padding-left: 160px; } .form-def .form__row--teritary .form__controls { max-width: 164px; } .form-def .form__row + .form__row { margin: 8px 0 0; } .form-def .form__row--first + .form__row { margin: 22px 0 0; } /*.form-def .form__row--secondary + .form__row { margin: 24px 0 0; }*/ .form-def .form__row + .form__row--teritary { margin: 10px 0 0; } .form-def .form__row-alt + .form__row-alt { margin-top: 18px; } .form-def .form__row-alt--primary { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -10px; margin-right: -10px; } .form-def .form__col { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 10px; } /* Form Def Primary */ .form-def--primary { max-width: 330px; } .form-def--primary label { display: block; font-size: 15px; font-weight: 400; margin: 0 0 4px; } .form-def--primary .form__actions { margin: 16px 0 0; } @media (max-width: 767px) { .form-def .form__controls { text-align: right; } .form-def .form__controls .field-alt { text-align: left; } .form-def .form__controls .link-alt { position: static; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); display: inline-block; margin: 10px 0 0; } .form-def .form__foot { margin: 27px 0 0; } .form-def--primary .form__col { padding: 0 5px; } .form-def .form__row > label { position: static; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); display: block; margin-bottom: 3px; } .form-def .form__row { padding: 0; } .form-def .form__row + .form__row { margin: 14px 0 0; } .form-def .form__row--first + .form__row { margin: 12px 0 0; } .form-def .form__row + .form__row--secondary { margin: 14px 0 0; } .form-def--primary .form__row-alt--primary { margin-left: -5px; margin-right: -5px; } .form-def--primary .form__row-alt + .form__row-alt { margin-top: 14px; } .form-def .form__row--first { padding-left: 105px; } .form-def .form__row--secondary { padding-left: 160px; } .form-def .form__row--secondary > label { position: absolute; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin: 0; } .form-def .form__row--secondary .field-alt { text-align: center; } .form-def .form__row--secondary .form__controls { max-width: 100%; } .form-def .form__row--teritary { padding-left: 120px; } .form-def .form__row--teritary > label { position: absolute; top: 10px; margin: 0; } .form-def .form__row--teritary .form__controls { max-width: 100%; } /* Form Def Primary */ .form-def--primary { max-width: 100%; } .form-def--primary .form__actions { margin: 16px 0 0; } .form-def--primary .form__actions .btn { display: block; font-size: 12px; width: 100%; } } /* ------------------------------------------------------------ *\ Number Fields \* ------------------------------------------------------------ */ .jsNumberField { padding: 0 30px; } /* ------------------------------------------------------------ *\ Gadget \* ------------------------------------------------------------ */ .gadget { border: 2px solid #0092c7; border-radius: 2px; max-width: 459px; padding: 22px 26px 13px; display: -webkit-box; display: -ms-flexbox; display: flex; } .gadget h3 { margin: 0; font-weight: 400; } .gadget h3 strong { font-weight: 400; text-transform: uppercase; } .gadget h3 span { display: block; } .gadget h3 span + span { margin-top: 2px; } .gadget h3 + h3 { margin-top: 12px; } .gadget .gadget__bar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 4px; margin-top: -2px; } .gadget .gadget__bar h3 { margin-left: 19px; text-transform: none; } .gadget .gadget__bar .bar-rating { pointer-events: none; } .gadget .gadget__link { text-decoration: underline; color: #0092C7; text-transform: none; font-size: 12px; font-weight: 700; } .gadget .gadget__link:hover { text-decoration: none; } .gadget .gadget__col { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; position: relative; } .gadget .gadget__col + .gadget__col { padding-left: 30px; } .gadget .gadget__col + .gadget__col:after { content: ''; position: absolute; top: 3px; bottom: 14px; left: 0; width: 2px; background: #003594; } @media (max-width: 1023px) { .gadget .gadget__col + .gadget__col { padding-left: 25px; } } @media (max-width: 767px) { .gadget { display: block; padding: 22px 26px 20px; } .gadget h3 strong { display: block; } .gadget h3 span { display: inline-block; } .gadget h3 span + span { margin: 0 0 0 17px; } .gadget .gadget__col { max-width: 100%; } .gadget .gadget__col + .gadget__col { border-top: 2px solid #003594; padding: 21px 0 0; margin: 16px 0 0; } .gadget .gadget__col + .gadget__col:after { display: none; } .gadget .gadget__bar { margin: 0 0 6px; } } /* ------------------------------------------------------------ *\ Gadget Primary \* ------------------------------------------------------------ */ .gadget-primary h2 { font-size: 16px; font-weight: 700; } .gadget-primary .gadget__title { border-bottom: 2px solid #003594; padding-bottom: 6px; margin: 0; position: relative; } .gadget-primary .gadget__title span { font-size: 12px; font-weight: 400; position: absolute; top: 5px; right: 0; } .gadget-primary .gadget__body { position: relative; margin: 28px 0 0; height: 45px;} .gadget-primary .gadget__body h1 { font-size: 72px; color: #003594; font-weight: 700; margin: 0; line-height: 1; } .gadget-primary .gadget__body-alt { margin: 29px 0 0; } .gadget-primary .gadget__actions { text-align: right; margin: 13px 0 0; } .gadget-primary .list-hints { text-align: right; margin: 50px 0 0; font-size: 12px; line-height: 1.33; color: #5D6F7B; } .gadget-primary .list-stars { margin: 36px 0 0; } @media (max-width: 1199px) { .gadget-primary .gadget__body { padding-left: 180px; } .gadget-primary .gadget__body h1 { font-size: 55px; } } @media (max-width: 1023px) { .gadget-primary .gadget__body { padding-left: 0; } .gadget-primary .gadget__body h1 { position: static; margin: 0 0 10px; } } @media (max-width: 767px) { .gadget-primary .gadget__body { margin: 22px 0 0; } .gadget-primary .gadget__body h1 { font-size: 72px; } .gadget-primary .list-hints br { display: none; } .gadget-primary .gadget__actions { text-align: center; margin: 19px 0 0; } } /*Partie "resultats" sur la fiche produit */ #resultsContainer { display: flex; width: 100%; } #resultsContainer span.result { font-size:50px; width: 55%; font-weight: 700; margin: 0; line-height: 1; } #resultsContainer ul { width: 45%; } /* ------------------------------------------------------------ *\ Icons \* ------------------------------------------------------------ */ [class^="ico-"] { display: inline-block; background-size: 100% 100%; background-position: 0 0; background-repeat: no-repeat; } .ico-search { background-image: url(../images/icons/ico-search.svg); width: 13px; height: 13px; } .ico-user { background-image: url(../images/icons/ico-user.svg); width: 11px; height: 14px; } .ico-cart { background-image: url(../images/icons/ico-cart.svg); width: 13px; height: 13px; } .ico-box { background-image: url(../images/icons/ico-box.svg); width: 51px; height: 47px; } .ico-products { background-image: url(../images/icons/ico-products.svg); width: 44px; height: 61px; } .ico-payments { background-image: url(../images/icons/ico-payments.svg); width: 52px; height: 40px; } .ico-mountain { background-image: url(../images/icons/ico-mountain.svg); width: 54px; height: 37px; } .ico-tel { background-image: url(../images/icons/ico-tel.svg); width: 32px; height: 32px; } .ico-angle-left { background-image: url(../images/icons/ico-angle-left.svg); width: 8px; height: 14px; } .ico-angle-left-small { background-image: url(../images/icons/ico-angle-left-small.svg); width: 5px; height: 8px; } .ico-angle-down { background-image: url(../images/icons/ico-angle-down.svg); width: 18px; height: 11px; } .ico-angle-down-dark { background-image: url(../images/icons/ico-angle-down-dark.svg); width: 9px; height: 5px; } .ico-angle-right { background-image: url(../images/icons/ico-angle-right.svg); width: 6px; height: 9px; } .ico-shapes { background-image: url(../images/icons/ico-shapes.png); width: 93px; height: 72px; } .ico-facebook { background-image: url(../images/icons/ico-facebook.svg); width: 15px; height: 15px; } .ico-instagram { background-image: url(../images/icons/ico-instagram.svg); width: 15px; height: 15px; } .ico-youtube { background-image: url(../images/icons/ico-youtube.svg); width: 15px; height: 10px; } .ico-planet { background-image: url(../images/icons/ico-planet.svg); width: 14px; height: 14px; margin-right: 8px; } .ico-planet-big { width: 36px; height: 36px; } .ico-mail { background-image: url(../images/icons/ico-mail.svg); width: 17px; height: 14px; } /*.ico-tel-small { background-image: url(../images/icons/ico-tel-small.svg); width: 18px; height: 18px; }*/ .ico-tel-small { background-image: url(../images/icons/ico-help-small.png); width: 20px; height: 20px; } .ico-question { background-image: url(../images/icons/ico-question.svg); width: 20px; height: 20px; } .ico-heart { background-image: url(../images/icons/ico-heart.svg); width: 16px; height: 15px; } .ico-heart-empty { background-image: url(../images/icons/ico-heart-empty1.svg); width: 16px; height: 15px; } .ico-gift { background-image: url(../images/icons/ico-gift.svg); width: 28px; height: 26px; } .ico-facebook-alt { background-image: url(../images/icons/ico-facebook-alt.svg); width: 21px; height: 21px; } .ico-google { background-image: url(../images/icons/ico-google.svg); width: 20px; height: 20px; } .ico-shape { background-image: url(../images/icons/ico-shape.svg); width: 16px; height: 11px; } .ico-eye { background-image: url(../images/icons/ico-eye.svg); width: 12px; height: 7px; } .ico-tel-alt { background-image: url(../images/icons/ico-tel-alt.svg); width: 22px; height: 22px; } .ico-gift-alt { background-image: url(../images/icons/ico-gift-alt.svg); width: 22px; height: 21px; } .ico-home { background-image: url(../images/icons/ico-home.svg); width: 22px; height: 22px; } .ico-pin { background-image: url(../images/icons/ico-pin.svg); width: 18px; height: 22px; } .ico-checked { background-image: url(../images/icons/ico-checked.svg); width: 23px; height: 23px; } .ico-minus { width: 9px; height: 2px; background: #2e2e2e; } .ico-hand { background-image: url(../images/icons/ico-hand.svg); width: 47px; height: 54px; } .ico-cart-blue { background-image: url(../images/icons/ico-cart-blue.svg); width: 25px; height: 18px; } .ico-barcode { background-image: url(../images/icons/ico-barcode.svg); width: 36px; height: 34px; } .ico-info { background-image: url(../images/icons/ico-info.svg); width: 18px; height: 18px; } .ico-info { background-image: url(../images/icons/ico-info.svg); width: 18px; height: 18px; } .ico-bill { background-image: url(../images/icons/ico-bill.svg); width: 32px; height: 37px; } .ico-angle-right-blue { background-image: url(../images/icons/ico-angle-right-blue.svg); width: 10px; height: 20px; } .ico-hand-alt { background-image: url(../images/icons/ico-hand-alt.svg); width: 42px; height: 29px; } .ico-package { background-image: url(../images/icons/ico-package.svg); width: 41px; height: 38px; } .ico-download { background-image: url(../images/icons/ico-download.svg); width: 35px; height: 33px; } .ico-mail-alt { background-image: url(../images/icons/ico-mail-alt.svg); width: 31px; height: 23px; } .ico-facebook-def { background-image: url(../images/icons/ico-facebook-def.svg); width: 21px; height: 21px; } .ico-copy { background-image: url(../images/icons/ico-copy.svg); width: 22px; height: 22px; } .ico-twitter-alt { background-image: url(../images/icons/ico-twitter.svg); width: 22px; height: 18px; } .ico-pipe { background-image: url(../images/icons/ico-pipe.svg); width: 16px; height: 16px; } .ico-calendar { background-image: url(../images/icons/ico-calendar-small.svg); width: 14px; height: 16px; } .ico-back { background-image: url(../images/icons/ico-back.svg); width: 9px; height: 15px; } @media (max-width: 767px) { .ico-search { width: 19px; height: 19px; } .ico-user { width: 13px; height: 17px; } .ico-cart { width: 18px; height: 18px; } .ico-angle-left { width: 4px; height: 7px; } .ico-angle-left-small { width: 8px; height: 14px; } .ico-tel-alt { width: 18px; height: 18px; } .ico-checked { width: 19px; height: 19px; } .ico-minus { width: 7px; height: 2px; } } /* ------------------------------------------------------------ *\ Ico X \* ------------------------------------------------------------ */ .ico-x { width: 23px; height: 23px; position: relative; } .ico-x:after, .ico-x:before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 2px; background: #262A39; } .ico-x:before { -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } .ico-x--alt { width: 15px; height: 15px; } .ico-x--alt:after, .ico-x--alt:before { background: #9B9B9B; } /* ------------------------------------------------------------ *\ Ico Plus \* ------------------------------------------------------------ */ .ico-plus { width: 8px; height: 8px; position: relative; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; -o-transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .ico-plus:after, .ico-plus:before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 2px; background: #fff; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; -o-transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .ico-plus:before { -webkit-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } /* Ico Plus Alt */ .ico-plus--alt { width: 20px; height: 20px; } .ico-plus--alt:after, .ico-plus--alt:before { height: 7px; background: #0192c7; } @media (max-width: 767px) { /* Ico Plus Alt */ .ico-plus--alt { width: 33px; height: 33px; } .ico-plus--alt:after, .ico-plus--alt:before { height: 12px; } } /* ------------------------------------------------------------ *\ Ico Circle \* ------------------------------------------------------------ */ .ico-circle { display: inline-block; width: 72px; height: 72px; background: #fff; position: relative; border-radius: 50%; } .ico-circle i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 767px) { .ico-circle { width: 58px; height: 58px; } } /* ------------------------------------------------------------ *\ Intro Alt \* ------------------------------------------------------------ */ .intro-alt { background: #81a2b5; color: #fff; margin-top: 22px; padding: 41px 0; } .intro-alt h1 { font-size: 22px; line-height: 1.27; margin: 0; text-transform: uppercase; } .intro-alt span { font-size: 22px; line-height: 1.27; margin: 0; text-transform: uppercase;font-weight: 600; } .intro-alt .shell { position: relative; } .intro-alt .breadcrumps { position: absolute; top: 4px; left: 20px; color: #fff; font-size: 12px; } .intro-alt .intro__content { max-width: 480px; margin-left: auto; } .intro-alt .intro__content p { font-size: 19px; line-height: 1.3; margin: -1px 0 0; } /* Intro Alt Pink */ .intro-alt--pink { background: #FB6581; padding: 29px 0; } .intro-alt--pink .breadcrumps { top: 15px; } /* Intro Alt White */ .intro-alt--white { background: #fff; padding: 37px 0; color: #1F2F4C; border-top: 2px solid #dfe6ec; margin: 0; } .intro-alt--white .breadcrumps { color: #1F2F4C; font-size: 12px; } .intro-alt--white .intro__content p { margin: 5px 0 0; } /* Intro Alt Small */ .intro-alt--small { padding: 36px 0 40px; } .intro-alt--small .intro__content { max-width: 470px; } .intro-alt--small h1 { line-height: 1.7; } /* Intro Alt Size1 */ .intro-alt--size1 { margin-top: 0; padding: 29px 0; } .intro-alt--size1 .breadcrumps { top: 16px; } /* Intro Alt Size2 */ .intro-alt--size2 { margin-top: 0; padding: 38px 0 33px; border-bottom: 2px solid #dfe6ec; } .intro-alt--size2 .intro__content { max-width: 470px; } .intro-alt--size2 h1 { line-height: 1.4; } .intro-alt--size2 .intro__content p { margin: 2px 0; line-height: 1.2; } /* Intro Alt Gray */ .intro-alt--gray { padding-bottom: 39px; background-color: #e6ecf0; color: #262a39; } .intro-alt--gray .breadcrumps { left: 22px; color: #262a39; } .intro-alt--gray h1 { margin-bottom: 7px; line-height: 1.7; } .intro-alt--gray .intro__content p { line-height: 1.25; } @media (max-width: 1439px) and (min-width: 1141px) { .intro-alt .breadcrumps, .section-search .section__head .breadcrumps { left: 10px; } } @media (max-width: 1023px) { .intro-alt .breadcrumps { position: static; } .intro-alt .intro__content { max-width: 100%; margin: 10px 0 0; } .intro-alt .intro__content br { display: none; } .intro-alt--small { padding-bottom: 20px; } .intro-alt--small h1 { font-size: 18px; } .intro-alt--small .intro__content { margin-top: 17px; } } @media (max-width: 767px) { .intro-alt { margin: -3px 0 0; padding: 20px 0; } .intro-alt h1 { text-align: left; font-size: 18px; line-height: 1.56; text-transform: none; } .intro-alt .shell { padding: 0 20px; } .intro-alt .breadcrumps { font-size: 10px; } .intro-alt .intro__content { text-align: center; } .intro-alt .intro__content p { text-align: left; font-size: 16px; } /* Intro Alt White */ .intro-alt--white { margin-top: 0; padding: 11px 0 39px; } .intro-alt--white .shell { padding: 0 10px; } .intro-alt--white .breadcrumps { font-size: 12px; } .intro-alt--white .breadcrumps + .intro__content { margin: 35px 0 0; } .intro-alt--white .intro__content p { line-height: 1.65; } .intro-alt--white .link-back { margin-top: 8px; } .intro-alt--white .link-back + .intro__content { margin: 14px 0 -4px; } .intro-alt--white .visible-mobile br { display: block; } .intro-alt--white .btn--size13 { margin: 35px 0 0; font-size: 12px; padding: 11px 10px; min-width: 300px; } /* Intro Alt White Def */ .intro-alt--white-def { padding: 11px 0 10px; } .intro-alt--white-def .intro__content p { font-size: 14px; margin: -3px 0 0; } .intro-alt--white-def .intro__content p + .btn { margin: 17px 0 0; font-size: 12px; padding: 11px 10px; min-width: 300px; } .intro-alt--white-def + .section-main { border: none; padding: 0; } /* Intro Alt Size1 */ .intro-alt--size1 { margin-top: 0; padding: 17px 0; } .intro-alt--size1 .breadcrumps { top: 16px; } .intro-alt--size1 .intro__content p { margin: 11px 0 0; font-size: 18px; line-height: 1.44; } /* Intro Alt Small */ .intro-alt--small { padding-bottom: 15px; } .intro-alt--small h1 { margin-bottom: 8px; text-transform: uppercase; } .intro-alt--small .breadcrumps + .intro__content { margin-top: 17px; } .intro-alt--small .intro__content p { font-size: 20px; line-height: 1.32; } /* Intro Alt Gray */ .intro-alt--gray { padding: 25px 0 18px; } .intro-alt--gray .breadcrumps { font-size: 12px; } } /* ------------------------------------------------------------ *\ Link \* ------------------------------------------------------------ */ .link { text-decoration: none; font-size: 23px; display: inline-block; position: relative; } .link:hover i { left: 5px; } .link i { margin-left: 12px; position: relative; left: 0; -webkit-transition: left .4s; -o-transition: left .4s; transition: left .4s; } /* ------------------------------------------------------------ *\ Link ALt \* ------------------------------------------------------------ */ .link-alt { font-size: 12px; font-weight: 500; text-transform: uppercase; display: inline-block; color: #0092C7; border-bottom: 1px solid #dfe6ec; text-decoration: none; -webkit-transition: color .4s, opacity .4s; -o-transition: color .4s, opacity .4s; transition: color .4s, opacity .4s; } .link-alt:hover { color: #0092C7; opacity: .7; } .link-alt--primary { font-size: 10.5px; color: #5F87A0; } .link-alt--secondary { font-size: 10.5px; color: #0094CC; letter-spacing: 0.04em; } /* ------------------------------------------------------------ *\ Link Secondary \* ------------------------------------------------------------ */ .link-secondary { position: relative; display: inline-block; padding-right: 20px; font-weight: 500; font-size: 12px; line-height: 1.25; color: #0092c7; text-transform: uppercase; text-decoration: none; } .link-secondary svg { position: absolute; top: 2px; right: 0; } .link-secondary:after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 2px; background: #d7e1e7; margin-top: 2px; -webkit-transition: background 0.3s; -o-transition: background 0.3s; transition: background 0.3s; } .link-secondary:hover:after { background: #0092c7; } /* ------------------------------------------------------------ *\ Link Product \* ------------------------------------------------------------ */ .link-product { position: relative; display: inline-block; padding-bottom: 5px; font-weight: 500; font-size: 12px; line-height: 1; color: #0092c7; text-decoration: none; text-transform: uppercase; } .link-product:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #d7e1e7; -webkit-transition: background 0.3s; -o-transition: background 0.3s; transition: background 0.3s; } .link-product:hover:after { background: #0092c7; } .link-product svg { width: 12px; height: 12px; margin-right: 2px; vertical-align: bottom; } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* ------------------------------------------------------------ *\ LIst Features \* ------------------------------------------------------------ */ .list-features { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -8px -16px; color: #fff; text-align: center; } .list-features li { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; padding: 0 8px 16px; } .list-features li > a { padding-top: 100%; position: relative; display: block; border-radius: 50%; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .list-features li > a:hover { opacity: .7; } .list-features h3 { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 22px; font-weight: 300; text-transform: uppercase; } .list-features h3 span { font-size: 8px; display: block; font-weight: 500; margin-bottom: 3px; } /* List Features Primary */ .list-features--primary { padding-right: 80px; } @media (max-width: 1023px) { .list-features--primary { padding-right: 0; } } @media (max-width: 767px) { .list-features { margin: 0 -5px -10px; } .list-features li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 5px 10px; } .list-features h3 { font-size: 24px; margin-top: 2px; } .list-features h3 span { font-size: 10px; margin: 0; } } /* ------------------------------------------------------------ *\ List Features Primary \* ------------------------------------------------------------ */ .list-features-primary { font-size: 15px; } .list-features-primary li { position: relative; } .list-features-primary li > i { position: absolute; top: 50%; left: 10px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .list-features-primary li .btn { position: absolute; top: 50%; right: -80px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); min-width: 270px; padding: 10px 10px; } .list-features-primary li + li { margin: 56px 0 0; } .list-features-primary p { margin: 0; padding-left: 31px; position: relative; } .list-features-primary p > i { position: absolute; top: 50%; left: 10px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 1439px) { .list-features-primary li { padding-right: 300px; } .list-features-primary li .btn { right: 0; } } @media (max-width: 1023px) { .list-features-primary li { padding-right: 0; } .list-features-primary li .btn { position: static; display: block; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); max-width: 250px; margin: 20px 0 0; } } @media (max-width: 767px) { .list-features-primary p { padding-left: 50px; } .list-features-primary p > i { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; } .list-features-primary li .btn { margin: 33px 0 0 2px; } .list-features-primary li + li { margin: 38px 0 0; } .list-features-primary .ico-cart-blue { width: 38px; height: 34px; } } /* ------------------------------------------------------------ *\ List Contacts \* ------------------------------------------------------------ */ .list-contacts { font-size: 11px; font-weight: 400; } .list-contacts li { border-top: 1px solid #DEE6EB; padding: 11px 0; } .list-contacts p { display: inline-block; position: relative; padding-left: 53px; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .list-contacts a:hover { opacity: .7; } .list-contacts p i { position: absolute; top: 50%; left: 23px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 3px; } .list-contacts p img { position: absolute; top: 50%; left: 23px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 3px; width: 20px; } .list-contacts a span { font-weight: 400; } /* ------------------------------------------------------------ *\ List Steps \* ------------------------------------------------------------ */ .list-steps { line-height: 1.25; } .list-steps h2 { font-size: 18px; margin-bottom: 16px; padding-left: 20px; } .list-steps li { position: relative; } .list-steps li:after { content: ''; position: absolute; top: 2px; left: 0; width: 2px; height: 14px; background: #003594; } .list-steps li + li { margin: 28px 0 0; } /* ------------------------------------------------------------ *\ List Infos \* ------------------------------------------------------------ */ .list-infos li strong { font-weight: 700; } .list-infos li + li { margin: 5px 0 0; } #resultsContainer .list-infos { width: 100%; } #results-widget { display: flex; flex-direction: column; } #resultsContainer { flex: 1;} /* ------------------------------------------------------------ *\ List stars \* ------------------------------------------------------------ */ .list-stars h3 { position: relative; text-transform: uppercase; font-weight: 400; margin-bottom: 9px; } .list-stars h3 > span { position: absolute; top: 0; right: 0; text-transform: none; font-size: 12px; font-weight: 400; } .list-stars h3 > span .bar-rating { display: inline-block; margin-left: 24px; pointer-events: none; } .list-stars > li + li { margin-top: 17px; padding-top: 33px; border-top: 2px solid #dfe6ec; } .list-stars > li:last-child { border-bottom: 2px solid #dfe6ec; padding-bottom: 18px; } @media (max-width: 767px) { .list-stars h3 > span { text-align: right; top: -20px; } .list-stars h3 > span .bar-rating { display: block; margin: 3px 0 0; } } /* ------------------------------------------------------------ *\ List Checkboxes \* ------------------------------------------------------------ */ .list-checkboxes li + li { margin: 12px 0 0; } .list-checkboxes--primary li + li { margin: 19px 0 0; } .list-checkboxes--secondary li + li { margin: 20px 0 0; } @media (max-width: 767px) { .list-checkboxes--secondary li + li { margin: 21px 0 0; } } /* ------------------------------------------------------------ *\ List Actions \* ------------------------------------------------------------ */ .list-actions li + li { margin: 8px 0 0; } /* ------------------------------------------------------------ *\ List Services \* ------------------------------------------------------------ */ .list-services { font-size: 12px; line-height: 1.17; } .list-services li { position: relative; padding-left: 40px; } .list-services li + li { margin: 27px 0 0; } .list-services .btn-circle { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 1023px) { .list-services br { display: none; } } @media (max-width: 767px) { .list-services .ico-cart { width: 13px; height: 13px; } } /* ------------------------------------------------------------ *\ List Radios \* ------------------------------------------------------------ */ .list-radios li { display: inline-block; } .list-radios li + li { margin-left: 20px; } @media (max-width: 767px) { .list-radios li + li { margin-left: 32px; } } /* ------------------------------------------------------------ *\ List Radios Primary \* ------------------------------------------------------------ */ .list-radios-primary { padding-bottom: 20px; } .list-radios-primary li + li { margin: 38px 0 0; padding: 44px 0 0; border-top: 1px solid #D7E1E7; } @media (max-width: 767px) { .list-radios-primary { padding-bottom: 24px; } .list-radios-primary li + li { margin: 53px 0 0; padding: 32px 0 0; } } /* ------------------------------------------------------------ *\ List Radios Secondary \* ------------------------------------------------------------ */ .list-radios-secondary li { position: relative; display: inline-block; } .list-radios-secondary li + li { margin-left: 7px; padding-left: 38px; } .list-radios-secondary li + li:after { content: 'OU'; position: absolute; top: 12px; left: 0; font-size: 15px; font-weight: 400; color: #9B9B9B; text-transform: uppercase; } /* List Radios Secondary Alt */ .list-radios-secondary--alt li + li { padding-left: 0; margin-left: 26px; } .list-radios-secondary--alt li + li:after { display: none; } @media (max-width: 767px) { .list-radios-secondary li { width: calc(100% / 3); } } /* ------------------------------------------------------------ *\ List Prices \* ------------------------------------------------------------ */ .list-prices { margin: 0; } .list-prices li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .list-prices li + li { margin: 21px 0 0; } .list-prices h3 { font-size: 15px; color: #262A39; text-transform: uppercase; font-weight: 400; margin: 0; } .list-prices h3 strong { font-weight: 500; } .list-prices h4 { font-size: 14px; font-weight: 700; margin: 0; text-transform: uppercase; } @media (max-width: 767px) { .list-prices li + li { margin: 10px 0 0; } } /* ------------------------------------------------------------ *\ List Total \* ------------------------------------------------------------ */ .list-total h3 { display: inline-block; min-width: 130px; text-transform: uppercase; margin: 0; } .list-total h3 span { font-weight: 400; } .list-total h3 strong { font-weight: 500; } .list-total h3 + h3 { padding-right: 15px; } .list-total li + li { margin: 8px 0 0; } @media (max-width: 767px) { .list-total li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-left: 12px; } .list-total h3 { text-align: left; } .list-total h3 + h3 { padding-right: 33px; text-align: right; } .list-total li + li { margin: 13px 0 0; } } /* ------------------------------------------------------------ *\ List Details \* ------------------------------------------------------------ */ .list-details { font-size: 12px; color: #777; } .list-details li + li { margin: 10px 0 0; } /* ------------------------------------------------------------ *\ List Links \* ------------------------------------------------------------ */ .list-links li { display: inline-block; } .list-links li + li { margin-left: 16px; } .list-links a { display: inline-block; text-decoration: none; color: #fff; font-size: 12px; font-weight: 700; position: relative; text-align: center; padding: 13px 10px 11px 30px; min-width: 127px; text-transform: uppercase; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .list-links a:hover { opacity: .7; } .list-links a i { position: absolute; top: 50%; left: 10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 1023px) { .list-links { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -8px -16px; } .list-links a { display: block; } .list-links li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 8px 16px; } .list-links li + li { margin-left: 0; } } /* ------------------------------------------------------------ *\ List Actions \* ------------------------------------------------------------ */ .list-actions { font-size: 12px; text-transform: uppercase; } .list-actions a { text-decoration: none; /*display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;*/ } .list-actions a i { /*margin-right: 25px; position: relative; top: 9px;*/ } .list-actions li { /*display: inline-block;*/ } .list-actions li + li { /*margin-left: 72px;*/ } @media (max-width: 1199px) { .list-actions li + li { margin-left: 50px; } } @media (max-width: 1023px) { .list-actions li { display: block; } .list-actions li + li { margin: 10px 0 0; } } @media (max-width: 767px) { .list-actions a { position: relative; padding-left: 25px; } .list-actions a i { position: absolute; top: 50%; left: 10px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .list-actions li + li { margin-top: 21px; } } /* ------------------------------------------------------------ *\ List Adresses \* ------------------------------------------------------------ */ .list-adresses { border: 2px solid #dfe6ec; max-width: 636px; } .list-adresses p { font-size: 15px; line-height: 1.15; margin: 0; } .list-adresses p strong { font-weight: 700; } .list-adresses > li { position: relative; padding: 17px 23px 20px; } .list-adresses li ul { list-style: none; position: absolute; top: 25px; right: 25px; text-align: right; } .list-adresses li ul li + li { margin: 10px 0 0; } .list-adresses > li + li { border-top: 2px solid #dfe6ec; } .list-adresses .link-alt { font-size: 11px; } .list-adresses .modification_address label, #form_new_address label { float: left; width: 35%; padding: 10px; } #form_new_address { border: 2px solid #dfe6ec; max-width: 636px; } #form_new_address .form__body{ padding: 30px; } .list-adresses .modification_address .form__controls, #form_new_address .form__controls { float: left; width: 60%; } .list-adresses .modification_address .form__body>input, .list-adresses .modification_address .form__body>.hidden_id, .list-adresses .modification_address .form__body>.form__row, #form_new_address .form__body>input, #form_new_address .form__body>.hidden_id, #form_new_address .form__body>.form__row { clear: left; float: none; } .list-adresses .modification_address .form__body .form__action, #form_new_address .form__body .form__action { margin-top: 55px; text-align: center; } @media (max-width: 767px) { .list-adresses > li { padding: 16px 12px 20px; } .list-adresses li ul { top: 24px; right: 21px; } .list-adresses .link-alt { font-size: 11px; } } /* ------------------------------------------------------------ *\ List Payments \* ------------------------------------------------------------ */ .list-payments { border: 2px solid #dfe6ec; max-width: 636px; font-size: 12px; } .list-payments p { font-weight: 700; } .list-payments p img { margin-right: 10px; } .list-payments p span { color: #0092C7; } .list-payments ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .list-payments ul li:nth-child(1) { width: 56%; } .list-payments ul li:nth-child(3) { margin-left: auto; text-align: right; } .list-payments > li { padding: 23px 13px; } .list-payments > li + li { border-top: 2px solid #dfe6ec; } .list-payments .btn-remove-alt { display: none; } .list-payments .link-alt { font-size: 11px; margin-right: 9px; } @media (max-width: 767px) { .list-payments p { font-size: 13px; } .list-payments p img { max-width: 29px; margin-right: 6px; } .list-payments > li { padding: 19px 7px 19px 29px; position: relative; } .list-payments ul { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .list-payments ul li:nth-child(1) { width: 75%; } .list-payments ul li:nth-child(2) p { font-size: 12px; } .list-payments ul li:nth-child(3) { display: none; } .list-payments .btn-remove-alt { display: block; position: absolute; top: 50%; left: 7px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .list-payments .btn-remove-alt .ico-x { width: 13px; height: 13px; opacity: .5; } } /* ------------------------------------------------------------ *\ List Engagements \* ------------------------------------------------------------ */ .list-engagements { counter-reset: engagement-counter; } .list-engagements li { position: relative; padding-left: 160px; counter-increment: engagement-counter; } .list-engagements li:before { content: counter(engagement-counter); position: absolute; top: 0; left: 0; font-weight: bold; font-size: 18px; color: #0092c7; } .list-engagements li + li { margin-top: 80px; } .list-engagements h2 { margin-bottom: 20px; font-size: 18px; } .list-engagements p { font-size: 20px; line-height: 1.7; } @media (max-width: 767px) { .list-engagements li { padding-left: 30px; } } /* ------------------------------------------------------------ *\ List Motto \* ------------------------------------------------------------ */ .list-motto li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .list-motto li + li { margin-top: 47px; } .list-motto span { -webkit-box-flex: 0; -ms-flex: 0 0 30%; flex: 0 0 30%; max-width: 30%; margin-bottom: 0; font-weight: 300; font-size: 28px; } .list-motto span:after { content: '...'; display: inline-block; margin-left: 3px; font-weight: 300; letter-spacing: 0.15em; } .list-motto p { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } @media (max-width: 1023px) { .list-motto li { display: block; } .list-motto span { max-width: 100%; margin-bottom: 5px; } } @media (max-width: 767px) { .list-motto li + li { margin-top: 25px; } .list-motto span { margin-bottom: 6px; font-size: 24px; } } /* ------------------------------------------------------------ *\ Listing \* ------------------------------------------------------------ */ .listings { margin: 0 -30px; } .listing { width: 25%; padding: 0 30px 19px; } .listing--padding1 { padding-left: 33px; } .listing--padding2 { padding-left: 37px; } .listing--padding3 { padding-left: 40px; } .listing h2 { margin-bottom: 15px; font-size: 18px; } .listing ul { margin-bottom: 55px; list-style: none; } .listing li { position: relative; padding-left: 15px; } .listing li + li { margin-top: 0; } .listing li:before { content: ''; position: absolute; top: 7px; left: 1px; width: 5px; height: 5px; background: #0092c7; border-radius: 50%; } .listing ul a { text-decoration: none; -webkit-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; } .listing ul a:hover { color: #0092c7; } @media (max-width: 1160px){ .listings { margin: 0; } .listing { padding: 0 0 19px; } } @media (max-width: 1023px) { .listing { width: 33.33%; padding: 0 10px 19px; } } @media (max-width: 767px) { .listing { width: 100%; padding: 0 0 73px; } .listing ul { margin-bottom: 0; } } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo { display: inline-block; /*background: url(../images/logo.svg) no-repeat 0 0;*/ background-size: 100% 100%; width: 108px; height: 38px; -webkit-transition: width .4s, height .4s, margin-top .4s; -o-transition: width .4s, height .4s, margin-top .4s; transition: width .4s, height .4s, margin-top .4s; } .logo a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .logo-paypal { display: inline-block; background: url(../images/temp/logo-paypal.png) no-repeat 0 0; width: 33px; height: 32px; background-size: 100% 100%; } .logo-visa { display: inline-block; background: url(../images/temp/visa.png) no-repeat 0 0; width: 42px; height: 30px; background-size: 100% 100%; } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav { font-size: 12px; text-transform: uppercase; font-weight: 400; } .nav > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .nav > ul > li > a { text-decoration: none; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .nav > ul > li > a:hover { color: #0092C7; } .nav > ul > li + li { margin-left: 28px; } .nav .active > a { color: #0092C7; } .nav .dropdown { position: fixed; top: 102px; left: 0; width: 100%; height: calc(100vh - 102px); background: #81a2b5; z-index: 20; padding-top: 69px; opacity: 0; visibility: hidden; -webkit-transition: opacity .4s, visibility .4s; -o-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; } .nav .dropdown:before { content: attr(data-text); position: absolute; top: 126px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); opacity: .15; color: #fff; font-size: 140px; font-weight: 700; pointer-events: none; } .nav .dropdown.visible-dropdown { opacity: 1; visibility: visible; } .nav .dropdown .dropdown__btn { position: absolute; top: -75px; right: 100px; } .nav .dropdown .dropdown__col > h3 { font-weight: 400; margin-bottom: 29px; color: #fff; } .nav .dropdown .dropdown__col > ul a { text-decoration: none; font-size: 10px; line-height: 1.2; font-weight: 500; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .nav .dropdown .dropdown__col > ul a:hover { color: #fff; } .nav .dropdown .dropdown__col > ul li + li { margin: 12px 0 0; } .nav .dropdown .dropdown__col--size1 { -webkit-box-flex: 0; -ms-flex: 0 0 25.5%; flex: 0 0 25.5%; padding-right: 10px; } .nav .dropdown .dropdown__col--size2 { -webkit-box-flex: 0; -ms-flex: 0 0 17%; flex: 0 0 17%; padding-right: 10px; } .nav .dropdown .dropdown__col--size3 { -webkit-box-flex: 0; -ms-flex: 0 0 32%; flex: 0 0 32%; } .nav .dropdown .dropdown__cols { display: -webkit-box; display: -ms-flexbox; display: flex; } .nav .dropdown .dropdown__foot { position: relative; height: 80px; margin: 25px 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 10px 25px 10px 36px; } .nav .dropdown .dropdown__foot h3 { position: relative; z-index: 10; color: #fff; font-size: 15px; margin: 0; } .nav .dropdown .dropdown__foot .btn { position: relative; z-index: 10; font-size: 11px; min-width: 266px; padding: 12px 10px; } .nav .dropdown .dropdown__foot-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .nav .dropdown { overflow-y: auto; padding-bottom: 20px; } @media (max-width: 1023px) { .nav { font-size: 9px !important; } .nav > ul > li + li { margin-left: 16px; } } @media (max-width: 767px) { .nav { font-size: 16px !important; font-weight: 500; } .nav > ul { display: block; } .nav > ul > li + li { margin: 24px 0 0; } .nav .dropdown { padding-top: 60px; left: 0; top: 97px; height: 100vh; } .nav .dropdown:before { font-size: 86px; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(-90deg); -ms-transform: translate(-50%, -50%) rotate(-90deg); transform: translate(-50%, -50%) rotate(-90deg); width: 100vh; text-align: center; } .nav .dropdown .dropdown__btn { top: 20px; right: 10px; } .nav .dropdown .dropdown__foot { display: none; } .nav .dropdown .dropdown__cols { display: block; padding-bottom: 200px; } .nav .dropdown .dropdown__col + .dropdown__col { margin: 30px 0 0; } .nav .dropdown .dropdown__col > h3 { margin-bottom: 15px; } .nav .dropdown .dropdown__col--size3 { display: none !important; } } /* ------------------------------------------------------------ *\ Nav Secondary \* ------------------------------------------------------------ */ .nav-secondary { font-size: 10px; font-weight: 500; color: #5F87A0; text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .nav-secondary a { text-decoration: none; } .nav-secondary > ul { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; } .nav-secondary > ul > li { position: relative; padding: 0.9em 1em 0.9em 0; } .nav-secondary > ul > li > a { -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .nav-secondary > ul > li > a:hover { color: #0092C7; } .nav-secondary > ul > li + li { margin-left: 12px; padding-left: 13px; } .nav-secondary > ul > li + li.visible-mobile { margin-left: 0; padding-left: 0; } .nav-secondary > ul > li + li:after { content: ''; position: absolute; bottom: 0; left: 0; width: 2px; height: 30px; background: #dfe6ec; } .nav-secondary .nav__link { display: inline-block; position: relative; padding-left: 8px; } .nav-secondary .nav__link:after { content: ''; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: #0098c7; } .nav-secondary .alt { -webkit-transition: opacity .4s, visibility .4s; -o-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; } .nav-secondary .dropdown-alt { position: absolute; top: 100%; right: -3px; width: 226px; background: #fff; z-index: 20; -webkit-box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .3); box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .3); margin-top: 7px; padding: 15px 10px 5px; opacity: 0; visibility: hidden; -webkit-transition: opacity .4s, visibility .4s; -o-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; } .nav-secondary .dropdown-alt:after { content: ''; position: absolute; bottom: 100%; right: 20px; width: 0; height: 0; border-style: solid; border-width: 0 4px 4px 4px; border-color: transparent transparent #ffffff transparent; } .nav-secondary .dropdown-alt .dropdown__title { font-weight: 600; line-height: 1.58; text-align: center; margin-bottom: 13px; } .nav-secondary .dropdown-alt.visible-dropdown { opacity: 1; visibility: visible; } .nav-secondary .dropdown-alt--primary { width: 262px; padding: 15px 15px 15px; } .nav-secondary .dropdown-alt--primary:after { display: none; } /* Nav Secondary Alt */ .nav-secondary--alt > ul > li { padding: 0; } .nav-secondary--alt > ul > li > a { -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .nav-secondary--alt > ul > li > a:hover { opacity: .7; } .nav-secondary--alt > ul > li + li { padding-left: 0; margin-left: 16px; } .nav-secondary--alt > ul > li + li:after { display: none; } @media (max-width: 767px) { .nav-secondary { display: block; } .nav-secondary:first-child { padding: 0 18px; } .nav-secondary > ul { display: -webkit-box; display: -ms-flexbox; } .nav-secondary > ul > li { padding: 0 0 8px; -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; } .nav-secondary > ul > li + li { margin-left: 0; padding-left: 0; } .nav-secondary > ul > li + li:after { height: 32px; } .nav-secondary .nav__link { padding-left: 8px; } .nav-secondary .nav__link:after { width: 4px; height: 4px; } /* Nav Secondary Alt */ .nav-secondary--alt > ul > li { padding: 0; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .nav-secondary--alt > ul > li + li { margin-left: 18px; } } @media (max-width:767px) and (min-width:330px) { .nav-secondary > ul { display: flex; justify-content: space-evenly; width: 100%; } } /* ------------------------------------------------------------ *\ Nav Teritary \* ------------------------------------------------------------ */ .nav-teritary { text-transform: uppercase; font-size: 12px; color: #252F48; } .nav-teritary a { text-decoration: none; display: inline-block; position: relative; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .nav-teritary a:after { content: ''; position: absolute; top: 50%; left: -25px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 15px; height: 2px; background: #0092C7; margin-top: -2px; opacity: 0; visibility: hidden; -webkit-transition: opacity .4s, visibility .4s; -o-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; } .nav-teritary a:hover { color: #0092C7; } .nav-teritary a i { position: absolute; top: 50%; right: -20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; -o-transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .nav-teritary li + li { margin-top: 15px; } .nav-teritary ul ul { color: #004073; text-transform: none; padding: 16px 0 29px 17px; display: none; } .nav-teritary ul ul a:after { left: -42px; } .nav-teritary ul ul .active-alt { font-weight: 500; } .nav-teritary ul ul li + li { margin-top: 9px; } .nav-teritary .active-alt { color: #0092C7; font-weight: 700; } .nav-teritary .active-alt a:after { opacity: 1; visibility: visible; } .nav-teritary .active { color: #0092C7; font-weight: 700; } .nav-teritary .disabled { color: #5D6F7B; } .nav-teritary .open a i { -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .nav-teritary .open ul { display: block; } @media (max-width: 1199px) { .nav-teritary a:after { width: 7px; left: -10px; } .nav-teritary ul ul a:after { left: -12px; } } @media (max-width: 767px) { .nav-teritary { font-size: 18px; } .nav-teritary a { text-transform: none; display: block; font-weight: 700; } .nav-teritary a:hover { color: inherit; } .nav-teritary a:after { left: 10px; display: none; } .nav-teritary a i { right: 12px; width: 14px; height: 7px; } .nav-teritary ul ul { padding: 1px 0 38px 24px; } .nav-teritary ul ul a { font-weight: 400; } .nav-teritary ul ul li + li { margin: 28px 0 0; } .nav-teritary > ul > li { background: #E9F5FA; } .nav-teritary > ul > li > a { padding: 28px 25px; } .nav-teritary > ul > li + li { margin-top: 10px; } .nav-teritary .active { color: #232A3D; } .nav-teritary .expanded a i { -webkit-transform: translateY(-50%) rotate(0deg); -ms-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } .nav-teritary .expanded ul { display: none; } .nav-teritary .open a i { -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } } /* ------------------------------------------------------------ *\ Nav Trigger \* ------------------------------------------------------------ */ .nav-trigger { display: none; margin: 10px 11px 0 16px; font-size: 12px; line-height: 1.17; text-transform: uppercase; text-decoration: none; } @media (max-width: 1023px) { .nav-trigger { display: block; } } /* ------------------------------------------------------------ *\ Popup Alt \* ------------------------------------------------------------ */ .popup-alt { position: absolute; top: 35px; right: 0; width: 232px; background: #fff; text-align: center; z-index: 100; -webkit-box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .3); box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .3); padding: 17px 20px 22px; } .popup-alt p { font-size: 12px; line-height: 1.58; color: #6A8495; margin: 7px 0 0; } .popup-alt .btn { margin: 18px 0 0; font-size: 12px; font-weight: 500; min-width: 0; width: 100%; padding: 9px 10px; } /* ------------------------------------------------------------ *\ Popup \* ------------------------------------------------------------ */ .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(95, 135, 160, 0.7); opacity: 0; visibility: hidden; -webkit-transition: opacity .4s, visibility .4s; -o-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; z-index: 500; overflow-y: auto; } .popup .popup__btn { -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .popup .popup__btn:hover { opacity: .7; } .popup .popup__inner { width: 683px; background: #fff; margin: 100px auto; } .popup .popup__head { text-align: right; padding: 10px 10px; position: relative; } .popup .popup__head span { font-size: 16px; font-weight: 500; margin: 0; } .popup .popup__head--gray { background: #E9F5FA; } .popup .popup__head--primary { text-align: center; padding: 30px 10px; } .popup .popup__head--primary .popup__btn { position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .popup .popup__head--secondary { padding: 31px 30px; } .popup.visible-popup { opacity: 1; visibility: visible; } /* Popup Size1 */ .popup--size1 .popup__btn { position: absolute; top: 19px; right: 21px; } .popup--size1 .popup__inner { width: 550px; position: relative; } /* Popup Text */ .popup--text .popup__body { padding: 40px 40px; } /* Popup Image */ .popup__inner .product__image img { max-width: 125px !important; max-height: 230px; } @media (max-width: 767px) { .popup .popup__head { padding: 9px 10px 0; } .popup .popup__head--primary { margin: 0 -10px; padding: 10px 10px; } .popup .popup__head--primary .popup__btn { right: 10px; top: 10px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .popup .popup__head--secondary { padding: 7px 0 0; } .popup .popup__inner { min-width: unset; max-width: unset; width: 100%; margin: 0; height: 100%; overflow-y: auto; padding: 0 10px; } .popup .popup__body { margin-bottom:18px; } /* Popup Primary */ .popup--primary .product__entry { min-height: 91px; } /* Popup Secondary */ .popup--secondary .product-secondary { padding-bottom: 20px; } /* Popup Size1 */ .popup--size1 .form { padding-bottom: 90px; } .popup--size1 .popup__btn { top: 10px; right: 10px; } .popup--text { padding-top: 20%; } .popup--text .popup__inner { height: auto; } } /* ------------------------------------------------------------ *\ Products \* ------------------------------------------------------------ */ .products { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -30px -22px; } .products .product-container { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; padding: 0 30px; margin-bottom: 22px; position: relative; } /*.products .product-container:hover { cursor: pointer }*/ /*.products .product-container:nth-child(3n + 3):after { content: ''; position: absolute; bottom: -2px; right: 30px; width: calc(300% - 60px); height: 2px; background: #dfe6ec; }*/ .products--checkbox { margin: 0; } .products--checkbox .product { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; margin: 0; } .products-head { border-bottom: 2px solid #0092C7; padding-bottom: 4px; margin-bottom: 26px; } .products-head h4 { font-size: 16px; font-weight: 700; } .products--secondary { margin: 0 -106px -22px -45px; } @media (max-width: 1023px) { .products { margin: 0 -15px -22px; } .products .product-container { padding: 0 15px; } /* Products Secondary */ .products--secondary { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } } @media (max-width: 767px) { .products-outer .products { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .products { margin: 0 -5px; } .products .product-container { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 5px; margin-bottom: 0; } .products .product-container:nth-child(3n + 3):after { display: none; } /* Products Secondary */ .products--secondary { -ms-flex-wrap: nowrap; flex-wrap: nowrap; padding-left: 77px; margin-right: -300px; overflow: auto; width: calc(100vw - 10px); } .products--secondary .product-container { max-width: 155px; min-width: 155px; } .products--secondary .product-container + .product-container { margin-left: 32px; } } /* ------------------------------------------------------------ *\ Product \* ------------------------------------------------------------ */ .product { text-align: center; max-width: 192px; margin: auto; } .product .product__image { min-height: 350px; position: relative; margin-bottom: -16px; -webkit-transition: -webkit-transform 0.5s ease-out; transition: -webkit-transform 0.5s ease-out; -o-transition: transform 0.5s ease-out; transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out; z-index: 10;} .product .product__image img{ margin: auto; position: absolute; max-height: 315px; margin-bottom: 30px; left: 0; right: 0; bottom: 0; max-width: 75%; } .product .product__image .product__actions { position: absolute; bottom: 32px; left: 0; width: 100%; opacity: 0; visibility: hidden; -webkit-transition: opacity .4s, visibility .4s; -o-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; } .product .product__image-bg.new { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 143px); } .product .product__image-bg { position: absolute; top: 0; left: 0; width: 100%; height: 309px; } .product .product__actions .btn { display: block; width: 130px; min-width: 0; margin: auto; letter-spacing: 0.07em; } .product .product__actions .btn + .btn { margin-top: 4px; } .product .product__body { position: relative; padding: 0 10px 79px; -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transform: translateY(0) !important; } /*.slider__slide .product .product__body { height: 160px;}*/ .product .product__body:after { content: ''; position: absolute; bottom: 0; top: 100%; left: 0; width: 100%; z-index: -1; -webkit-transition: top 0.5s ease-out; -o-transition: top 0.5s ease-out; transition: top 0.5s ease-out; background: rgba(0, 146, 199, 0.1); } #gamme_liste .product .product__body { padding: 0;} #gamme_liste .product .product__body p { color: rgb(93, 111, 123); } #gamme_liste .product .product__body span { font-weight: 300; text-transform: none; } #gamme_liste .product .product__body:after { background: none; } #gamme_liste .product--primary .product__body h2 { margin: 10px 0; } #gamme_liste .product--primary .product__image { height: initial; min-height: 0; } #gamme_liste .products .product-container { padding: 10px; margin-bottom: 0; } #gamme_liste .gamme_container { width: 220px; height: 200px; } #gamme_liste a { text-decoration: none; display: block; margin: 0 auto; text-align: center; max-width: 13.75rem; } #gamme_liste img { width: 150px; position: absolute; top: 23%; left: 18%; bottom: initial; right: initial; } @media (max-width: 767px) { #gamme_liste img { top: -9px; left: 20%; } } #gamme_liste .gamme_container { width:220px; height: 220px; } #gamme_liste #beforeImg, #gamme_liste-homepage .beforeImg { border-radius: 50%; height: 176px; width: 176px; position: relative; margin: 0 auto; } #gamme_liste-homepage .beforeImg { margin: 0 auto 10px; height: 140px; width: 140px; } #gamme_liste-homepage img { max-height: 147px; } #gamme_liste-homepage .product__image { padding-top: 20px; } .product .product__body h3 { text-transform: uppercase; margin-bottom: 6px; } .product .product__body h4 { text-transform: uppercase; margin-bottom: 17px; min-height: 26px; } .product .product__body p { font-size: 10px; color: #5d6f7b; } .product .product__body--size1 { min-height: 195px; } .product .product__label { position: absolute; top: 80px; left: 0; background: #fff; font-size: 12px; font-weight: 500; padding: 8px 10px 7px 31px; text-transform: uppercase; z-index: 10; } .product .product__price { display: block; font-size: 13px; font-weight: 500; color: #0092C7; margin-bottom: 8px; } .product .product__price span { font-size: 8px; display: block; } .product .product__price em { font-style: normal; font-weight: 400; position: relative; } .product .product__price em:after, .product-secondary .product__bar h2 em:after, .price_pdt em:after, #dropdown-cart .product-small .product__price em:after, .product-secondary .product__bar > span em:after, #sidecart .product__price em:after { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(-20deg); -ms-transform: translate(-50%, -50%) rotate(-20deg); transform: translate(-50%, -50%) rotate(-20deg); width: 50px; height: 1px; background: #FB6581; } .product .product__price strong { font-weight: 500; color: #FB6581; padding-left: 4px; } .product .product__body-foot { position: absolute; left: 0; width: 100%; } .product .product__body-foot img { margin: auto; } /* Product Primary */ .product--primary { max-width: 100%; } .product--primary .product__image { padding-top: 53px; margin-bottom: -19px; height: 363px;} /*.product--primary .product__image img { left: 28px; }*/ .product--primary .product__body h2 { font-size: 14px; margin-bottom: 7px; } .product--primary .product__body h3 { font-size: 12px; margin-bottom: 17px; min-height: 30px; } .product--primary .product__body p { font-size: 12px; color: #5d6f7b;} .product .product__body-foot { bottom: 21px; } @media (max-width: 767px) { .product .product__body-foot { bottom: 21px; } .product--primary .product__body-foot { bottom: 21px; } } /* Product Primary Alt */ /*.product--primary-alt .product__image img { left: 21px; }*/ .product--primary-alt .product__body { min-height: 193px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .product--primary-alt .product__body h4 { min-height: 20px; } .product--primary-alt .product__price { margin-bottom: 14px; } .product--primary-alt .product__body-foot { bottom: 34px; } .product--primary-alt .bar-rating { pointer-events: none; } /* Product Checkbox */ .product--checkbox { max-width: 100%; } /* Product Image */ .product--checkbox img{ position: initial } .product--checkbox:hover .product__checkbox { background: #fff; } .product--checkbox:hover .product__image { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .product--checkbox > input { display: none; } .product--checkbox > input:checked + label .product__body:after { top: -100px; } .product--checkbox > input:checked + label .product__checkbox { background: #fff; } .product--checkbox > input:checked + label .product__checkbox:after { opacity: 1; visibility: visible; } .product--checkbox > label { display: block; } .product--checkbox .product__image { margin: 0 0 46px; } .product--checkbox .product__image img { left: 0; } .product--checkbox .product__body { min-height: 124px; padding-bottom: 50px; } .product--checkbox .product__body h3 { font-size: 15px; } .product--checkbox .product__body h4 { font-size: 12px; line-height: 1.17; font-weight: 400; margin: 0; } .product--checkbox .product__body .product__price { margin: 23px 0 0; font-size: 18px; font-weight: 700; } .product--checkbox .product__body .product__price { position: absolute; bottom: 50px; left: 0; width: 100%; } .product--checkbox .product__body-alt { min-height: 171px; } .product--checkbox .product__body--primary { padding-bottom: 95px; min-height: 165px; } .product--checkbox .product__checkbox { width: 19px; height: 19px; background: #E9F5FA; position: absolute; bottom: 14px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; } .product--checkbox .product__checkbox:after { content: ''; position: absolute; top: 2px; left: 1px; background: url(../images/temp/ico-check.svg) no-repeat 0 0; width: 20px; height: 14px; background-size: 100% 100%; opacity: 0; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .product:hover .product__image .product__actions { opacity: 1; visibility: visible; } .product:hover .product__body:after { top: -126px; } .product:hover .product__image { -webkit-transform: translateY(-7px); -ms-transform: translateY(-7px); transform: translateY(-7px); } /* Product Secondary */ .product--secondary .product__image { margin: 0 -19px -16px; } .product--secondary .product__body { margin: 0 -20px; padding-bottom: 87px; left: -9px; } /*.product--secondary .product__body:after { display: none; }*/ .product--secondary .product__body h3 { font-size: 14px; line-height: 1.29; } .product--secondary .product__body h4 { font-size: 12px; line-height: 1.33; margin-bottom: 22px; } .product--secondary .product__body p { font-size: 12px; } .product--secondary .product__image .product__actions { left: -10px; } .product--secondary .product__body--alt { min-height: 199px; } .product--secondary .product__body--alt .product__body-foot { bottom: 0; } .product--secondary .product__body-foot .link-alt { margin-top: 24px; } @media(min-width: 1199px){ .product--checkbox:hover .product__checkbox { background: #fff; } .product--checkbox:hover .product__image { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /* Tablet Portrait */ @media (max-width: 1023px) { /* Product Secondary */ .product--secondary .product__body { margin: 0 -10px; left: 0; } .product--secondary .product__image .product__actions { left: 0; } .products-outer .product--secondary .product__actions { bottom: -6px; } .products-outer .product--secondary .product__image { -webkit-transition: .6s; -o-transition: .6s; transition: .6s; } .products-outer .product--secondary:hover .product__image { -webkit-transform: translateY(-20%); -ms-transform: translateY(-20%); transform: translateY(-20%); } } @media (max-width: 767px) { .product .product__image { padding: 0 20px; margin-bottom: 0; } .product .product__image img { left: 0; max-height: 217px;} .product .product__image .product__actions { bottom: -27px; } .product .product__image-bg { height: calc(100% - 144px); background-size: cover; } .product .product__body { margin-bottom: 0; min-height: 134px; } .product .product__body h3 { margin: 0 0 9px; } .product .product__body h4 { padding: 0 20px; font-size: 12px; line-height: 1.33; } .product .product__body p { font-size: 12px; } /*.product .product__body-foot { bottom: -20px; }*/ /*.product .product__body-foot .product__price { display: none; }*/ .product { max-width: 225px; } /* Product Primary */ .product--primary .product__image { padding-top: 53px; margin-bottom: -19px; } /*.product--primary .product__image img { left: 24px; }*/ .product--primary .product__image .product__actions { bottom: 27px; } .product--primary .product__body { padding-bottom: 63px; } .product--primary .product__body h3 { margin: 0 0 7px; } .product--primary .product__price { margin-bottom: 16px; } .product .product__price { margin-bottom: 0; } .product--primary .product__body-foot .product__price { display: block; } /* Product Primary Alt */ .product--primary-alt .product__image-bg { height: calc(100% - 103px); } .product--primary-alt .product__image { padding-top: 6px; min-height: 287px; } .product--primary-alt .product__image img { left: 11px; max-width: 92px } .product--primary-alt .product__image .product__actions { bottom: 27px; } .product--primary-alt .product__label { font-size: 10px; top: 20px; padding: 5px 8px 3px 8px; } .product--primary-alt .product__image--short img { top: 27px; } .product--primary-alt .product__body { min-height: 172px; } .product--primary-alt .product__body br { display: none; } .product--primary-alt .product__body h3 { font-size: 12px; } .product--primary-alt .product__body h4 { font-size: 12px; line-height: 1.17; padding: 0; } .product--primary-alt .product__body-foot { bottom: 21px; } .product--primary-alt .product__price { margin: 0 0 6px; } /* Product Checkbox */ .product--checkbox .product__image { margin-bottom: 46px; } .product--checkbox .product__image img { left: 0; } .product--checkbox .product__body { min-height: 124px; } .product--checkbox .product__body h3 { margin: 0 0 6px; } .product--checkbox .product__body h4 { padding: 0 10px; } .product--checkbox .product__body .product__price { margin: 21px 0 0; } .product--checkbox .product__body--alt { min-height: 172px; } /* Product Secondary */ .product--secondary .product__image { padding: 0 13px; margin-bottom: -16px; } .product--secondary .product__image .product__actions { bottom: 20px; } .product--secondary .product__body { padding-bottom: 0; } .product--secondary .product__body h3 { font-size: 12px; line-height: 1.33; } .product--secondary .product__body h4 { font-size: 12px; line-height: 1.33; font-weight: 500; padding: 0; margin-bottom: 15px; } .product--secondary .product__body p { margin-bottom: 6px; } .product--secondary .product__body .product__price { margin-bottom: 16px; } .product--secondary .product__body-foot .link-alt { margin-top: 15px; } .product--secondary .product__body-foot { position: static; } .products-outer .product--secondary .product__actions { bottom: -6px; } .products-outer .product--secondary:hover .product__image { padding-bottom: 14px; } } /* ------------------------------------------------------------ *\ Product Alt \* ------------------------------------------------------------ */ .product-alt { text-align: center; } .product-alt .product__image { margin-bottom: 6px; } .product-alt .product__image img { margin: auto; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .product-alt .product__image a:hover img { opacity: .7; } .product-alt .product__body h3 { text-transform: uppercase; font-size: 11px; margin-bottom: 10px; } .product-alt .product__body h3 a { text-decoration: none; } .product-alt .product__body p { font-size: 10px; } @media (max-width: 767px) { .product-alt .product__image { margin-bottom: 24px; } .product-alt .product__body h3 { margin: 0 5px; font-size: 12px; line-height: 1.33; } .product-alt .product__body p { display: none; } } /* ------------------------------------------------------------ *\ Products Primary \* ------------------------------------------------------------ */ .products-primary { margin-top: -6px; } /* ------------------------------------------------------------ *\ Product Primary \* ------------------------------------------------------------ */ .product-primary { border-bottom: 2px solid #0092C7; position: relative; padding-left: 163px; padding-bottom: 22px; min-height: 171px; } .product-primary h3 { font-size: 14px; line-height: 1.29; font-weight: 500; margin-bottom: 8px; } .product-primary h4 { font-size: 12px; line-height: 1.33; margin-bottom: 12px; font-weight: 500; } .product-primary .product__label { background: #fff; display: inline-block; text-transform: uppercase; font-size: 10px; font-weight: 500; padding: 4px 8px; margin-bottom: 12px; } .product-primary .product__image { position: absolute; top: -24px; left: 26px; } .product-primary .product__price { display: inline-block; font-size: 12px; font-weight: 500; } .product-primary + .product-primary { margin-top: 29px; } .primary--purple { border-color: #5873B1; } /* ------------------------------------------------------------ *\ Products Secondary \* ------------------------------------------------------------ */ .products-secondary .products__bar { background: #e7ecf0; color: #5F87A0; text-align: right; padding: 29px 40px; margin-top: 4px; } .products-secondary .products__bar p { font-size: 18px; } .products-secondary .products__bar p strong { font-weight: 700; } .products-secondary .products__foot { text-align: right; padding-right: 42px; margin-top: 27px; } .products-secondary .products__foot .form-code { margin-left: auto; margin-top: 15px; } .products-secondary .products__actions { margin-top: 20px; } .products-secondary .products__actions p { display: inline-block; margin: 0 10px 0 0; vertical-align: middle; font-size: 13px; font-weight: 700; color: #5F87A0; text-transform: uppercase; } .products-secondary .products__actions .btn { vertical-align: middle; } @media (max-width: 1023px) { .products-secondary .products__foot { padding-right: 0; } } @media (max-width: 767px) { .products-secondary .products__bar { margin-top: -5px; text-align: left; padding: 15px 54px 15px 19px; } .products-secondary .products__bar p { font-size: 14px; line-height: 1.14; } .products-secondary .products__foot { margin-top: 24px; } .products-secondary .products__foot .form-code { margin-top: 30px; } .products-secondary .products__actions { text-align: center; margin: 28px 40px 0; } .products-secondary .products__actions p { margin: 0 0 16px; } } /* ------------------------------------------------------------ *\ Product Secondary \* ------------------------------------------------------------ */ .product-secondary { position: relative; padding: 23px 20px 31px 193px; } .product-secondary .product__btn { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .product-secondary .product__btn:hover { opacity: .7; } .product-secondary .product__image { position: absolute; left: 32px; height: 250px; display: flex; align-items: center; margin-top: -15px; bottom: 15px;} .product-secondary .product__entry { margin-bottom: 38px; } .product-secondary .product__entry h2 { font-size: 16px; margin-bottom: 10px; text-transform: uppercase; } .product-secondary .product__entry h3 { font-weight: 400; text-transform: uppercase; } .product-secondary .product__bar { position: relative; margin-bottom: 42px; } .product-secondary .product__bar h2 { position: absolute; top: 0; right: 0; width: 200px; font-size: 32px; color: #029CCE; font-weight: 700; } .product-secondary .product__bar h2 strong { font-size: 14px; text-transform: uppercase; color: #2B3041; display: block; margin: -3px 0 0; } .product-secondary .product__bar h2 span { font-weight: 400; display: block; margin: -3px 0 0; text-transform: none; } .product-secondary .product__bar--primary { margin-bottom: 26px; } .product-secondary .bar-points { margin-bottom: 13px; margin-right: -30px; } /*.product-secondary .product__qty span { font-size: 12px; color: #9B9B9B; font-weight: 500; margin: 0; min-width: 85px; position: relative; top: 2px; }*/ .product-secondary .product__qty span { background: none; border: none; margin: 0; text-align: center; padding: 0; color: #0092C7; font-weight: 500; font-size: 16px; height: auto; line-height: 1; padding-bottom: 6px; } .product-secondary .product__qty-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .product-secondary .product__qty-row + .product__qty-row { margin: 8px 0 0; } .product-secondary .product__actions .btn + .btn { margin-left: 8px; } .product-secondary .product__qty .product__qty-row>span { font-size: 12px; color: #9B9B9B; font-weight: 500; margin: 0; min-width: 85px; position: relative; top: 2px; text-align: left; } .product-secondary .product__actions + .link-alt { margin-top: 18px; margin-bottom: 10px; } /* Product Secondary Alt */ .product-secondary--alt { padding: 39px 20px 48px 193px; } .product-secondary--alt .product__entry { margin-bottom: 30px; } .product-secondary--alt .product__bar { margin-bottom: 32px; } .product-secondary--alt .product__bar h2 { top: -25px; } .product-secondary--alt .product__qty-row + .product__qty-row { margin: 8px 0 0; } /* Product Secondary Def */ .product-secondary--def { padding: 0 30px 74px 200px; } .product-secondary--def .product__image { top: -54px; } .product-secondary--def .product__entry { margin-bottom: 46px; } .product-secondary--def .product__entry h1 { font-size: 26px; text-transform: uppercase; margin-bottom: 10px; } .product-secondary .product__bar>span { position: absolute; top: -8px; right: 0; width: 200px; font-size: 32px; color: #029CCE; font-weight: 700; } @media (max-width: 1023px){ .product-secondary--big .product__bar>span, .product-secondary--single .product__bar>span{ position: static; } .visible-mobile .product__body .product__bar{ text-align: center !important; } } .product-secondary .product__bar span strong { font-size: 14px; text-transform: uppercase; color: #2B3041; display: block; margin: -3px 0 0; } .product-secondary .product__bar>span span { font-weight: 400; display: block; margin: -3px 0 0; text-transform: none; } @media (max-width: 767px){ .product-secondary .product__bar span strong { margin: 0; line-height: 25px; } } .product-secondary--def .product__entry h3 { font-size: 15px; line-height: 1.13; font-weight: 400; margin-bottom: 10px; } .product-secondary--def .product__entry h3 span { font-size: 25px; font-weight: 700; } /* Product Secondary Single */ .product-secondary--single { padding: 0 44px 0 0; margin-left: 4px; } .product-secondary--single .product__qty-row + .product__qty-row { margin: 17px 0 0; } .product-secondary--single .product__actions .btn + .link-alt { margin-left: 3%; } /* Product Secondary Big */ .product-secondary--big { padding: 46px 20px 31px 171px; } .product-secondary--big .product__image { top: 20px; margin-bottom: 38px; position: absolute; left: 32px; height: 250px; display: flex; align-items: center; margin-top: -45px; bottom: 15px; width: 115px; } .product-secondary--big .product__entry { margin: 0; } .product-secondary--big .product__entry h3 { font-size: 16px; font-weight: 700; text-transform: uppercase; width: 55%;} .product-secondary--big .product__entry h3 span { font-size: 12px; font-weight: 400; display: block; margin: 8px 0 0; } .product-secondary--big .product__entry .product__link { text-transform: uppercase; display: inline-block; text-decoration: underline; font-size: 12px; font-weight: 700; margin-bottom: 11px; border: none; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .product-secondary--big .product__entry .product__link:hover { opacity: .7; } .product-secondary--big .product__entry .link-alt { font-weight: 500; } .product-secondary--big .product__bar { position: absolute; top: 46px; right: 0; width: 430px; margin: 0; } .product-secondary--big .product__bar h2, .product-secondary--big .product__qty-row + .product__qty-row { margin: 17px 0 0; } /* Product Secondary Order */ .product-secondary--order { padding: 0; } .product-secondary--order .product__inner { position: relative; padding: 44px 20px 22px 150px; min-height: 185px; } .product-secondary--order .product__entry { margin: 0; width:70% } .product-secondary--order .product__entry h3 { margin: 0; } .product-secondary--order .product__entry h3 + .link-alt { margin: 21px 0 0; } .product-secondary--order .product__title { font-size: 15px; font-weight: 700; margin: 20px 0 11px 20px; } .product-secondary--order .product__image { left: 73px; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: -6px; width: 70px; } .product-secondary--order .product__image img { width: 50%; } .product-secondary--order + .product-secondary--order { border-top: 2px solid #D7E1E7; } .product-secondary--order + .product-secondary--order .product__inner { padding-top: 57px; } @media (max-width: 1199px) { .product-secondary .product__bar h2 { width: 160px; } /* Product Secondary Big */ .product-secondary--big .product__bar { width: 380px; } .product-secondary--big .product__entry { padding-right: 400px; width: initial;} } @media (max-width: 1023px) { .product-secondary .bar-points { margin-right: 0; } /* Product Secondary Single */ .product-secondary--single { padding: 0; margin-left: 0; } /* Product Secondary Big */ .product-secondary--big .product__entry { padding-right: 180px; } .product-secondary--big .product__bar { width: 177px; } .product-secondary--big .product__bar h2 { position: static; } } @media (max-width: 767px) { .product-secondary { padding: 0; text-align: center; } .product-secondary .product__image { position: static; max-width: 58px; margin: 0 auto; } .product-secondary .product__image img { max-height: 109px; } .product-secondary .product__entry { padding: 0 20px; margin-bottom: 15px; } .product-secondary .product__entry h2 { font-size: 15px; margin-bottom: 8px; } .product-secondary .product__entry h3 { font-size: 11px; } .product-secondary .product__bar { margin-bottom: 20px; } .product-secondary .product__bar h2 { position: static; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: left; width: 100%; font-size: 30px; margin-bottom: 5px; } .product-secondary .product__bar h2 strong { margin-left: 20px; } .product-secondary .product__qty-row { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .product-secondary .product__qty-row + .product__qty-row { margin-top: 10px; } .product-secondary .product__actions .btn { width: 100%; min-width: 0; } .product-secondary .product__actions .btn#addToCartBtn { margin-top: 17px; } .product-secondary .product__actions .btn + .btn { margin: 17px 0 0; } .product-secondary .product__actions + .link-alt { margin-top: 23px; margin-bottom: 8px; } .product-secondary .bar-points { margin-bottom: 20px; } /* Product Secondary Alt */ .product-secondary--alt .product__bar { margin-bottom: 20px; } .product-secondary--alt .product__qty-row + .product__qty-row { margin: 6px 0 0; } /* Product Secondary Def */ .product-secondary--def { padding: 0 30px 74px 76px; text-align: left; } .product-secondary--def .product__image { position: absolute; margin: 0; left: 10px; top: -14px; } .product-secondary--def .product__entry { padding: 0; margin: 0 0 39px; } .product-secondary--def .product__entry h1 { font-size: 15px; margin-bottom: 7px; } .product-secondary--def .product__entry h3 { font-size: 15px; line-height: 1.47; text-transform: none; } .product-secondary--def .product__entry h3 br { display: none; } .product-secondary--def .product__entry h3 span { font-size: 15px; } .product-secondary--def .form-contact { margin-left: -66px; margin-right: -40px; } /* Product Secondary Big */ .product-secondary--big { text-align: left; padding: 30px 45px 30px 52px; } .product-secondary--big .product__image { position: absolute; top: 50%; left: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); max-width: 28px; margin: 0; max-height: 109px; } .product-secondary--big .product__entry { padding-right: 0; margin: 0; width: 71%;} .product-secondary--big .product__entry br { display: none; } .product-secondary--big .product__entry h3 { font-size: 10px; margin: 0; width: 100%; } .product-secondary--big .product__entry h3 span { font-size: 10px; margin: 6px 0 0; } .product-secondary--big .product__entry .product__link { display: none; } .product-secondary--big .product__bar { width: 177px; margin: 0; text-align: right; padding-right: 0; } .product-secondary--big .product__bar h2 { position: static; font-size: 11px; font-weight: 700; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); margin: 0; display: block; text-align: right; } .product-secondary--big .product__qty { display: none; } /* Product Secondary Order */ .product-secondary--order .product__title { font-size: 12px; margin: 9px 0 11px 8px; text-align: left; } .product-secondary--order .product__image { position: absolute; max-width: 32px; left: 34px; margin-top: -7px; } .product-secondary--order .product__inner { padding: 10px 20px 22px 67px; min-height: 0; } .product-secondary--order .product__entry { text-align: left; margin: 0; padding: 0; } .product-secondary--order .product__entry h2 { font-size: 13px; margin-bottom: 2px; } .product-secondary--order .product__entry h3 { font-size: 12px; } .product-secondary--order .product__entry h3 + .link-alt { margin: 9px 0 0; } .product-secondary--order + .product-secondary--order .product__inner { padding-top: 15px; padding-bottom: 14px; } } /* ------------------------------------------------------------ *\ Products Small \* ------------------------------------------------------------ */ .products-small .products__foot { background: #eaf5fb; margin-top: 9px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 12px 17px 12px 6px; } .products-small .products__foot h5 { font-size: 9px; font-weight: 700; margin: 0; color: #262A39; text-transform: none; } .products-small .products__foot h3 { font-size: 14px; font-weight: 700; color: #0092C7; } .products-small .products__foot-alt { padding: 28px 38px 0 33px; } .products-small .products__foot-alt p { font-size: 14px; margin: 20px 0 0; } .products-small .products__foot-alt p i { vertical-align: middle; margin-right: 6px; } /* Products Small */ .products-small--primary .products__body { border-bottom: 2px solid #D7E1E7; padding-bottom: 18px; } @media (max-width: 1023px) { .products-small .products__foot-alt p { position: relative; padding-left: 30px; } .products-small .products__foot-alt p i { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } @media (max-width: 767px) { .products-small .products__foot-alt { padding: 20px 20px 0; } .products-small .products__foot-alt p { padding-left: 26px; margin: 17px -10px 0 0; } } /* ------------------------------------------------------------ *\ Product Small \* ------------------------------------------------------------ */ .product-small { border-top: 1px solid #D7E1E7; padding: 26px 0 26px 71px; position: relative; } .product-small .product__btn { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .product-small .product__image { position: absolute; top: 50%; left: 23px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 41px; } .product-small .product__entry { position: relative; color: #262A39; padding-right: 20px; } .product-small .product__entry h4 { font-weight: 700; margin: 0 0 10px; line-height: 13px;} .product-small .product__entry h4 span { font-weight: 400; display: block; } .product-small .product__price { font-size: 10px; font-weight: 700; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* Product Small Primary */ .product-small--primary { border-top: none; padding: 18px 0 18px 79px; } .product-small--primary .product__image { width: 79px; } .product-small--primary .product__entry h4 { text-transform: uppercase; line-height: 1.1; width: 80%; } .product-small--primary .product__entry h4 span { margin: 3px 0 0; } .product-small--primary .product__price { right: 43px; } .product-small--primary + .product-small--primary { margin-top: 17px; } /* Product Small Secondary */ .product-small--secondary { border-top: none; padding: 21px 0 21px 78px; } .product-small--secondary .product__image { left: 29px; } .product-small--secondary .product__entry h4 { text-transform: uppercase; line-height: 1.1; } .product-small--secondary .product__entry h4 span { margin: 6px 0 0; } .product-small--secondary + .product-small--secondary { margin-top: 21px; padding-top: 45px; padding-bottom: 36px; border-top: 1px solid #E1E1E1; } /* Product Small Teritary */ .product-small--teritary { border: none; padding: 51px 85px 51px 260px; min-height: 388px; } .product-small--teritary .product__image { left: 73px; margin-top: -10px; } .product-small--teritary .product__entry { padding-right: 0; } .product-small--teritary .product__entry h2 { text-transform: uppercase; margin-bottom: 7px; } .product-small--teritary .product__entry p { font-size: 20px; line-height: 1.3; margin: 0; } .product-small--teritary .product__entry h6 { font-size: 16px; font-weight: 700; color: #029CCE; } .product-small--teritary .product__entry h6 a { text-decoration: none; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .product-small--teritary .product__entry h6 a:hover { opacity: .7; } .product-small--teritary .product__entry p + .btn { margin: 25px 0 0; } .product-small--teritary .product__entry p + h6 { margin: 30px 0 0; } .product-small--teritary .product__entry .list-actions { margin-bottom: 16px; } .product-small--teritary .product__entry h6 a, .product-small--teritary .product__entry .list-actions a { pointer-events: none; } @media (max-width: 1023px) { /* Product Small Teritary */ .product-small--teritary { padding: 51px 0 51px 170px; } .product-small--teritary .product__image { left: 40px; } } @media (max-width: 767px) { .product-small--secondary + .product-small--secondary { margin-top: 10px; } /* Product Small Teritary */ .product-small--teritary { padding: 20px 0; } .product-small--teritary .product__image { position: static; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); margin-left: 15px; } .product-small--teritary .product__entry { margin: 30px 0 0; } .product-small--teritary .product__entry h2 { font-size: 22px; margin-bottom: 23px; } .product-small--teritary .product__entry p { font-size: 16px; line-height: 1.63; padding-left: 2px; } .product-small--teritary .product__entry p + .btn { margin: 23px 0 0; } .product-small--teritary .product__entry .list-actions { margin-bottom: 31px; } } /* ------------------------------------------------------------ *\ Search \* ------------------------------------------------------------ */ .search { margin-right: 10px; width: 44px; } .search .search__btn { position: absolute; opacity: 0; visibility: hidden; } .search .search__field { border-radius: 0; border: none; background: none; font-size: 9px; color: #6A92AA; width: 100%; } /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ .section { padding: 69px 0 50px; } .section .section__head { text-align: center; margin-bottom: 30px; } .section .section__head h2 { margin: 0; } .section .section__head p { margin: 15px 0 0; font-size: 14px; } .section .section__head--small h2 { font-size: 18px; } .section .section__head--alt h2 { font-size: 20px; } .section .section__head--primary { text-align: left; } .section .section__head--primary h2 { font-size: 14px; font-weight: 400; text-transform: uppercase; } .section .section__head--blue { color: #0092C7; } .section .section__actions { text-align: center; margin: 21px 0 0; } .section .section__actions h3 { font-size: 12.5px; text-transform: uppercase; margin-bottom: 17px; } .section .section__actions h3 span { font-weight: 400; } .section .section__actions .link-alt + .link-alt { margin-left: 50px; } .section .section__bar { text-align: center; background: #eaf5fb; padding: 12px; margin-bottom: 13px; } .section .section__bar h3 { font-weight: 400; } .section .feature-alt + .form { margin-top: 26px; } /* Section Gray */ .section--gray { background: #E9F5FA; } /* Section Primary */ .section--primary { padding: 31px 0; } .section--primary .section__actions { margin: 25px 0 0; } /* Section Secondary */ .section--secondary { padding: 83px 0 60px; } .section--secondary .section__head { margin-bottom: 50px; } /* Section Teritary */ .section--teritary { padding: 42px 0 67px; } .section--teritary .section__head { margin-bottom: 60px; } /* Section Quaternary */ .section--quaternary { padding: 43px 0 31px; } .section--quaternary .section__head { margin-bottom: 65px; } .section--quaternary .section__actions { margin: 34px 0 0; } /* Section Articles */ .section--articles { padding: 47px 0 30px; } .section--articles .section__head { margin-bottom: 63px; } .section--articles .section__actions { margin-top: 52px; } /* Section Senary */ .section--senary { padding: 56px 0 31px; } .section--senary .section__head { margin-bottom: 106px; } .section--senary .section__head p { font-weight: 500; font-size: 15px; line-height: 1.33; margin: 11px 0 0; } .section--senary .section__actions { margin: 53px 0 0; } /* Section Septenary */ .section--septenary { border-top: 1px solid #dfe6ec; padding: 56px 0 36px; } .section--septenary .section__head { margin-bottom: 40px; } /* Section Size1 */ .section--size1 { padding: 82px 0 22px; } .section--size1 .section__head { margin-bottom: 45px; } /* Section Size2 */ .section--size2 { padding: 39px 0 70px; } .section--size2 .section__actions { margin: 35px 0 0; } /* Section Size3 */ .section--size3 { padding: 41px 0 53px; } .section--size3 .section__head { margin-bottom: 33px; } /* Section Size4 */ .section--size4 { padding: 50px 0 97px; } .section--size4 .section__head { margin-bottom: 40px; } .section--size4 .section__actions { margin: 73px 0 0; } /* Section Size5 */ .section--size5 { padding: 37px 0 33px; } .section--size5 .table-alt { margin: 0 21px 0 25px; } .section--size5 .articles + .widget-teritary { margin-top: 77px; } .section--size5 .widget-teritary + .table-alt { margin-top: 49px; } /* Section Size6 */ .section--size6 { max-width: 1500px; margin: 0 auto; padding: 35px 10px 0; } @media (max-width: 1420px) { .section--size6 { max-width: 1140px; margin: 0 auto; padding: 37px 10px 0; } } @media (max-width: 767px) { .section { padding: 69px 0 20px; } .section .section__head { margin-bottom: 10px; } .section .section__actions { margin: 35px 0 0; } .section .section__actions .link-alt + .link-alt { margin-left: 34px; } .section .section__bar { padding: 14px; margin-bottom: 10px; } .section .feature-alt + .form { margin-top: 37px; } /* Section Primary */ .section--primary { padding: 30px 0; } .section--primary .section__head { margin-bottom: 30px; } .section--primary .section__actions { margin: 26px 4px 0; } .section--primary .section__actions h3 { margin-bottom: 23px; } /* Section Secondary */ .section--secondary { padding: 50px 0 18px; } .section--secondary .section__head { margin-bottom: 50px; } /* Section Teritary */ .section--teritary { padding: 30px 0; } .section--teritary .section__head { margin-bottom: 31px; } .section--teritary .section__head h2 { font-size: 20px; } /* Section Quaternary */ .section--quaternary { padding: 34px 0 24px; } .section--quaternary .section__head { margin-bottom: 40px; } .section--quaternary .section__head h2 { font-size: 20px; } .section--quaternary .section__actions { margin: 52px 0 0; } /* Section Articles */ .section--articles { padding: 43px 0 21px; } .section--articles .section__head { margin-bottom: 46px; } .section--articles .section__actions { margin-top: 14px; } /* Section Senary */ .section--senary { padding: 39px 0 31px; } .section--senary .section__head { margin-bottom: 21px; } .section--senary .section__head h2 { font-size: 20px; } .section--senary .section__head p { line-height: 1.35; } .section--senary .section__actions { margin: 34px 0 0; } /* Section Size1 */ .section--size1 .section__head { margin-bottom: 30px; } /* Section Size2 */ .section--size2 { padding: 35px 0 38px; } .section--size2 .section__actions { margin: 13px 0 0; } /* Section Size3 */ .section--size3 { padding: 35px 0 29px; } .section--size3 .section__head { margin-bottom: 33px; } /* Section Size4 */ .section--size4 { padding: 34px 0 77px; } .section--size4 .section__head { margin-bottom: 30px; } .section--size4 .section__actions { margin: 47px 0 0; } /* Section Septenary */ .section--septenary { padding: 20px 0 10px; } .section--septenary .section__head { margin-bottom: 17px; } .section--septenary + .section { padding: 54px 0 22px; } /* Section Size5 */ .section--size5 { padding: 18px 0 72px; } .section--size5 .articles + .widget-teritary { margin-top: 63px; } .section--size5 .widget-teritary + .table-alt { margin-top: 36px; } .section--size5 .table-alt { margin: 0; } } /* ------------------------------------------------------------ *\ Section Product \* ------------------------------------------------------------ */ .section-product { border-top: 1px solid #dfe6ec; border-bottom: 1px solid #dfe6ec; } .section-product .shell { position: relative; } .section-product .breadcrumps { position: absolute; top: 66px; } .section-product ul { list-style: none; } .section-product .bullet-list ul { list-style: initial; margin-left: 15px; } @media (max-width: 1439px) { .section-product .breadcrumps { left: 10px; z-index: 2; } } @media (max-width: 1023px) { .section-product .breadcrumps { max-width: 400px; } } @media (max-width: 767px) { .section-product { padding: 20px 0 40px; } .section-product .breadcrumps { max-width: 100%; position: static; margin-bottom: 4px; } } /* ------------------------------------------------------------ *\ Section Alt \* ------------------------------------------------------------ */ .section-alt { padding: 40px 0 10px; } .section-alt .section__head { text-align: center; margin-bottom: 53px; } .section-alt .section__head h2 { font-size: 16px; } .section-alt .section__title { border-bottom: 2px solid #0092C7; padding-bottom: 5px; max-width: 725px; margin: auto; } /* Section Alt Primary */ .section-alt--primary { padding: 0 0 66px; } .section-alt--primary .section__head { margin-bottom: 30px; } @media (max-width: 767px) { .section-alt { padding: 42px 0 10px; } .section-alt .section__head { text-align: left; margin-bottom: 0; } /* Section Alt Primary */ .section-alt--primary { padding: 30px 0 49px; } .section-alt--primary .section__head { margin-bottom: 30px; } } /* ------------------------------------------------------------ *\ Section Card \* ------------------------------------------------------------ */ .section-card { border-top: 1px solid #D7E1E7; padding: 59px 0 19px; } .section-card .section__head { border-bottom: 2px solid #D7E1E7; padding-bottom: 24px; position: relative; } .section-card img { max-height: 155px; max-width: 115px; margin: 0 auto; } .section-card .section__head h2 { font-size: 20px; margin: 0; text-transform: uppercase; padding-left: 16px; } .section-card .section__head h2 span { display: block; font-size: 18px; font-weight: 400; text-transform: none; margin: 5px 0 0; } .section-card .section__head .section__link { position: absolute; top: 5px; right: 42px; font-size: 13px; } .section-card .section__body--alt { border: 2px solid #D7E1E7; padding: 33px 0 24px; } .section-card .section__foot { text-align: right; } .section-card .section__foot h3 { font-size: 14px; font-weight: 700; padding-right: 43px; text-transform: uppercase; margin-bottom: 27px; } .section-card .section__foot h3 span { font-size: 25px; padding-left: 32px; position: relative; top: 3px; } .section-card .section__group + .section__group { margin-top: 48px; } .section-card .section__group + .section__group--secondary { margin-top: 91px; } .section-card .section__group + .section__group--teritary { margin-top: 84px; } .section-card .section__group--primary .section__head { padding-bottom: 30px; margin-bottom: 30px; } .section-card .section__group--secondary .section__head { padding-bottom: 0; margin-bottom: 25px; border: none; } .section-card .section__group--teritary .section__head { padding-bottom: 27px; margin-bottom: 18px; } @media (max-width: 767px) { .section-card { padding: 24px 0 49px; } .section-card .section__head { padding-bottom: 18px; } .section-card .section__head h2 { padding-left: 0; font-size: 18px; } .section-card .section__head h2 span { font-size: 16px; } .section-card .section__head .section__link { font-size: 11px; right: 0; top: 3px; } .section-card .section__body--alt { border: none; padding: 0; } .section-card .section__foot { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: inherit; flex-direction: column; } .section-card .section__foot h3 { font-size: 12px; padding: 0; margin: 0 10px 0 0; white-space: nowrap; } .section-card .section__foot h3 span { font-size: 20px; padding-left: 12px; } .section-card .section__foot .btn { min-width: 134px; font-size: 12px; margin-top: 10px; } .section-card .section__group + .section__group { margin-top: 62px; } .section-card .section__group + .section__group--secondary { margin-top: -27px; } .section-card .section__group + .section__group--teritary { margin-top: 47px; } .section-card .section__group--primary .section__head { text-align: center; margin-bottom: 37px; } .section-card .section__group--primary .section__head h2 { font-size: 20px; } .section-card .section__group--secondary .section__head { text-align: center; margin-bottom: 18px; } .section-card .section__group--teritary .section__foot { border-top: 2px solid #D7E1E7; padding-top: 15px; } .section-card .section__head .section__link { position: relative; top: -5px; } .section-card .section__head .link-alt.section__link { border-bottom: none; } } /* ------------------------------------------------------------ *\ Section Primary \* ------------------------------------------------------------ */ .section-primary { border-top: 1px solid #D7E1E7; padding: 67px 0 19px; min-height: 582px; } @media (max-width: 767px) { .section-primary { padding: 14px 0 76px; min-height: 0; } } /* ------------------------------------------------------------ *\ Section Contact \* ------------------------------------------------------------ */ .section-contact { border-top: 1px solid #dfe6ec; padding: 109px 0 41px; } .section-contact .form { position: relative; top: -16px; } .section-contact .form + .widget-primary { margin: 63px 0 25px; } .section-contact .cols { margin: 0 -50px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .section-contact .col { padding: 0 50px; position: relative; } .section-contact .col + .col:after { content: ''; position: absolute; top: -65px; bottom: -20px; left: -6px; width: 2px; background: #dfe6ec; } .section-contact .section__foot { margin: 47px 0 0; font-size: 11px; line-height: 1.45; color: #5D6F7B; padding-left: 6px; } /* Section Contact Primary */ .section-contact--primary { padding: 74px 0 117px; } .section-contact--primary .cols { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .section-contact--primary .form { top: 0; margin-top: 10px; } .section-contact--primary .col + .col:after { top: -30px; bottom: -147px; left: 0; } .section-contact--primary .section__foot { margin: 87px 0 0; } @media (max-width: 767px) { .section-contact { padding: 40px 0 20px; } .section-contact .cols { display: block; margin: 0; } .section-contact .col { padding: 0; max-width: 100%; } .section-contact .col + .col { margin-top: 6px; padding-top: 22px; } .section-contact .col + .col:after { top: 0; bottom: auto; left: 50%; width: 211px; height: 2px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .section-contact .section__foot { padding: 0; margin: 24px 0 0; font-size: 12px; line-height: 1.67; } } /* ------------------------------------------------------------ *\ Section Secondary \* ------------------------------------------------------------ */ .section-secondary { padding: 71px 0; min-height: 710px; } .section-secondary .section__head { text-align: center; margin-bottom: 33px; } .section-secondary .section__head h2 { font-size: 20px; font-weight: 500; text-transform: uppercase; } @media (max-width: 767px) { .section-secondary { padding: 56px 0 34px; min-height: 0; } .section-secondary .section__head { margin-bottom: 18px; } .section-secondary .section__head h2 { font-size: 16px; line-height: 1.38; font-weight: 700; } } /* ------------------------------------------------------------ *\ Section Def \* ------------------------------------------------------------ */ .section-def { padding: 37px 0; } .section-def .section__foot { font-size: 11px; line-height: 1.47; color: #5D6F7B; margin: 30px 10px 0 31px; } .section-def .section__foot p { margin: 0; } .section-def .section__foot .section__link { display: inline-block; text-decoration: underline; } .section-def .section__foot .section__link:hover { text-decoration: none; } .section-def .section__foot p + .section__link { margin: 16px 0 0; } @media (max-width: 767px) { .section-def { padding: 53px 0 20px; } .section-def .cols { display: block; margin: 0; } .section-def .col { max-width: 100%; padding: 0; } .section-def .col + .col { margin: 24px 0 0; } .section-def .section__foot { font-size: 12px; line-height: 1.17; margin: 12px 0 0; } .section-def .section__foot p + .section__link { margin: 14px 0 0; } } /* ------------------------------------------------------------ *\ Section Main \* ------------------------------------------------------------ */ .section-main { border-top: 2px solid #dfe6ec; border-bottom: 1px solid #b8c5ce; } .section-main .article-alt + .widget-teritary { margin: 99px 0 0 81px; } .section-main .widget-teritary + .article-alt { margin-top: 96px; left: -76px; } .section-main .article-alt + .articles { margin-top: 46px; } .section-main .widget-callout + .products-outer { margin-top: 62px; } .section-main .products + .products-outer { margin-top: 38px; } .section-main .widget-callout + .list-features { margin-top: 38px; } .section-main .widget-teritary + .table-alt { margin-top: 54px; } .section-main .shell { position: relative; } .section-main .section__body { border-left: 2px solid #dfe6ec; padding: 30px 0 102px 28px; margin-left: 285px; min-height: 756px; } .section-main .section__body--primary { padding: 45px 0 102px 49px; } .section-main .section__body--secondary { padding: 50px 0 80px 52px; } .section-main .section__body--teritary { padding: 0 0 80px 72px; } .section-main .section__body--quaternary { padding: 52px 0 80px 54px; } .section-main .section__body--senary { padding: 88px 67px 25px; } .section-main .section__body--septenary { padding: 0; } .section-main .section__aside { position: absolute; top: 0; left: 0; width: 315px; padding: 33px 0 20px 60px; } .section-main .section__aside .nav-teritary { margin-bottom: 25px; } @media (max-width: 1199px) { .section-main .section__aside { padding-left: 15px; width: 245px; } .section-main .section__body { margin-left: 229px; } .section-main .article-alt + .widget-teritary { margin: 170px 0 0; } .section-main .article-alt { max-width: 583px; } .section-main .article-alt .article__body--primary { left: 215px; } .section-main .article-alt--secondary { left: 0; max-width: 100%; } } @media (max-width: 1023px) { .section-main .article-alt { margin-bottom: 0; } .section-main .article-alt .article__body--primary { left: 55px; } .section-main .section__aside { width: 215px; } .section-main .section__body { margin-left: 215px; } .section-main .section__body { padding-left: 15px; } .section-main .section__body--septenary { padding: 0; } .section-main .article-alt + .widget-teritary { margin: 110px 0 0; } .section-main .widget-teritary + .article-alt { left: 4px; } .section-main .article-alt + .articles { margin-top: 200px; } } @media (max-width: 767px) { .section-main { border-bottom: none; padding-bottom: 17px; } .section-main .section__aside { position: static; width: 100%; padding: 35px 0 0; text-align: center; } .section-main .section__aside .nav-teritary { text-align: left; margin-bottom: 18px; } .section-main .section__aside .link-alt { font-size: 14px; } .section-main .section__body { min-height: 0; margin: 0; border: none; padding: 34px 0 0; } .section-main .section__body--septenary { padding: 20px 0 0; } .section-main .widget-callout + .products-outer { margin-top: 0; } .section-main .widget-callout + .list-features { margin-top: 0; } .section-main .products + .products-outer { margin-top: 55px; } .section-main .widget-teritary + .table-alt { margin-top: 57px; } /* Section Main Size1 */ .section-main--size1 { padding-bottom: 62px; } /* Section Main Size2 */ .section-main--size2 { padding-bottom: 53px; } /* Section Main Size3 */ .section-main--size3 { padding-bottom: 26px; } /* Section Main Size4 */ .section-main--size4 { padding-bottom: 29px; } /* Section Main Size5 */ .section-main--size5 { padding-bottom: 8px; } /* Section Main Size6 */ .section-main--size6 { padding-bottom: 36px; } } /* ------------------------------------------------------------ *\ Section Engagements \* ------------------------------------------------------------ */ .section-engagements { padding: 60px 0; border-top: 2px solid #d7e1e7; } .section-engagements figure { margin-bottom: 100px; } /* ------------------------------------------------------------ *\ Section Pages annexes \* ------------------------------------------------------------ */ .section-pages-annexes { padding: 60px 0; border-top: 2px solid #d7e1e7; font-weight: 300; } /* ------------------------------------------------------------ *\ Section Motto \* ------------------------------------------------------------ */ .section-motto { padding: 100px 0; background: #0092c7; color: #fff; } .section-motto h2 { margin-bottom: 33px; font-size: 18px; line-height: 1.1; } @media (max-width: 767px) { .section-motto { padding: 40px 0; } .section-motto h2 { margin-bottom: 17px; } } /* ------------------------------------------------------------ *\ Section History \* ------------------------------------------------------------ */ .section-history { padding: 100px 0; background: #e6ecf0; } @media (max-width: 1023px) { .section-history { padding-bottom: 120px; } } @media (max-width: 767px) { .section-history { padding: 40px 0 60px; } } /* ------------------------------------------------------------ *\ Section Slider \* ------------------------------------------------------------ */ .section-slider { padding: 54px 0 39px; } .section-slider .section__head { max-width: 980px; margin: 0 auto 40px; } .section-slider .section__body { max-width: 980px; margin: 0 auto; } .section-slider h2 { font-size: 18px; } /* ------------------------------------------------------------ *\ Section Octonary \* ------------------------------------------------------------ */ .section-octonary { padding-bottom: 116px; } .section-octonary .section__head { margin-bottom: 40px; } .section-octonary .section__head h2 { margin-bottom: 20px; font-size: 18px; } .section-octonary .section__head p { font-size: 20px; line-height: 1.3; } .section-octonary .section__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: -10px; } .section-octonary .section__content { -webkit-box-flex: 0; -ms-flex: 0 0 29%; flex: 0 0 29%; max-width: 29%; font-weight: 300; font-size: 28px; line-height: 1.25; color: #0092c7; } .section-octonary .section__content p { margin-bottom: 0; } .section-octonary .section__content p:not(:last-child) { margin-bottom: 35px; } .section-octonary .section__image { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; text-align: center; } .section-octonary .section__aside { -webkit-box-flex: 0; -ms-flex: 0 0 29%; flex: 0 0 29%; max-width: 29%; } .section-octonary .section__aside h2 { padding-bottom: 4px; margin-bottom: 16px; font-size: 16px; line-height: 1.38; border-bottom: 2px solid #0092c7; } .section-octonary .section__aside ul { margin-bottom: 40px; list-style: none; } .section-octonary .section__aside li { position: relative; padding-left: 15px; } .section-octonary .section__aside li:before { content: ''; position: absolute; top: 7px; left: 1px; width: 5px; height: 5px; background: #0092c7; border-radius: 50%; } .section-octonary .section__info { margin-top: 39px; font-size: 12px; line-height: 1.25; color: #5d6f7b; text-align: right; } /* Section Octonary Alt */ .section-octonary--alt { padding-top: 74px; border-top: 2px solid #d7e1e7; margin-top: 20px; } /* Section Octonary Small */ .section-octonary--small { padding-bottom: 50px; } @media (max-width: 1023px) { .section-octonary--alt { margin-top: 32px; } .section-octonary .section__inner { display: block; } .section-octonary .section__content { max-width: 100%; margin-bottom: 30px; } .section-octonary .section__image { margin-bottom: 29px; } .section-octonary .section__aside { max-width: 100%; } .section-octonary .section__info { margin-top: 42px; } } @media (max-width: 767px) { .section-octonary .section__image { padding: 0 89px; } } /* ------------------------------------------------------------ *\ Section Default \* ------------------------------------------------------------ */ .section-default { padding-bottom: 100px; } .section-default .section__head { margin-bottom: 30px; } .section-default .section__head h3 { padding-bottom: 4px; font-size: 16px; line-height: 1.38; border-bottom: 2px solid #0092c7; } .section-default .section__head h3 span { color: #0092c7; } .section-default .section__table { padding: 40px 59px 45px 80px; background: #0092c7; color: #fff; } .section-default .section__table h4 { display: inline-block; padding: 2px 4px; margin-bottom: 25px; background: #fff; font-weight: bold; font-size: 14px; line-height: 1.25; color: #0092c7; } .section-default .section__table ul { list-style: none; font-size: 12px; } .section-default .section__table li + li { margin-top: 10px; } .section-default .section__table li strong { font-weight: 500; } @media (max-width: 1023px) { .section-default .section__table { padding: 40px 0 45px 10px; } } @media (max-width: 767px) { .section-default .section__table .col--2of3, .section-default .section__table .col--1of3 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .section-default .section__table .col--2of3 { margin-bottom: 25px; } } /* Section Countries */ .section--countries { padding: 60px 0 0; } @media (max-width: 767px) { .section { padding: 69px 0 20px; } .section .section__head { margin-bottom: 10px; } .section .section__actions { margin: 35px 0 0; } .section .section__actions .link-alt + .link-alt { margin-left: 34px; } .section .section__bar { padding: 14px; margin-bottom: 10px; } .section .feature-alt + .form { margin-top: 37px; } /* Section Primary */ .section--primary { padding: 30px 0; } .section--primary .section__head { margin-bottom: 30px; } .section--primary .section__actions { margin: 26px 4px 0; } .section--primary .section__actions h3 { margin-bottom: 23px; } /* Section Secondary */ .section--secondary { padding: 50px 0 18px; } .section--secondary .section__head { margin-bottom: 50px; } /* Section Teritary */ .section--teritary { padding: 30px 0; } .section--teritary .section__head { margin-bottom: 31px; } .section--teritary .section__head h2 { font-size: 20px; } /* Section Quaternary */ .section--quaternary { padding: 34px 0 24px; } .section--quaternary .section__head { margin-bottom: 40px; } .section--quaternary .section__head h2 { font-size: 20px; } .section--quaternary .section__actions { margin: 52px 0 0; } /* Section Articles */ .section--articles { padding: 43px 0 21px; } .section--articles .section__head { margin-bottom: 46px; } .section--articles .section__actions { margin-top: 14px; } /* Section Senary */ .section--senary { padding: 39px 0 31px; } .section--senary .section__head { margin-bottom: 21px; } .section--senary .section__head h2 { font-size: 20px; } .section--senary .section__head p { line-height: 1.35; } .section--senary .section__actions { margin: 34px 0 0; } /* Section Size1 */ .section--size1 .section__head { margin-bottom: 30px; } /* Section Size2 */ .section--size2 { padding: 35px 0 38px; } .section--size2 .section__actions { margin: 13px 0 0; } /* Section Size3 */ .section--size3 { padding: 35px 0 29px; } .section--size3 .section__head { margin-bottom: 33px; } /* Section Size4 */ .section--size4 { padding: 34px 0 77px; } .section--size4 .section__head { margin-bottom: 30px; } .section--size4 .section__actions { margin: 47px 0 0; } /* Section Septenary */ .section--septenary { padding: 20px 0 10px; } .section--septenary .section__head { margin-bottom: 17px; } .section--septenary + .section { padding: 54px 0 22px; } /* Section Size5 */ .section--size5 { padding: 18px 0 72px; } .section--size5 .articles + .widget-teritary { margin-top: 63px; } .section--size5 .widget-teritary + .table-alt { margin-top: 36px; } .section--size5 .table-alt { margin: 0; } } /* ------------------------------------------------------------ *\ Services \* ------------------------------------------------------------ */ .services { background: #e7ecf0; padding: 40px 0; } .services .services__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-right: 53px; padding-left: 27px; } /* Services Gray */ .services--primary { background: #E9F5FA; } @media (max-width: 1199px) { .services .services__inner { padding: 0; } } @media (max-width: 1023px) { .services .services__inner { padding: 0; } .services .slick-arrow { display: none !important; } .services .service { padding-top: 20px; padding-bottom: 20px; margin-right: 3%; } } @media (max-width: 767px) { .services { padding: 18px 0; } .services .service { padding: 0; } .services--primary { padding: 18px 0 0; margin-bottom: -8px; } } /* ------------------------------------------------------------ *\ Service \* ------------------------------------------------------------ */ .service { position: relative; padding-left: 62px; color: #5F87A0; } .service h4 { font-size: 11px; } .service h4 span { text-transform: uppercase; display: block; font-weight: 700; } .service .service__ico { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 767px) { .service { padding: 65px 0 24px !important; text-align: center; } .service .service__ico { position: relative; top: unset; left: unset; -webkit-transform: unset; -ms-transform: unset; transform: unset; } .services-ico { height: 55px; position: absolute; top: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; min-height: 40px; min-width: 40px; } /*.service .service__ico { top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }*/ } /* ------------------------------------------------------------ *\ Slick \* ------------------------------------------------------------ */ .slick-arrow { position: relative; border: 2px solid #dee5ed; background: #fff; font-size: 0; width: 30px; height: 30px; border-radius: 50%; z-index: 10; -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; } .slick-arrow:hover { background: #dee5ed; } .slick-arrow:after { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url(../images/temp/sl-next.svg) no-repeat 0 0; width: 7px; height: 9px; } .slick-prev:after { -webkit-transform: translate(-50%, -50%) rotate(180deg); -ms-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); } /* ------------------------------------------------------------ *\ Slider Main \* ------------------------------------------------------------ */ .slider-main .slick-arrow { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 5px; } .slider-main .slick-prev { margin-left: -675px; } .slider-main .slick-next { margin-left: 675px; } .slider-main .slider__slide { position: relative; height: 615px; } .slider-main .slider__slide-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; } .slider-main .slider__slide-inner { position: absolute; bottom: 123px; left: 0; width: 100%; z-index: 10; } .slider-main .slider__slide-content { margin-left: -46px; } .slider-main .slider__slide-content h2 { font-size: 28px; margin-bottom: 30px; font-weight: 400; text-transform: uppercase; line-height: 1.6; position: relative; left: 0; } .slider-main .slider__slide-content h2 strong { -webkit-box-shadow: 0 0 0 12px #fff; box-shadow: 0 0 0 12px #fff; background: #fff; font-weight: 400; padding: 0.5em 0; } .slider-main .slider__slide-content h2 span { position: relative; left: 10px; } .is-mozilla .slider-main .slider__slide-content h2 { left: 0; } .is-mozilla .slider-main .slider__slide-content h2 strong { display: inline; padding: 0.4em 0; background-color: #fff; -webkit-box-shadow: 1em 0 0 #fff; box-shadow: 1em 0 0 #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .is-mozilla .slider-main .slider__slide-content h2 span { left: 10px; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .slider-main .slider__slide-content h2 { left: 0; } .slider-main .slider__slide-content h2 strong { display: inline; padding: 0.5em 0; background-color: #fff; -webkit-box-shadow: 1em 0 0 #fff; box-shadow: 1em 0 0 #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .slider-main .slider__slide-content h2 span { left: 10px; } } @media (max-width: 1439px) { .slider-main .slick-prev { margin-left: -560px; } .slider-main .slick-next { margin-left: 560px; } .slider-main .slider__slide-content { margin-left: 45px; } } @media (max-width: 1199px) { .slider-main .slick-arrow { margin: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider-main .slick-prev { left: 15px; } .slider-main .slick-next { left: auto; right: 15px; } .slider-main .slider__slide { height: 450px; } } @media (max-width: 1023px) { .slider-main .slider__slide { height: 390px; } } @media (max-width: 767px) { .slider-main .slick-arrow { display: none !important; } .slider-main .slider__slide { height: 359px; } .slider-main .slider__slide-image { background-position: center center; } .slider-main .slider__slide-inner { bottom: 55px; } .slider-main .slider__slide-content { margin-left: 0; } .slider-main .slider__slide-content h2 { font-size: 18px; line-height: 1.22; margin-bottom: 15px; font-weight: 300; } .slider-main .slider__slide-content h2 strong { -webkit-box-shadow: -5px 0 0 6px #fff; box-shadow: -5px 0 0 6px #fff; font-weight: 300; } .slider-main .slider__slide-content h2 span { left: 10px; } } /* ------------------------------------------------------------ *\ Slider Products \* ------------------------------------------------------------ */ .slider-products .slick-arrow { position: absolute; top: 164px; width: 24px; height: 24px; } .slider-products .slick-arrow:after { width: 6px; height: 5px; background-size: 100% 100%; } .slider-products .slick-prev { left: -43px; } .slider-products .slick-next { right: -43px; } .slider-products .slick-list { margin: 0 -15px; } .slider-products .slick-slide { padding: 0 32px; } /*.slider-products .slick-slide:hover { cursor: pointer; }*/ /* Slider Products Primary */ .slider-products--primary .slick-list { margin: 0 -15px; } .slider-products--primary .slick-slide { padding: 0 15px; } /* Slider Products Secondary */ .slider-products--secondary .slick-arrow { top: 80px; } /* Slider Products Teritary */ .slider-products--teritary { padding: 0 75px; } .slider-products--teritary .slick-prev { left: -24px; } .slider-products--teritary .slick-next { right: -24px; } /* Slider Products Quaternary */ .slider-products--quaternary { padding: 0 42px; } .slider-products--quaternary .product .product__actions { bottom: -41px; } .slider-products--quaternary .slick-list { margin: 0 -23px; } .slider-products--quaternary .slick-slide { padding: 0 23px; } .slider-products--quaternary .slick-prev { left: -34px; margin-top: -17px; } .slider-products--quaternary .slick-next { right: -34px; margin-top: -17px; } @media (max-width: 1199px) { .slider-products .slick-prev { left: 0; } .slider-products .slick-next { right: 0; } } @media (max-width: 767px) { .slider-products .slick-slide { padding: 0 20px; } } /* ------------------------------------------------------------ *\ Slider \* ------------------------------------------------------------ */ .slider .slick-arrow { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 24px; height: 24px; margin: 8px 0 0; } .slider .slick-arrow:after { width: 6px; height: 5px; background-size: 100% 100%; } .slider .slick-prev { left: -55px; } .slider .slick-next { right: -55px; } .slider .slider__slide-image { padding-top: 46%; background-size: cover; position: relative; } .slider .slider__slide-image .slider__slide-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slider .slider__slide-image .slider__slide-bar { position: absolute; bottom: 0; left: 0; width: 215px; height: 3px; background: #0092C7; } /* Slider Product */ .slider--product { padding-right: 80px; position: relative; } .slider--product .slider__slide-image { padding-top: 0; position: relative; height: 500px; width: 475px; display: table-cell; vertical-align: middle; } .slider--product .slider__slide-image img { margin: auto; max-width: 450px; max-height:500px; } .slider--product .slick-arrow { display: none !important; } .slider--product .slick-dots { list-style: none; position: absolute; top: 50%; right: -12px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: -10px; } .slider--product .slick-dots button { display: inline-block; border: none; width: 16px; height: 30px; font-size: 12px; -webkit-transition: background .4s, color .4s; -o-transition: background .4s, color .4s; transition: background .4s, color .4s; background: none; color: #262A39; } .slider--product .slick-dots .slick-active button { color: #fff; background: #0092C7; } .slider--product .slider__slide-label { display: none; } /* Slider Primary */ .slider--primary { margin-top: 23px; position: relative; left: 18px; } .slider--primary .slick-arrow { display: none !important; } .slider--primary .slick-dots { position: absolute; bottom: 15px; left: 50%; list-style: none; margin-left: 210px; } .slider--primary .slick-dots button { display: none; } .slider--primary .slick-dots li { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; -webkit-transition: background .4s, -webkit-transform .4s; -o-transition: transform .4s, background .4s; transition: transform .4s, background .4s, -webkit-transform .4s; } .slider--primary .slick-dots li + li { margin-left: 4px; } .slider--primary .slick-dots .slick-active { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); background: #0191c6; } @media (max-width: 1199px) { .slider--primary { margin-top: 0; left: 0; } } @media (max-width: 1023px) { .slider .slick-prev { left: 0; } .slider .slick-next { right: 0; } .slider--primary { margin: 0 0 30px; } .slider--primary .slick-dots { bottom: auto; top: 68%; left: auto; right: 20px; } } @media (max-width: 767px) { .slider .slick-arrow { display: none !important; } .slider .slider__slide-image { padding-top: 53%; } .slider .slider__slide-image .slider__slide-bar { width: 162px; } /* Slider Product */ .slider--product { padding-right: 0; } .slider--product .slick-dots { right: 20px; margin: 0; } .slider--product .slider__slide-image { padding-top: 0; position: relative; height: 500px; width: 400px; display: table-cell; vertical-align: middle; } .slider--product .slider__slide-image img { max-width: 111px; position: relative; left: -4px; } .slider--product .slider__slide-label { display: inline-block; position: absolute; top: 48px; left: 20px; font-size: 12px; font-weight: 500; text-transform: uppercase; } /* Slider Primary */ .slider--primary { margin: 33px -15px 0; } .slider--primary .slick-dots { top: 53%; } .slider--primary .slick-dots li { width: 5.5px; height: 5.5px; } } /* ------------------------------------------------------------ *\ Slider Tablet \* ------------------------------------------------------------ */ @media (max-width: 1023px) { .slider-tablet { position: relative; } .slider-tablet .slick-dots { list-style: none; position: absolute; bottom: -5px; left: 0; width: 100%; text-align: center; } .slider-tablet .slick-dots button { display: none; } .slider-tablet .slick-dots li { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #b0c3d0; -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; } .slider-tablet .slick-dots li + li { margin-left: 6px; } .slider-tablet .slick-dots .slick-active { background: #5f87a0; } } /* ------------------------------------------------------------ *\ Slider Mobile Avantage \* ------------------------------------------------------------ */ @media (max-width: 767px) { .slider-mobile-avantage { position: relative; } .slider-mobile-avantage .slick-dots { list-style: none; position: absolute; bottom: -5px; left: 0; width: 100%; text-align: center; } .slider-mobile-avantage .slick-dots button { display: none; } .slider-mobile-avantage .slick-dots li { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #b0c3d0; -webkit-transition: background .4s; -o-transition: background .4s; transition: background .4s; } .slider-mobile-avantage .slick-dots li + li { margin-left: 6px; } .slider-mobile-avantage .slick-dots .slick-active { background: #5f87a0; } .services .service { margin: 0 58px; } } /* ------------------------------------------------------------ *\ Slider Mobile \* ------------------------------------------------------------ */ @media (max-width: 767px) { .slider-mobile { padding: 0 0 0 28px; } .slider-mobile .slick-arrow { display: none !important; } .slider-mobile .slick-slide { padding: 0 10px; } .slider-mobile .slick-list { margin: 0 -10px; padding-right: 25px; } } /* ------------------------------------------------------------ *\ Slider History \* ------------------------------------------------------------ */ .slider-history { padding: 0 20px; } .slider-history .slider__slide { text-align: center; } .slider-history .slider__slide-date { position: relative; margin-bottom: 45px; font-weight: bold; font-size: 14px; } .slider-history .slider__slide-date:before { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 2px; background: #d7e1e7; margin-top: 14px; } .slider-history .slider__slide-date:after { content: ''; position: absolute; top: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 10px; height: 10px; margin-top: 10px; background: #0092c7; border-radius: 50%; } .slider-history .slider__slide:first-child .slider__slide-date:before { left: 50%; } .slider-history .slider__slide:last-child .slider__slide-date:before { right: 50%; } .slider-history figure { margin-bottom: 35px; } .slider-history figure img { margin: 0 auto; } .slider-history p { max-width: 220px; margin: 0 auto; font-size: 12px; line-height: 1.25; color: #5d6f7b; } /* Slick Styles */ .slider-history .slick-list { overflow: visible; } .slider-history .slick-prev, .slider-history .slick-next { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .slider-history .slick-prev { left: 0; } .slider-history .slick-next { right: 0; } .slider-history .slick-arrow.slick-disabled { opacity: 0; pointer-events: none; } @media (max-width: 767px) { .slider-history .slick-prev { left: -11px; } .slider-history .slick-next { right: -11px; } } /* ------------------------------------------------------------ *\ Socials \* ------------------------------------------------------------ */ .socials { font-size: 10px; font-weight: 500; color: #5F87A0; text-transform: uppercase; padding-top: 10px; } .socials ul { list-style: none; } .socials a { text-decoration: none; display: inline-block; position: relative; padding-left: 25px; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .socials a:hover { opacity: .7; } .socials a i { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .socials li + li { margin-top: 24px; } /* ------------------------------------------------------------ *\ Stat \* ------------------------------------------------------------ */ .stats { position: relative; height: 500px; background-repeat: no-repeat; background-position: center center; background-size: cover; } .stat { position: absolute; font-size: 14px; line-height: 1.25; color: #fff; text-transform: uppercase; } .stat--one { top: 11%; left: 21.82%; } .stat--two { top: 62.6%; left: 28.35%; } .stat--three { top: 83%; left: 56%; } .stat .stat__digit { font-size: 38px; font-weight: 500; } .stat .stat__figure { font-size: 34px; font-weight: normal; margin: 0 -4px; } @media (max-width: 1023px) { .stats { height: 450px; } .stat--one { top: 10.5%; left: 35%; } .stat--two { left: 30.35%; } .stat--three { top: 82.6%; left: 40.6%; } } @media (max-width: 767px) { .stat--one { left: 19%; } .stat--two { left: 9.35%; } .stat--three { left: 30.6%; } } /* ------------------------------------------------------------ *\ Tabs \* ------------------------------------------------------------ */ .tabs .tabs__nav { font-size: 15px; font-weight: 700; text-transform: uppercase; } .tabs .tabs__nav ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; } .tabs .tabs__nav ul li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .tabs .tabs__nav ul li + li { margin-left: -1px; } .tabs .tabs__nav a { text-decoration: none; text-align: center; border: 1px solid #D8D8D8; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 19px 10px 13px; -webkit-transition: border-color .4s; -o-transition: border-color .4s; transition: border-color .4s; border-top-color: #fff; border-left-color: #fff; } .tabs .tabs__nav a i { position: relative; } .tabs .tabs__nav a .ico-home { margin-right: -23px; left: -39px; top: -5px; } .tabs .tabs__nav a .ico-pin { left: -14px; } .tabs .tabs__nav li:first-child.active a { border-top-color: #D8D8D8; border-left-color: #D8D8D8; border-bottom-color: #fff; } .tabs .tabs__nav li:first-child.active + li a { border-left-color: #D8D8D8; border-right-color: #fff; } .tabs .tabs__nav li:last-child.active a { border-bottom-color: #fff; border-top-color: #D8D8D8; border-left-color: #D8D8D8; } @media (max-width: 767px) { .tabs .tabs__nav a { display: block; padding: 7px 4px 3px; font-weight: 500; } .tabs .tabs__nav a i { display: block; position: static; margin: 0 auto 5px !important; } .tabs .tabs__nav .active a { font-weight: 700; } } /* ------------------------------------------------------------ *\ Tab \* ------------------------------------------------------------ */ .tab { padding: 38px 0 30px 17px; display: none; } .tab .widget-secondary + .form { margin-top: 25px; max-width: 385px; } .tab.active { display: block; } .tab--primary { padding: 38px 0 8px; } .tab--secondary { padding: 38px 0 16px; } .tab--tertiary { padding: 38px 0 0 16px; } .accordion-alt .accordion__body .widget-secondary + #myAddrForm { margin-top: 0; } @media (max-width: 767px) { .tab .widget-secondary + .form { max-width: 100%; } .tab { padding-left: 0; } } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ .table { border: 2px solid #ecf1f4; font-size: 14px; } .table span { font-weight: 700; } .table span span { font-weight: 400; } .table .color-gray { color: #9b9b9b; } .table .color-green { color: #7ed222; } .table .color-red { color: #d0011b; } .table th, .table td { padding: 0 17px; height: 44px; } .table th:nth-child(1), .table td:nth-child(1) { width: 11%; } .table th:nth-child(2), .table td:nth-child(2) { width: 20%; } .table th:nth-child(3), .table td:nth-child(3) { width: 20%; text-align: right; } .table th { background: #eaf5fb; text-align: left; font-weight: 700; } .table td { height: 45px; border-top: 2px solid #ecf1f4; font-size: 12px; } @media (max-width: 1023px) { .table td { font-size: 10px; } } @media (max-width: 767px) { .table { font-size: 10px; } .table th, .table td { padding: 0 13px; height: 44px; } .table td { height: 45px; font-size: 10px; } .table th:nth-child(1), .table td:nth-child(1) { width: 11%; } .table th:nth-child(2), .table td:nth-child(2) { width: 60%; padding-right: 0; } .table th:nth-child(3), .table td:nth-child(3) { width: 20%; padding-left: 0; text-align: right; white-space: nowrap; } } /* ------------------------------------------------------------ *\ Table Alt \* ------------------------------------------------------------ */ .table-alt { color: #2E2E2E; margin-right: -65px; } .table-alt table:not(:first-child) { display: none; } .table-alt h3 { font-size: 18px; line-height: 1.17; font-weight: 400; } .table-alt h6 { font-size: 11px; font-weight: 400; } .table-alt h6 span { display: block; font-size: 13px; color: #0092C7; font-weight: 700; max-width: 124px; background: #E9F5FA; margin: 5px auto 7px; text-transform: uppercase; padding: 8px 4px 4px; } .table-alt h6 strong { font-size: 10px; font-weight: 400; } .table-alt h2 { font-size: 20px; font-weight: 400; } .table-alt em { display: block; font-style: normal; font-size: 10px; } .table-alt table { table-layout: fixed; } .table-alt td { text-align: center; height: 93px; } .table-alt td:nth-child(1) { border-right: 1px solid #D8D8D8; width: 153px; } .table-alt .table__foot { margin: 33px 0 0 -2px; color: #58707C; font-size: 12px; line-height: 1.17; } .table-alt .table__foot p { margin: 0; } .table-alt .table__foot p + p { margin: 14px 0 0; } /* Table Alt Size1 */ .table-alt--size1 td { height: 88px; } .table-alt--size1 .table__foot { margin: 88px 0 0 -2px; } @media (max-width: 1023px) { .table-alt h2 { font-size: 18px; } .table-alt h3 { font-size: 14px; } .table-alt h6 span { font-size: 10px; max-width: 105px; } } @media (max-width: 767px) { .table-alt { margin-right: 0; } .table-alt table { display: table !important; } .table-alt table + table { margin-top: 50px; } .table-alt table td { padding-left: 29px; height: 74px; } .table-alt table td:nth-child(1) { width: 140px; padding-left: 4px; } .table-alt table:nth-child(1) td:nth-child(3), .table-alt table:nth-child(1) td:nth-child(4) { display: none; } .table-alt table:nth-child(2) td:nth-child(2), .table-alt table:nth-child(2) td:nth-child(4) { display: none; } .table-alt table:nth-child(3) td:nth-child(2), .table-alt table:nth-child(3) td:nth-child(3) { display: none; } .table-alt h3 { font-size: 14.4px; line-height: 1.2; } .table-alt h2 { font-size: 16px; } .table-alt h6 { font-size: 9px; } .table-alt h6 span { font-size: 10px; max-width: 101px; padding: 5px 4px 4px; margin-top: 4px; } .table-alt h6 strong { font-size: 8px; } .table-alt .table__foot { margin: 61px 6px 0; } /* Table Alt Size1 */ .table-alt--size1 table + table { margin-top: 40px; } .table-alt--size1 table td { height: 87px; } .table-alt--size1 table td:nth-child(1) { width: 143px; padding-left: 0; padding-right: 10px; } .table-alt--size1 h3 { font-size: 18px; line-height: 1.17; } .table-alt--size1 h6 { font-size: 11px; } .table-alt--size1 h6 span { font-size: 13px; max-width: 125px; padding: 5px 4px 4px; margin-top: 4px; } .table-alt--size1 h6 strong { font-size: 10px; } .table-alt--size1 .ico-checked { width: 23px; height: 23px; } .table-alt--size1 .table__foot { margin: 29px 1px 0 6px; } } /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { margin-right: 11px; } @media (max-width: 767px) { .widgets { margin-right: 0; } } /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widget { background: #E9F5FA; } .widget .widget__head { padding: 26px 34px; } .widget .widget__head h2 { font-size: 20px; font-weight: 500; } .widget .widget__head h2 a { text-decoration: none; display: block; position: relative; -webkit-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; } .widget .widget__head h2 a:hover { opacity: .7; } .widget .widget__head h2 a i { position: absolute; top: 50%; right: 4px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .widget + .widget { margin-top: 12px; } /* Widget Cart */ .widget--cart .widget__foot { border-top: 2px solid #D7E1E7; margin-top: 19px; padding: 21px 38px 27px 33px; } .widget--cart .widget__foot h3 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 21px; text-transform: uppercase; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .widget--cart .widget__foot h3 span { font-size: 14px; } /* Widget Contact */ .widget--contact { padding: 35px 20px; } @media (max-width: 767px) { .widget .widget__head { border-bottom: 2px solid #D7E1E7; padding: 19px 20px; } .widget .widget__foot { margin-top: 30px; padding: 22px 20px 25px; } .widget .widget__foot h3 { font-size: 16px; } /* Widget Contact */ .widget--contact { padding: 28px 10px; } } /* ------------------------------------------------------------ *\ Widget Info \* ------------------------------------------------------------ */ .widget-info { color: #fff; background: #0092C7; text-align: center; padding: 24px 0 53px; } .widget-info h2 { font-size: 20px; margin: 14px 0 0; } .widget-info p { font-size: 25px; line-height: 1.16; font-weight: 300; margin: 18px 0 0; } .widget-info .link-alt { margin: 43px 0 0; color: #fff; font-size: 12px; } @media (max-width: 767px) { .widget-info { padding: 28px 0 30px; } .widget-info img { display: block; margin: auto; max-width: 162px; } .widget-info h2 { margin: 14px 0 0; } .widget-info p { font-size: 20px; line-height: 1.15; margin: 11px 0 0; } .widget-info .link-alt { margin: 39px 0 0; } } /* ------------------------------------------------------------ *\ Widgets Primary Alt \* ------------------------------------------------------------ */ .widgets-primary-alt { display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: -3px; } .widgets-primary-alt .widgets__col { -webkit-box-flex: 0; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; padding-right: 10px; } .widgets-primary-alt .widgets__col + .widgets__col--alt { margin-left: 27px; } @media (max-width: 767px) { .widgets-primary-alt { display: block; margin-right: 0; } .widgets-primary-alt .widgets__col { padding: 0; max-width: 100%; } .widgets-primary-alt .widgets__col + .widgets__col--alt { margin-left: 0; } } /* ------------------------------------------------------------ *\ Widget Primary \* ------------------------------------------------------------ */ .widget-primary-alt h4 { font-weight: 700; color: #6A92AA; margin-bottom: 18px; text-transform: uppercase; } .widget-primary-alt .widget__entry { font-size: 10px; line-height: 1.7; color: #6A92AA; text-transform: uppercase; } .widget-primary-alt .widget__entry a { text-decoration: none; -webkit-transition: color .4s; -o-transition: color .4s; transition: color .4s; } .widget-primary-alt .widget__entry a:hover { color: #4bc6f3; } .widget-primary-alt + .widget-primary-alt { margin-top: 20px; } @media (max-width: 767px) { .widget-primary-alt { border-bottom: 1px solid #bcccd8; } .widget-primary-alt h4 { position: relative; padding: 18px 20px; margin: 0; } .widget-primary-alt h4:after { content: ''; position: absolute; top: 50%; right: 26px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url(../images/temp/ico-angle-down-blue.svg) no-repeat 0 0; background-size: 100% 100%; width: 8px; height: 6px; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; -o-transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .widget-primary-alt .widget__dropdown { display: none; padding: 3px 20px 15px; } .widget-primary-alt + .widget-primary-alt { margin-top: 0; } .widget-primary-alt.active h4:after { -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } } /* ------------------------------------------------------------ *\ Widget cart \* ------------------------------------------------------------ */ .widget-cart .widget__title { text-align: center; margin-bottom: 15px; font-size: 14px; text-transform: none; } .widget-cart .product__image img { max-height: 75px; max-width: 40px; margin: 0 auto; display: block; } .widget-cart .widget__foot { margin: 10px 0 0; text-align: center; } .widget-cart .widget__foot h2 { font-size: 15px; font-weight: 400; color: #262A39; margin-bottom: 26px; text-transform: none; } .widget-cart .widget__foot h2 strong { font-weight: 700; } .widget-cart .widget__foot p { font-size: 10px; color: #31364A; text-transform: none; padding: 0 10px; margin-bottom: 9px; } .widget-cart .widget__foot p strong { font-weight: 700; } .widget-cart .widget__foot .btn { min-width: 0; width: 100%; max-width: 140px; font-size: 0.75rem; padding: 9px 10px; } /* Widget Cart Empty */ .widget-cart--empty { padding: 20px 0 15px; } .widget-cart--empty .widget__foot { margin: 0; } .widget-cart--empty .widget__foot .btn { max-width: 160px; } /* Widget Cart Alt */ .widget-cart--alt { text-align: center; } .widget-cart--alt .widget__image { position: relative; left: 12px; } .widget-cart--alt .widget__foot { margin: -10px 0 0; } .widget-cart--alt .widget__foot h2 { margin-bottom: 30px; } .widget-cart--alt .widget__foot .btn { max-width: 181px } @media (max-width: 767px) { /* Widget Cart Alt */ .widget-cart--alt { text-align: center; } .widget-cart--alt .widget__image { max-width: 160px; margin: auto; } .widget-cart--alt .widget__foot { margin: -12px 0 0; } .widget-cart--alt .widget__foot .btn { font-size: 9px; max-width: 162px; padding: 9px 5px; } } /* ------------------------------------------------------------ *\ Widget Big \* ------------------------------------------------------------ */ .widget-big .col + .col { border-left: 1px solid #dfe6ec; } .widget-big .widget__head h1 { text-transform: uppercase; position: relative; font-size: 22px; font-weight: 700; margin: 0 0 15px; display: inline-block; padding-right: 28px; } .widget-big .widget__head h1 .btn-fav { position: absolute; top: 6px; right: 0; } .widget-big .widget__head h2 { font-size: 12px; font-weight: 500; text-transform: uppercase; margin: 0 0 22px; } .widget-big .widget__head p { font-size: 12px; color: #5D6F7B; } .widget-big .widget__head + .product-secondary { margin-top: 39px; } .widget-big .widget__body-small { padding: 63px 0 0 88px; } .widget-big .widget__body-small .gadget { margin: 21px 0 0; } .widget-big .slider--product { margin-top: 114px; } .widget-big .widget__body { padding: 10px 100px 40px 0; } .widget-big .widget__body .list-steps { margin: 34px 0 0; } .widget-big .widget__content { font-size: 20px; line-height: 1.3; } .widget-big .widget__hint { text-align: right; margin: 36px 0 0; font-size: 12px; color: #5D6F7B; } .widget-big .gadget-primary { margin: 29px 0 0; } .widget-big .accordions { margin: 30px 0 0; } .widget-big .accordions + .widget__hint { margin: 14px 0 44px 65px; } .widget-big .widget__group { position: relative; } .widget-big .widget__group + .widget__group { margin-top: 48px; padding-top: 15px; } .widget-big .widget__group + .widget__group:after { content: ''; position: absolute; top: 0; right: -100px; left: -90px; height: 1px; background: #dfe6ec; } @media (max-width: 1023px) { .widget-big .widget__body { padding: 10px 20px 40px 0; } .widget-big .widget__body-small { padding: 63px 0 0 20px; } } @media (max-width: 767px) { .widget-big .cols { display: block; } .widget-big .cols .col { max-width: 100%; } .widget-big .widget__head h1 { font-size: 18px; padding-right: 17px; margin: 0 0 12px; } .widget-big .widget__head h1 span { font-size: 12px; font-weight: 500; margin: 6px 0 0; display: block; } .widget-big .widget__head h1 .btn-fav { top: 3px; right: -10px; } .widget-big .slider--product { margin-top: 14px; margin-bottom: 14px; } .widget-big .product-secondary { margin-bottom: 24px; } .widget-big .product-secondary .product__bar h2 { margin-bottom: 23px; } .widget-big .product-secondary .product__bar { text-align: left; margin-bottom: 31px; } .widget-big .product-secondary .product__qty-row { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-left: 63px; } .widget-big .product-secondary .product__qty-row + .product__qty-row { margin-top: 5px; } .widget-big .product-secondary .product__actions .btn { display: block; max-width: 166px; margin: 0 auto 20px; } .widget-big .product-secondary--single .product__actions .btn + .link-alt { margin: 0; font-size: 10px; } .widget-big .product-secondary--single .product__actions .link-alt + .link-alt { margin: 22px 0 0; font-size: 10px; } .widget-big .widget__body { padding: 30px 0 0; } .widget-big .widget__body .list-steps { margin: 39px 0 0; } .widget-big .widget__hint { margin: 31px 0 0; } .widget-big .widget__hint + .gadget-primary { margin: 50px 0 0; } .widget-big .accordions { margin: 52px 0 0; } .widget-big .accordions + .widget__hint { margin: 17px 0 -18px 25px; line-height: 1.4; } .widget-big .widget__group + .widget__group { margin-top: 37px; } } /* ------------------------------------------------------------ *\ Widget Primary \* ------------------------------------------------------------ */ .widget-primary { position: relative; } .widget-primary > p { margin: 10px -50px 0 0; font-size: 14px; } .widget-primary .widget__title { text-transform: uppercase; font-size: 20px; margin-bottom: 0; } .widget-primary .widget__title + .btn { margin: 17px 0 0; } .widget-primary .list-actions { margin: 33px 0 0; } .widget-primary .list-services { margin: 32px 0 0; } .widget-primary .btn { margin: 30px 0 0; } .widget-primary + .widget-primary { margin-top: 31px; padding-top: 43px; } .widget-primary + .widget-primary:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; max-width: 290px; height: 2px; background: #d9e2e9; } .widget-primary + .widget-primary--alt { margin-top: 40px; padding-top: 63px; } @media (max-width: 1023px) { .widget-primary > p { margin-right: 0; } } @media (max-width: 767px) { .widget-primary > p { text-align: center; margin: 6px 0 0; } .widget-primary .widget__title { text-align: center; font-size: 16px; } .widget-primary .list-actions { margin: 10px 0 0; text-align: center; } .widget-primary .list-services { margin: 37px 0 0; } .widget-primary .btn { margin: 21px 0 0; width: 100%; } .widget-primary + .widget-primary { margin-top: 26px; padding-top: 36px; } .widget-primary + .widget-primary:after { left: 50%; width: 211px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } /* ------------------------------------------------------------ *\ Widgets Dropdown \* ------------------------------------------------------------ */ @media (max-width: 767px) { .widget-dropdowns .cols { display: block; margin: 0; } .widget-dropdowns .col { max-width: 100%; padding: 0; } .widget-dropdowns .col + .col { margin-top: 10px; } } /* ------------------------------------------------------------ *\ Widget Dropdown \* ------------------------------------------------------------ */ .widget-dropdown { -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); position: relative; } .widget-dropdown .widget__btn i { -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; -o-transition: transform .4s; transition: transform .4s, -webkit-transform .4s; } .widget-dropdown .widget__body { display: none; padding: 24px 14px 17px; border-top: 1px solid #d8e1e8; } .widget-dropdown .widget__body--primary { padding: 16px 14px 17px; } .widget-dropdown.active .widget__btn i { -webkit-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } @media (max-width: 1023px) { .widget-dropdown .widget__btn { font-size: 11px; } } @media (max-width: 767px) { .widget-dropdown .widget__body { padding: 25px 18px 12px; } .widget-dropdown .widget__body--primary { padding: 16px 18px 20px; } .widget-dropdown .widget__btn { font-size: 15px; padding: 22px 16px; color: #262A39 !important; } } /* ------------------------------------------------------------ *\ Widget Secondary \* ------------------------------------------------------------ */ .widget-secondary { position: relative; border-bottom: 1px solid #E6E6E6; padding-bottom: 36px; } .widget-secondary h3 { font-size: 14px; color: #0092C7; margin: 0; text-transform: uppercase; } .widget-secondary p { margin: 4px 0 0; font-size: 12px; font-weight: 500; text-transform: uppercase; } .widget-secondary h4 { font-size: 15px; line-height: 1.15; margin: 0; margin-top: -4px; font-weight: 400; } .widget-secondary h4 strong { display: block; font-weight: 700; } .widget-secondary h4 a { text-decoration: none; } .widget-secondary h4 span { display: block; position: relative; padding-left: 62px; } .widget-secondary h4 span i { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .widget-secondary h4 span strong { display: block; margin-top: -8px; } .widget-secondary h4 + h4 { margin: 40px 0 0; } .widget-secondary .link-alt { position: absolute; top: 2px; right: 8px; } /* Widget Secondary Size1 */ .widget-secondary--size1 { border: none; padding: 0; } .widget-secondary--size1 .link-alt { top: 27px; } /* Widget Secondary Size2 */ .widget-secondary--size2 { margin-right: 15px; padding-bottom: 20px; } .widget-secondary--size2 .link-alt { top: 1px; right: -5px; } .widget-secondary--size2 + .widget-secondary { margin: 26px 0 0; } /* Widget Secondary Size3 */ .widget-secondary--size3 { border: none; padding: 0; } .widget-secondary--size3 .link-alt { top: -3px; } @media (max-width: 767px) { .widget-secondary { padding-right: 40px; } .widget-secondary h4 span { padding-left: 48px; padding-right: 35px; } .widget-secondary h4 + h4 { margin: 22px 0 0; } .widget-secondary .link-alt { right: 0; } .widget-secondary--size2 { margin-right: 0; } .widget-secondary--size3 .link-alt { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin-top: 21px; } } /* ------------------------------------------------------------ *\ Widgets Teritary \* ------------------------------------------------------------ */ .widgets-teritary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-left: 54px; } .widgets-teritary .widget-teritary { margin: 0; } .widgets-teritary .widget-teritary + .widget-teritary { margin-left: 193px; position: relative; top: -10px; } .widgets-teritary .widget-teritary .widget__body p { margin-bottom: 17px; min-height: 52px; } @media (max-width: 1023px) { .widgets-teritary { margin-left: 0; } .widgets-teritary .widget-teritary { margin: 0; } .widgets-teritary .widget-teritary .widget__body { margin-left: -10px; margin-right: -10px; } .widgets-teritary .widget-teritary + .widget-teritary { margin-left: 45px; top: auto; } .widgets-teritary .widget-teritary + .widget-teritary .widget__body { margin-left: 0; margin-right: 0; } } @media (max-width: 767px) { .widgets-teritary { display: block; } .widgets-teritary .widget-teritary .widget__body { margin: 23px 0 0; } .widgets-teritary .widget-teritary .widget__body p { padding: 0 50px; position: relative; left: -4px; } .widgets-teritary .widget-teritary + .widget-teritary { margin: 71px 0 0; } .widgets-teritary .widget-teritary + .widget-teritary .widget__body p { padding: 0; } } /* ------------------------------------------------------------ *\ Widget Teritary \* ------------------------------------------------------------ */ .widget-teritary { position: relative; } .widget-teritary .widget__body { position: absolute; top: 4px; left: 335px; color: #0092C7; } .widget-teritary .widget__body p { margin-bottom: 8px; } .widget-teritary .widget__body p span { font-size: 10px; display: block; } .widget-teritary .widget__body .link-alt { margin-left: 3px; padding-right: 13px; color: #0098D7; } .widget-teritary .widget__stat { position: relative; max-width: 239px; } .widget-teritary .widget__stat ul { list-style: none; color: #0192c7; font-weight: 700; font-size: 12px; text-align: right; position: absolute; top: -15px; right: 0; width: 70%; } .widget-teritary .widget__stat ul li { border-bottom: 2px solid #dee5eb; padding-bottom: 3px; } .widget-teritary .widget__stat ul li a { text-decoration: none; pointer-events: none; } .widget-teritary .widget__stat ul li + li { margin-top: 1px; } .widget-teritary .widget__stat ul span { font-size: 10px; font-weight: 400; display: block; margin-top: 3px; } .widget-teritary .widget__image { position: relative; z-index: 5; } .widget-teritary .widget__image span { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; max-height: 0; -webkit-transition: max-height .4s; -o-transition: max-height .4s; transition: max-height .4s; } .widget-teritary .widget__image span img { position: absolute; bottom: 0; left: 0; } .widget-teritary .widget__ico { border: 2px solid #0092C7; background: #E9F5FA; width: 115px; height: 115px; position: relative; display: inline-block; border-radius: 50%; } .widget-teritary .widget__ico i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .widget-teritary .widget__ico + .widget__body { margin: 4px 0 0; } .widget-teritary.animated .widget__stat span { max-height: 100%; } /* Widget Teritary Alt */ .widget-teritary--alt { max-width: 370px; margin: auto; text-align: center; left: 43px; } .widget-teritary--alt .widget__stat { margin: auto; left: -3px; max-width: 240px; text-align: left; } /*.widget-teritary--alt .widget__stat ul { width: 44%; }*/ .widget-teritary--alt .widget__stat--alt ul { right: -85px; width: 100%; } .widget-teritary--alt .widget__body { position: static; margin: 22px 0 0; } .widget-teritary--alt-size1 { max-width: 390px; left: 12px; } .widget-teritary--alt-size1 .widget__body p { margin-bottom: 23px; } @media (max-width: 1023px) { .widget-teritary .widget__stat { margin-left: auto; margin-right: auto; } .widget-teritary .widget__body { position: static; text-align: center; margin: 30px 0 0; } .widget-teritary--alt .widget__stat--alt ul { right: -35px; width: 75%; } } @media (max-width: 767px) { /* Widget Teritary Alt */ .widget-teritary--alt { max-width: 370px; left: 3px; } .widget-teritary--alt br { display: none; } /*.widget-teritary--alt .widget__stat ul { right: -21px; width: 55%; }*/ .widget-teritary .widget__stat .widget__image { pointer-events: none; } .widget-teritary .widget__stat ul li a { pointer-events: all; } .widget-teritary--alt .widget__stat ul { right: 0; } .widget-teritary--alt .widget__body { padding: 0 10px; margin: 27px 0 0; } .widget-teritary--alt-size1 .widget__body { padding: 0; } .widget-teritary--alt-size1 .widget__body p { margin-bottom: 10px; } } /* ------------------------------------------------------------ *\ Widget Orders \* ------------------------------------------------------------ */ .widget-orders { border: 2px solid #D7E1E7; max-width: 748px; margin: 10px 0; } .widget-orders .widget__head { background: #E9F5FA; padding: 12px 18px; border-bottom: 2px solid #D7E1E7; } .widget-orders .widget__head ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 14px; line-height: 1.14; color: #1C2A43; } .widget-orders .widget__head ul span { display: block; color: #0096D2; } .widget-orders .widget__head ul br { display: none; } .widget-orders .widget__head ul a { margin: 13px 0 0; } .widget-orders .widget__head ul li:nth-child(1) { -webkit-box-flex: 0; -ms-flex: 0 0 187px; flex: 0 0 187px; } .widget-orders .widget__head ul li:nth-child(2) { -webkit-box-flex: 0; -ms-flex: 0 0 225px; flex: 0 0 225px; padding-right: 30px; } .widget-orders .widget__head ul li:nth-child(3) { -webkit-box-flex: 0; -ms-flex: 0 0 187px; flex: 0 0 187px; } .widget-orders .widget__head ul li:last-child { text-align: right; margin-left: auto; margin-right: -3px; } @media (max-width: 1199px) { .widget-orders .widget__head ul li:nth-child(1) { -webkit-box-flex: 0; -ms-flex: 0 0 168px; flex: 0 0 168px; } .widget-orders .widget__head ul li:nth-child(2) { -webkit-box-flex: 0; -ms-flex: 0 0 206px; flex: 0 0 206px; padding-right: 20px; } .widget-orders .widget__head ul li:nth-child(3) { -webkit-box-flex: 0; -ms-flex: 0 0 168px; flex: 0 0 168px; } } @media (max-width: 1023px) { .widget-orders .widget__head ul { display: block; position: relative; } .widget-orders .widget__head ul br { display: block; } .widget-orders .widget__head ul li { padding-right: 0; max-width: 220px; position: relative; } .widget-orders .widget__head ul li a { margin: 0; position: absolute; top: 19px; right: 8px; } .widget-orders .widget__head ul li + li { margin: 17px 0 0; } .widget-orders .widget__head ul li:nth-child(3) { position: absolute; top: 0; right: 0; margin: 0; text-align: right; } .widget-orders .widget__head ul li:nth-child(4) { max-width: 100%; text-align: left; line-height: 1.2; } } @media (max-width: 767px) { .widget-orders .widget__head { padding: 15px 8px 20px; } .widget-orders .widget__head ul li a:first-child { top: 4px; right: 8px; } .widget-orders .widget__head ul li:nth-child(3) { top: -4px; right: 5px; } } /* ------------------------------------------------------------ *\ Widget Callout \* ------------------------------------------------------------ */ .widget-callout h2 { font-size: 18px; line-height: 1.17; font-weight: 400; margin-bottom: 13px; } .widget-callout h3 { font-size: 16px; font-weight: 700; margin-bottom: 0; } .widget-callout h3 + p { margin: 5px 0 0; } .widget-callout p { font-size: 12px; line-height: 1.17; } /* ------------------------------------------------------------ *\ Widget Quaternary \* ------------------------------------------------------------ */ .widget-quaternary { text-align: center; display: inline-block; position: relative; vertical-align: top; min-width: 220px; } .widget-quaternary p { font-size: 12px; line-height: 1.17; margin: 6px 0 0; } .widget-quaternary p + h5 { font-size: 15px; font-weight: 400; margin: 35px 0 0; } .widget-quaternary h5 + .link-alt { margin: 20px 0 0; } .widget-quaternary h6 { font-weight: 400; font-size: 12px; line-height: 1.17; margin: 4px 0 0; } .widget-quaternary h6 strong { font-weight: 600; } .widget-quaternary .widget__ico { display: inline-block; position: relative; border: 2px solid #0092C7; border-radius: 50%; width: 90px; height: 90px; } .widget-quaternary .widget__ico i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .widget-quaternary .widget__ico span { display: inline-block; border-radius: 50%; background: #0092C7; color: #fff; font-size: 12px; font-weight: 700; width: 20px; height: 20px; text-align: center; font-style: normal; padding-top: 3px; position: absolute; top: -3px; left: 9px; } .widget-quaternary .form__controls { margin: 13px 0 0; } .widget-quaternary .form__controls + .link-alt { margin: 13px 0 0; } .widget-quaternary .form-upload { margin: 30px 0 0; } .widget-quaternary + .widget-quaternary { margin-left: 56px; } .widget-quaternary + .widget-quaternary:after { content: ''; position: absolute; top: 35px; left: -30px; background: url(../images/icons/ico-angle-right-blue.svg) no-repeat 0 0; width: 12px; height: 24px; background-size: 100% 100%; } /* Widget Quaternary Alt */ .widget-quaternary--alt { min-width: 103px; } @media (max-width: 1023px) { .widget-quaternary { min-width: 185px; } .widget-quaternary + .widget-quaternary { margin-left: 45px; } /* Widget Quaternary Alt */ .widget-quaternary--alt { min-width: 0; width: 110px; } .widget-quaternary--alt br { display: none; } .widget-quaternary--alt + .widget-quaternary--alt { margin-left: 29px; } .widget-quaternary--alt + .widget-quaternary--alt:after { left: -20px; } } @media (max-width: 767px) { .widget-quaternary { max-width: 220px; margin: 14px auto 0; display: block; } .widget-quaternary + .widget-quaternary { margin: 71px auto 0; } .widget-quaternary + .widget-quaternary:after { -webkit-transform: rotate(90deg) translateX(-50%); -ms-transform: rotate(90deg) translateX(-50%); transform: rotate(90deg) translateX(-50%); top: -45px; left: 50%; margin-left: -5px; } /* Widget Quaternary Alt */ .widget-quaternary--alt { width: 125px; } .widget-quaternary--alt + .widget-quaternary--alt { margin-top: 73px; } } /* ------------------------------------------------------------ *\ Themes \* ------------------------------------------------------------ */ /* Edit */ .checkout_pdt{max-height: 67px;} .product-list-style { margin-left: 15px; color: #0092C7;} .product-list-style span { color: #262A39;} .product.product--primary.product--primary-alt { margin: 0 5px;} /* Pages Annexes */ .section-pages-annexes h3 { font-size: 14px; } .section-pages-annexes table td { border : 1px solid black; padding: 3px; } .section-pages-annexes ul { margin-left : 45px; list-style: none; padding: 0;} .section-pages-annexes ul li { position: relative; padding-left: 0.9375em; display: block; } .section-pages-annexes ul li::before { content: ""; background: #0092c7; border-radius: 50%; height: 0.3125em; left: 0; position: absolute; top: 0.45em; width: 0.3125em; } /* Error 404 Page */ #error404 { text-align: center; } #error404 h2 { font-size: 32px; font-weight: 900; } #error404 a { background: linear-gradient(to right, #0092c7 0%,#0092c7 100%) center bottom no-repeat; background-size: 100% 2px; text-decoration: none; transition: color 0.25s ease-out; } #error404 a:hover { color: #0092c7; } .span-as-select { color: #0092C7; position: relative; /*top: 4px;*/ right: -22px; font-weight: 500;} .errorMsg { margin: 25px 25px 25px 0; color: #ff355a; font-size: 0.75rem; } #stickyBox .errorMsg { margin-bottom: -25px; } /* Mondial relay */ #Zone_Widget{width: 100%; margin-bottom: 10px;} #Zone_Widget .MR-Widget{width: 95%;} #Zone_Widget .MRW-Line{width: 80%; float: right;} .MR-Widget .MRW-Search {padding-top: 38px !important;} .MR-Widget .MRW-Results{overflow: initial !important;} .MRW-Map{width: 100% !important;} /* END MONDIAL RELAY */ .rightside{float:right;} /* ------------------------------------------------------------ *\ Product Single \* ------------------------------------------------------------ */ .product-showcase { position: relative; } .product-showcase .product__link { position: relative; z-index: 1; display: block; width: 100%; height: 100%; padding: 0 10px 19px; text-align: center; text-decoration: none; color: #262a39; } .product-showcase .product__link:after { content: ''; position: absolute; bottom: 0; left: 10px; right: 10px; z-index: -1; height: 0; background: rgba(0, 146, 199, .10); -webkit-transition: height 0.5s ease-out; -o-transition: height 0.5s ease-out; transition: height 0.5s ease-out; } .product-showcase .product__actions { position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-top: 26px; opacity: 0; -webkit-transition: opacity 0.5s ease-out; -o-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .product-showcase .btn { min-width: 113px; padding: 10px 10px 11px; } .product-showcase figure { position: relative; top: 0; height: 300px; margin-top: 30px; margin-bottom: 30px; -webkit-transition: top 0.5s ease-out; -o-transition: top 0.5s ease-out; transition: top 0.5s ease-out; } .product-showcase figure img { position: absolute; bottom: 0; left: 0; right: 0; max-height: 100%; margin: 0 auto; -webkit-filter: drop-shadow(20px 10px 15px rgba(38,42,57,0.3)); filter: drop-shadow(20px 10px 15px rgba(38,42,57,0.3)); } .product-showcase h5 { margin-bottom: 11px; font-weight: bold; font-size: 14px; text-transform: uppercase; } .product-showcase p { margin-bottom: 15px; font-size: 12px; line-height: 1.25; text-transform: uppercase; } .product-showcase small { font-size: 12px; line-height: 1.25; color: #5d6f7b; text-transform: none; } .product-showcase:hover .product__link:after, .product-showcase:focus .product__link:after { height: 347px; } .product-showcase:hover .product__link figure { top: -10px; } .product-showcase:hover .product__actions { opacity: 1; } @media (max-width: 767px) { .product-showcase figure { height: 200px; } .product-showcase .product__actions { margin-top: -26px; } } /* ------------------------------------------------------------ *\ List Rating \* ------------------------------------------------------------ */ .list-rating { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 34px 0 0; } .list-rating li + li { margin-left: 3px; } .list-rating li.active span { border-bottom-color: #0092c7; } .list-rating span { display: inline-block; width: 12px; border-bottom: 9px solid #d7e1e7; border-left: 4px solid transparent; border-right: 4px solid transparent; } @media (max-width: 767px) { .list-rating { margin: 15px 0 0; } } /* ------------------------------------------------------------ *\ Section FAQ \* ------------------------------------------------------------ */ .section-faq { padding: 48px 0; } .section-faq .shell { max-width: 1020px; } .section-faq .section__head { margin-bottom: 98px; text-align: center; } .section-faq .section__head:last-child { margin-bottom: 0; } .section-faq .section__title { font-size: 20px; line-height: 1.36; font-weight: bold; text-transform: uppercase; } /* --secondary */ .section-faq--secondary { padding-top: 0; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-faq .section__head { margin-bottom: 50px; } } /* Mobile */ @media (max-width: 767px) { .section-faq { padding: 20px 0; } .section-faq .section__head { margin-bottom: 21px; } .section-faq .section__title { font-size: 18px; line-height: 1.23; } .section-faq--secondary { padding-top: 0; } } /* ------------------------------------------------------------ *\ Section Boxes \* ------------------------------------------------------------ */ .section-boxes { padding: 50px 0; } .section-boxes .section__head { margin-bottom: 50px; text-align: center; } .section-boxes .section__head:last-child { margin-bottom: 0; } .section-boxes .section__title { font-size: 18px; line-height: 1.23; font-weight: bold; text-transform: uppercase; } /* Mobile */ @media (max-width: 767px) { .section-boxes { padding: 20px 0; } .section-boxes .section__head { margin-bottom: 20px; } .section-boxes .section__title { font-size: 16px; line-height: 1.24; } } /* ------------------------------------------------------------ *\ Section Search \* ------------------------------------------------------------ */ .section-search { padding: 50px 0; } .section-search .shell { position: relative; } .section-search .section__head { padding-top: 55px; margin-bottom: 50px; text-align: center; } .section-search .section__head .link-back { display: none; } .section-search .section__head .breadcrumps { position: absolute; top: -9px; left: 0; text-align: left; } .section-search .section__head img { margin-bottom: -39px; } .section-search .section__head:last-child { margin-bottom: 0; } .section-search .section__title { margin-bottom: 12px; font-size: 18px; line-height: 1.34; font-weight: bold; text-transform: uppercase; } .section-search .section__title:last-child { margin-bottom: 0; } .section-search .section__title--secondary { margin-bottom: 17px; font-size: 20px; line-height: 1.36; } .section-search .section__title--secondary span { text-transform: none; } .section-search .section__foot { margin-top: 100px; font-size: 18px; line-height: 1.79; text-align: left; } .section-search .section__foot:first-child { margin-top: 0; } .section-search .section__foot--center { text-align: center; } .section-search .section__foot--border-bottom { padding-bottom: 97px; border-bottom: 2px solid rgba(95,135,160,.2); } /*.section-search .section__foot--border-bottom-secondary { padding-bottom: 50px; border-bottom: 2px solid rgba(95,135,160,.2); margin-top: 50px; } */ /* Tablet Portrait */ @media (max-width: 1023px) { .section-search .section__head .breadcrumps { left: 15px; } } /* Mobile */ @media (max-width: 767px) { .section-search { padding: 26px 0 21px; border-top: 2px solid rgba(95,135,160,.2); margin-top: 4px; } .section-search .section__head { padding-top: 0; margin-bottom: 20px; } .section-search .section__head img { max-width: calc(100% + 80px); margin: 0 -40px -20px; } .section-search .section__head .link-back { position: absolute; top: -17px; left: 10px; display: inline-block; } .section-search .section__title { padding: 0 20px; margin-bottom: 11px; font-size: 16px; line-height: 1.24; } .section-search .section__title--secondary { padding: 0; margin-bottom: 16px; font-size: 18px; line-height: 1.24; } .section-search .section__foot { margin-top: 40px; font-size: 16px; line-height: 1.32; } .section-search .section__foot--border-bottom { padding-bottom: 43px; } .section-search .section__foot--border-bottom-secondary { padding-bottom: 19px; } } /* ------------------------------------------------------------ *\ Search \* ------------------------------------------------------------ */ .search { margin-right: 10px; width: 44px; } .search .search__btn { position: absolute; opacity: 0; visibility: hidden; } .search .search__field { border-radius: 0; border: none; background: none; font-size: 9px; color: #6A92AA; width: 100%; } @media (max-width: 767px) { .search .search__btn { display: none; } } /* ------------------------------------------------------------ *\ Search Secondary \* ------------------------------------------------------------ */ .search-secondary { max-width: 602px; margin-right: auto; margin-left: auto; } .search-secondary form { position: relative; } .search-secondary form > i { position: absolute; top: 12px; right: 12px; pointer-events: none; } .search-secondary .search__close { display: none; } .search-secondary .search__field { width: 100%; height: 40px; padding: 0 120px 0 11px; border: 2px solid #0092C7; border-radius: 2px; background: #E6ECF0; font-size: 16px; line-height: 36px; color: #262A39; font-weight: normal; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .search-secondary .search__field::-webkit-input-placeholder { color: rgba(38,42,57,.5); opacity: 1; } .search-secondary .search__field:-ms-input-placeholder { color: rgba(38,42,57,.5); opacity: 1; } .search-secondary .search__field::-ms-input-placeholder { color: rgba(38,42,57,.5); opacity: 1; } .search-secondary .search__field::placeholder { color: rgba(38,42,57,.5); opacity: 1; } .search-secondary .search__field::-ms-clear { display: none; } .search-secondary .search__btn { position: absolute; right: 0; top: 0; z-index: 200; min-width: 109px; height: 40px; padding: 0 15px; border: 2px solid #0092C7; background: #0092C7; font-size: 12px; line-height: 36px; color: #fff; font-weight: bold; text-transform: uppercase; text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; opacity: 0; visibility: hidden; } .search-secondary .search__btn i { display: none; } .search-secondary .search__dropdown { position: absolute; top: 100%; right: 0; left: 0; z-index: 15; display: none; padding: 11px 0; border-radius: 2px; background: #fff; line-height: 1.44; text-align: left; -webkit-box-shadow: 2px 31px 25px rgba(169,169,169,.2); box-shadow: 2px 31px 25px rgba(169,169,169,.2); } .search-secondary .search__dropdown ul { list-style: none; } .search-secondary .search__dropdown strong { font-weight: 500; } .search-secondary .search__dropdown a { display: block; padding: 10px 36px; text-decoration: none; } .search-secondary .search__dropdown a:hover { background: #eee; } .search-secondary.filled .search__btn { opacity: 1; visibility: visible; } .search-secondary.show-dropdown .search__dropdown { display: block; } /* Tablet Portrait */ @media (max-width: 1023px) { .search-secondary .search__dropdown a:hover { background: #fff; } } /* Mobile */ @media (max-width: 767px) { .search-secondary { min-height: 40px; } .search-secondary form { height: auto; } .search-secondary form > i { right: 10px; } .search-secondary .search__close { position: absolute; top: 10px; right: 10px; width: 30px; height: 40px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .search-secondary .search__field { padding-right: 11px; font-size: 16px; } .search-secondary .search__field::-webkit-input-placeholder { font-size: 12px; } .search-secondary .search__field:-ms-input-placeholder { font-size: 12px; } .search-secondary .search__field::-ms-input-placeholder { font-size: 12px; } .search-secondary .search__field::placeholder { font-size: 12px; } .search-secondary .search__btn { display: none; right: auto; left: 20px; top: 22px; min-width: auto; height: auto; padding: 0; border: 0; background: none; line-height: normal; opacity: 1; visibility: visible; } .search-secondary .search__btn i { display: inline-block; } .search-secondary .search__btn span { display: none; } .search-secondary .search__dropdown { top: 50px; right: 10px; left: 10px; padding: 0; border-radius: 0 0 5px 5px; line-height: 1.32; -webkit-box-shadow: 2px 6px 13px rgba(169,169,169,.35); box-shadow: 2px 6px 13px rgba(169,169,169,.35); } .search-secondary .search__dropdown a { padding: 11px 10px; } .search-secondary.show-popup { -webkit-box-shadow: 2px 6px 13px rgba(169,169,169,.35); box-shadow: 2px 6px 13px rgba(169,169,169,.35); } .search-secondary.show-popup form { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; padding: 10px; background: #fff; -webkit-animation: showSearchPopup .4s; animation: showSearchPopup .4s; } .search-secondary.show-popup form > i { display: none; } .search-secondary.show-popup .search__close { display: -webkit-box; display: -ms-flexbox; display: flex; } .search-secondary.show-popup .search__btn { display: inline-block; } .search-secondary.show-popup .search__field { padding: 0 34px; border-color: #81A1B5; } } @-webkit-keyframes showSearchPopup { 0% { background: transparent; } 100% { background: #fff; } } @keyframes showSearchPopup { 0% { background: transparent; } 100% { background: #fff; } } /* ------------------------------------------------------------ *\ Boxes \* ------------------------------------------------------------ */ .boxes { max-width: 960px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; } .boxes .box { width: calc(25% - 50px); margin: 0 25px; } .boxes .box:nth-child(n+5) { margin-top: 51px; } /* Tablet Portrait */ @media (max-width: 1023px) { .boxes .box { width: calc(25% - 24px); margin: 0 12px; } .boxes .box:nth-child(n+5) { margin-top: 24px; } } /* Mobile */ @media (max-width: 767px) { .boxes { margin: 0 -5px; } .boxes .box { width: calc(50% - 10px); margin: 0 5px; } .boxes .box:nth-child(n+3) { margin-top: 15px; } .boxes .box:nth-child(n+5) { margin-top: 15px; } } /* ------------------------------------------------------------ *\ Box \* ------------------------------------------------------------ */ .box { position: relative; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 2px solid transparent; background: #fff; -webkit-box-shadow: 2px 6px 13px rgba(169,169,169,.35); box-shadow: 2px 6px 13px rgba(169,169,169,.35); text-align: center; text-decoration: none; -webkit-transition: top .4s; -o-transition: top .4s; transition: top .4s; } .box .box__content { width: 100%; padding: 28px; font-size: 15px; line-height: 1.22; font-weight: bold; } .box i { display: block; margin: 0 auto 10px; } .box:hover { top: -10px; } /* --blue */ .box--blue { border-color: #0092C7; } /* Tablet Portrait */ @media (max-width: 1023px) { .box .box__content { padding: 18px; } .box:hover { top: 0; } } /* Mobile */ @media (max-width: 767px) { .box { -webkit-box-shadow: 2px 5px 10px rgba(169,169,169,.35); box-shadow: 2px 5px 10px rgba(169,169,169,.35); } .box .box__content { padding: 19px; font-size: 12px; line-height: 1.22; } } /* ------------------------------------------------------------ *\ List FAQ \* ------------------------------------------------------------ */ .list-faq { font-size: 22px; line-height: 1; } .list-faq li { position: relative; margin-bottom: 34px; } .list-faq li:last-child { margin-bottom: 0; } .list-faq i { position: absolute; top: 3px; right: 0; -webkit-transition: right .4s; -o-transition: right .4s; transition: right .4s; } .list-faq a { display: block; padding-right: 40px; text-decoration: none; } .list-faq a:hover i { right: -10px; } /* Tablet Portrait */ @media (max-width: 1023px) { .list-faq { font-size: 18px; } .list-faq a:hover i { right: 0; } } /* Mobile */ @media (max-width: 767px) { .list-faq { font-size: 16px; line-height: 1.32; } .list-faq li { margin-bottom: 18px; } .list-faq i { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .list-faq a { padding-right: 55px; } } /* ------------------------------------------------------------ *\ Callout \* ------------------------------------------------------------ */ .callout { padding: 56px 0; margin: 56px 0 0px; text-align: center; } .callout:first-child { margin-top: 0; } .callout:last-child { margin-bottom: 0; } .callout .callout__title { max-width: 380px; margin: 0 auto 23px; font-size: 18px; line-height: 1.28; font-weight: bold; text-transform: uppercase; } .callout .callout__title:last-child { margin-bottom: 0; } .callout .btn { min-width: 198px; } /* Mobile */ @media (max-width: 767px) { .callout { padding: 22px 0; margin: 42px 0 0; } .callout .callout__title { margin-bottom: 22px; font-size: 16px; line-height: 1.24; } } .ico-angle-right-blue-md { background-image: url(../images/icons/ico-angle-right-blue-md.svg); width: 12px; height: 18px; } .ico-search-md { background-image: url(../images/icons/ico-search-md.svg); width: 16px; height: 16px; }