/* Table of Contents I. Generic -------------------------------------- 01. Reset ------------------------------------ 02. Base ------------------------------------- 03. Fonts ------------------------------------ 04. Helpers ---------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Text center ------------------------------ Alignleft -------------------------------- Alignright ------------------------------- Aligncenter ------------------------------ Disabled --------------------------------- Grid ------------------------------------- Responsive Helpers ----------------------- II. Regions -------------------------------------- 01. Container -------------------------------- 02. Container solid -------------------------- 03. Container dark --------------------------- 04. Content ---------------------------------- 05. Footer ----------------------------------- 06. Footer light ----------------------------- 07. Footer solid ----------------------------- 08. Header ----------------------------------- 09. Header secondary ------------------------- 10. Main ------------------------------------- 11. Shell ------------------------------------ 12. Sidebar ---------------------------------- 13. Wrapper ---------------------------------- III. Modules -------------------------------------- 01. Accordion -------------------------------- 02. Actions primary -------------------------- 03. Button ----------------------------------- Button Block ----------------------------- Button default --------------------------- Button outline warning ------------------- Button more ------------------------------ Button large ----------------------------- Button primary --------------------------- Button download -------------------------- Button small ----------------------------- Button small ----------------------------- Button warning --------------------------- Button lighter blue ---------------------- Button light blue ------------------------ Button blue ------------------------------ Button dark blue ------------------------- Button darker blue ----------------------- 04. Features primary ------------------------- 05. Features secondary ----------------------- 06. Form Elements ---------------------------- 07. Form ------------------------------------- 08. Intro ------------------------------------ 09. Link ------------------------------------- 10. List ------------------------------------- 11. List colors ------------------------------ 12. List primary ----------------------------- 13. List progress ---------------------------- 14. List images ------------------------------ 15. Logo ------------------------------------- 16. Nav -------------------------------------- 17. Nav secondary ---------------------------- 18. Nav btn ---------------------------------- 19. Nav trigger ------------------------------ 20. Nav sticky ------------------------------- 21. Popup ------------------------------------ 22. Popup image ------------------------------ 23. Section ---------------------------------- 24. Section about ---------------------------- 25. Section solid ---------------------------- 26. Section main ----------------------------- 27. Section alt ------------------------------ 28. Section main secondary ------------------- 29. Section main border ---------------------- 30. Section installation --------------------- 31. Section installation solid --------------- 32. Section details -------------------------- 33. Section slider --------------------------- 34. Section slider secondary ----------------- 35. Section info ----------------------------- 36. Section info main ------------------------ 37. Section info secondary ------------------- 38. Slider ----------------------------------- 39. Slider primary --------------------------- 40. Slider secondary ------------------------- 41. Steps ------------------------------------ 42. Step ------------------------------------- 43. Table ------------------------------------ 44. Tiles ------------------------------------ 45. Tile ------------------------------------- 46. Tiles secondary -------------------------- 47. Tiles tertiary --------------------------- 48. Tiles main ------------------------------- 49. Tiles list ------------------------------- 50. Tiles secondary alt ---------------------- 51. Widget ----------------------------------- IV. Themes --------------------------------------- */ .ico-arrow { background-image: url(images/sprite.png); background-position: 64.74820143884892% 70.83333333333334%; background-size: 1490% 1300%; width: 10px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-clock { background-image: url(images/sprite.png); background-position: 0% 100%; background-size: 827.7777777777778% 619.047619047619%; width: 18px; height: 21px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-design { background-image: url(images/sprite.png); background-position: 96.12403100775194% 53.333333333333336%; background-size: 745% 1300%; width: 20px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-download { background-image: url(images/sprite.png); background-position: 31.386861313868614% 93.96551724137932%; background-size: 1241.6666666666665% 928.5714285714287%; width: 12px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-drawings { background-image: url(images/sprite.png); background-position: 18.6046511627907% 77.27272727272727%; background-size: 745% 650%; width: 20px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-file { background-image: url(images/sprite.png); background-position: 0% 44.9438202247191%; background-size: 392.10526315789474% 317.0731707317073%; width: 38px; height: 41px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-installation { background-image: url(images/sprite.png); background-position: 96.12403100775194% 36.36363636363637%; background-size: 745% 650%; width: 20px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-person { background-image: url(images/sprite.png); background-position: 52.63157894736842% 72.03389830508475%; background-size: 931.25% 1083.3333333333335%; width: 16px; height: 12px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play-white { background-image: url(images/sprite.png); background-position: 74.10714285714286% 43.01075268817204%; background-size: 402.7027027027027% 351.35135135135135%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play { background-image: url(images/sprite.png); background-position: 37.5% 43.01075268817204%; background-size: 402.7027027027027% 351.35135135135135%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search { background-image: url(images/sprite.png); background-position: 0% 77.27272727272727%; background-size: 745% 650%; width: 20px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-submittal { background-image: url(images/sprite.png); background-position: 16.666666666666664% 100%; background-size: 876.4705882352941% 619.047619047619%; width: 17px; height: 21px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-testing { background-image: url(images/sprite.png); background-position: 36.6412213740458% 77.27272727272727%; background-size: 827.7777777777778% 650%; width: 18px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .logo { background-image: url("../../images/knclogo.png"); width: 167px; height:40px; background-size: contain; display: inline-block; vertical-align: middle; font-size: 0; background-repeat:no-repeat;} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ico-arrow { background-image: url(images/sprite.@2x.png); background-position: 95.625% 49.166666666666664%; background-size: 1700% 1300%; width: 10px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-clock { background-image: url(images/sprite.@2x.png); background-position: 0% 100%; background-size: 944.4444444444445% 619.047619047619%; width: 18px; height: 21px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-design { background-image: url(images/sprite.@2x.png); background-position: 82.66666666666667% 53.333333333333336%; background-size: 850% 1300%; width: 20px; height: 10px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-download { background-image: url(images/sprite.@2x.png); background-position: 96.52996845425868% 35.3448275862069%; background-size: 1478.2608695652175% 928.5714285714287%; width: 11.5px; height: 14px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-drawings { background-image: url(images/sprite.@2x.png); background-position: 0% 77.27272727272727%; background-size: 850% 650%; width: 20px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-file { background-image: url(images/sprite.@2x.png); background-position: 0% 44.9438202247191%; background-size: 447.3684210526316% 317.0731707317073%; width: 38px; height: 41px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-installation { background-image: url(images/sprite.@2x.png); background-position: 82.66666666666667% 36.36363636363637%; background-size: 850% 650%; width: 20px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-person { background-image: url(images/sprite.@2x.png); background-position: 99.35064935064936% 21.1864406779661%; background-size: 1062.5% 1083.3333333333335%; width: 16px; height: 12px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play-white { background-image: url(images/sprite.@2x.png); background-position: 62.40601503759399% 43.01075268817204%; background-size: 459.4594594594595% 351.35135135135135%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-play { background-image: url(images/sprite.@2x.png); background-position: 31.57894736842105% 43.01075268817204%; background-size: 459.4594594594595% 351.35135135135135%; width: 37px; height: 37px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-search { background-image: url(images/sprite.@2x.png); background-position: 15.946843853820598% 76.92307692307693%; background-size: 871.7948717948717% 666.6666666666667%; width: 19.5px; height: 19.5px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-submittal { background-image: url(images/sprite.@2x.png); background-position: 100% 0%; background-size: 1000% 619.047619047619%; width: 17px; height: 21px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-testing { background-image: url(images/sprite.@2x.png); background-position: 14.473684210526317% 99.0909090909091%; background-size: 944.4444444444445% 650%; width: 18px; height: 20px; display: inline-block; vertical-align: middle; font-size: 0; } .logo { background-image: url("../../images/knclogo.png"); width: 167px; height:40px; background-size: contain; display: inline-block; vertical-align: middle; font-size: 0; background-repeat:no-repeat; }} .cols:after { content: ''; line-height: 0; display: table; clear: both; } /* ------------------------------------------------------------ *\ I. Generic \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Reset \* ------------------------------------------------------------ */ *, *:before, *:after { padding: 0; margin: 0; outline: 0; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main { display: block; } html { tap-highlight-color: rgba(0,0,0,0); } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } img, iframe, video, audio, object { max-width: 100%; } img, iframe { border: 0 none; } img { height: auto; display: inline-block; vertical-align: middle; } b, strong { font-weight: bold; } address { font-style: normal; } svg:not(:root) { overflow: hidden; } a, button, input[type="submit"], input[type="button"], input[type="reset"], input[type="file"], input[type="image"], label[for] { cursor: pointer; } a[href^="tel"], button[disabled], input[disabled], textarea[disabled], select[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea, a[href^="tel"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; color: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } button, select { text-transform: none; } table { width: 100%; border-collapse: collapse; border-spacing: 0; } nav ul, nav ol { list-style: none outside none; } /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ body { min-width: 320px; background: #fff; font-family: 'Lato', sans-serif; font-size: 14px; line-height: 1.3; color: #0b3661; } a { color: inherit; text-decoration: underline; transition: color .4s; } a:hover { text-decoration: none; } a[href^="tel"] { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.65em; } h1 { font-size: 40px; font-weight: 400; } h2 { font-size: 34px; font-weight: bold; color: #EC6843; } h3 { font-size: 24px; font-weight: bold; } h4 { font-size: 18px; font-weight: 400; color: #ec6843; } h5 { font-size: 14px; font-weight: 700; color: #ec6843; } h6 { font-size: 12px; } p, ul, ol, dl, table, blockquote { margin-bottom: 1.3em; } h1[class], h2[class], h3[class], h4[class], h5[class], h6[class], h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child { margin-bottom: 0; } @media (max-width: 1200px) { h1 { font-size: 36px; } } @media (max-width: 1023px) { h1 { font-size: 28px; } h2 { font-size: 26px; } h3 { font-size: 22px; } } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* Clear */ .clear:after { content: ''; line-height: 0; display: table; clear: both; } /* Notext */ .notext { white-space: nowrap; text-indent: 100%; text-shadow: none; overflow: hidden; } .notext-old { font-size: 0; line-height: 0; text-indent: -4000px; } /* Hidden */ [hidden], .hidden { display: none; } /* Text center */ .text-center { text-align: center; } /* Alignleft */ .alignleft { float: right; margin-right: 20px; margin-top: 20px; } /* Alignright */ .alignright { float: right; margin-left: 20px; margin-top: 20px; } /* Aligncenter */ .aligncenter { float: right; margin: 0 auto 20px; } /* Disabled */ [disabled], .disabled { cursor: default; } /* Grid */ .cols { margin: 0 -15px; display: flex; justify-content: space-between; } .cols:after { } .col { width: 100%; padding: 0 15px; } .col-1of2 { width: 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col--1of2 { width: 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%;} .col--1of3 { width: 33.33%; -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; } .col--1of4 { width: 25%; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } /* 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: 1200px) { .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: 1201px) { .hidden-lg { display: none !important; } .visible-lg-block { display: block !important; } .visible-lg-inline { display: inline !important; } .visible-lg-inline-block { display: inline-block !important; } } /* ------------------------------------------------------------ *\ II. Regions \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ .container { margin-left: 244px; padding-top: 68px; overflow: hidden; } @media (max-width: 1023px) { .container { margin-left: 0; } } @media (max-width: 767px) { .container { padding-top: 48px; } } /* ------------------------------------------------------------ *\ Container solid \* ------------------------------------------------------------ */ .container--solid { background-color: #f6fbff; } /* ------------------------------------------------------------ *\ Container dark \* ------------------------------------------------------------ */ .container--dark { background-color: #0b3662; } /* ------------------------------------------------------------ *\ Content \* ------------------------------------------------------------ */ .content {} /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { padding: 0 60px; background-color: #f9fbfd; margin-left: 244px; padding-right: 80px; position: relative; z-index: 20; } .footer p { float: left; display: block; width: 70%; } .footer p span { display: inline-block; padding: 0 5px; } .footer a { color: rgb(0,48,135); text-decoration: none; font-size: 14px; font-weight: normal; } .footer a:hover { color: #ec6843; text-decoration: none; } .footer #social-media { float: right; } .footer .top-border { border-top: 1px solid #aaa; padding: 30px 0; display: block; } .footer .top-border:after { content: ''; line-height: 0; display: table; clear: both; } @media (max-width: 1023px) { .footer { margin-left: 0; padding: 0 20px; } } @media (max-width: 767px) { .footer p { float: none; width: 100%; } .footer #social-media { float: none; margin-bottom: 20px; } } /* ------------------------------------------------------------ *\ Footer light \* ------------------------------------------------------------ */ .footer--light { background-color: #fff; } /* ------------------------------------------------------------ *\ Footer solid \* ------------------------------------------------------------ */ .footer--solid { background-color: #0b3662; color: #fff; } .footer--solid a { color: #fff; } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header {} .header .header__bar { position: fixed; top: 0; left: 0; width: 100%; background-color: #0b3661; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; z-index: 40; } .header .header__bar-content { height: 69px; position: fixed; top: 0; right: 40px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; } .header .nav--secondary { border-top: 2px solid #fff; padding: 0 94px 0 0; position: fixed; top: 0; left: 0; width: 100%; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; background-color: #0b3661; z-index: 20; } .header .nav--secondary ul { width: 43%; -ms-flex-pack: justify; justify-content: space-between; } .header .nav--secondary ul ul { width: 160px; } .header .nav--secondary ul ul ul { width: 200px; } .header .header__bar-inner { height: 104px; width: 256px; display: inline-block; background: #fff; vertical-align: top; padding: 21px 0 10px 0; position: absolute; top: 0; left: 0; } .header .header__bar-inner:before { content: ''; width: 0; height: 0; display: inline-block; border-bottom: 104px solid transparent; border-left: 46px solid #fff; border-right: 10px solid transparent; position: absolute; top: 0; left: 100%; } .header .nav { position: fixed; top: 0; left: 0; width: 244px; background-color: #0b3661; height: 100vh; padding: 116px 0 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 30; } .header .logo { display: block; margin-left: 54px; margin-bottom: 17px; } .header .search { position: relative; top: 3px; } .header .search i { transition: opacity .4s; } .header .search:hover i { opacity: .6; } @media (min-width: 1400px) {.header .nav--secondary ul { width: 31%;}} @media (max-width: 1023px) { .header .header__bar-content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; background: #0b3661; width: 100%; position: static; padding: 0 30px 0 230px; } .header .header__bar-inner { width: 320px; padding: 17px 0 10px 0; height: 69px; } .header .header__bar-inner:before { border-bottom: 70px solid transparent; border-left: 36px solid #fff; border-right: 10px solid transparent; } .header .header__content { position: static; display: block; width: 303px; } .header .header__aside { -ms-transform: translateX(-100%); transform: translateX(-100%); height: 100vh; background-color: #0b3661; position: fixed; top: 0; left: 0; width: 303px; z-index: 30; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: transform .4s; padding-top: 69px; } .header .header__aside.visible { -ms-transform: translateX(0); transform: translateX(0); } .header .nav { position: static; width: 303px; padding: 0; } .header .nav--secondary { display: none; padding: 0 100px; position: static; width: 303px; border-top: 0; } .header .nav--secondary.visible { display: block; } .header .nav-btn { padding: 12px 10px 8px 51px; color: #add6fa; font-size: 12px; font-weight: 700; text-transform: uppercase; margin: 12px 0 0 0; border-bottom: 1px solid #297fca; } .header .nav-btn:before { left: 35px; } .header .nav-btn:after { left: 38px; } .header .nav-trigger { margin-right: 20px; margin-bottom: 2px; } .header .search { top: 0px; } .header .nav--secondary ul { -ms-flex-pack: justify; justify-content: space-between; } .header .nav--secondary ul ul { width: 100%; } } @media (max-width: 767px) { .header .header__bar-inner { width: 216px; padding: 14px 0 5px 20px; height: 48px; } .header .header__bar-inner:before { border-bottom: 48px solid transparent; border-left: 20px solid #fff; border-right: 10px solid transparent; } .header .header__aside { padding-top: 48px; } .header .header__bar-content { height: 48px; padding: 0 20px 0 200px; } .header .logo { width: 112px; height: 27px; margin-left: 0; margin-bottom: 0; } .header .search { top: 2px; } .header .search i { width: 14px; height: 14px; } .header .nav-trigger { margin-right: 16px; margin-bottom: 0; position: relative; top: 3px; } } /* ------------------------------------------------------------ *\ Header secondary \* ------------------------------------------------------------ */ @media (max-width: 767px) { .header--secondary .logo { margin-left: 10px; } } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ .main {} /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: calc(100% + 60px * 2); padding-left: 60px; padding-right: 60px; margin: auto; } .shell-fluid { max-width: none; } @media (max-width: 1023px) { .shell { padding: 0 20px; } } /* ------------------------------------------------------------ *\ Sidebar \* ------------------------------------------------------------ */ .sidebar {} /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { min-height: 100vh; } /* ------------------------------------------------------------ *\ III. Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Accordion \* ------------------------------------------------------------ */ .accordion .accordion__head { position: relative; cursor: pointer; padding: 15px 40px 15px; background: #fff; margin: 0 -40px; } .accordion .accordion__head:before { content: ''; display: inline-block; height: 1px; background: #9b9b9b; position: absolute; bottom: 0; left: 40px; right: 40px; } .accordion .accordion__head h2 { margin-bottom: 0; font-size: 30px; position: relative; display: inline-block; padding-right: 26px; } .accordion .accordion__head h2:before { content: ''; width: 8px; height: 8px; display: inline-block; border-left: 2px solid #ec6843; border-top: 2px solid #ec6843; -ms-transform: rotate(135deg); transform: rotate(135deg); position: absolute; top: 18px; right: 0; transition: transform .4s, border-color .4s, top .4s, right .4s; } .accordion .accordion__body { display: none; margin: 0 -40px; padding: 20px 40px 25px 40px; background-color: #f9fbfd; } .accordion__section.active .accordion__head h2:before { -ms-transform: rotate(225deg); transform: rotate(225deg); } @media(max-width: 1320px) { .accordion .accordion__body { display: none; margin: 0 -40px; padding: 20px 40px 25px; } } @media (max-width: 1023px) { .accordion .accordion__head { margin: 0 -20px; padding: 15px 20px 15px; } .accordion .accordion__head:before { left: 20px; right: 20px; } .accordion .accordion__head h2 { font-size: 24px; } .accordion .accordion__head h2:before { top: 13px; } .accordion .accordion__body { display: none; margin: 0 -20px; padding: 20px 20px 25px; } } @media (max-width: 767px) { .accordion .accordion__head h2 { font-size: 23px; } .accordion .accordion__head h2:before { top: 10px; } .accordion .accordion__body { margin: 0 -20px; padding: 9px 20px 5px 71px; } .accordion .accordion__body-secondary { padding-left: 20px; } .accordion .tiles-list .tile .link-popup { font-size: 16px; } .accordion .tiles__actions { display: none; } } /* ------------------------------------------------------------ *\ Actions primary \* ------------------------------------------------------------ */ .actions-primary ul { margin-bottom: 0; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } .actions-primary li + li { margin-left: 10px; } .actions-primary .checkbox { margin-top: 4px; } .actions-primary .btn { margin-top: 0 !important; font-size: 12px; padding: 7px 18px 7px 31px; } .actions-primary .btn i { width: 7px; height: 9px; } .actions-primary .btn--small { font-size: 8px; padding: 7px 18px 7px 26px; } /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { display: inline-block; vertical-align: middle; text-align: center; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Button Block */ .btn-block { display: block; padding-left: 0; padding-right: 0; } /* Button default */ .btn--default { position: relative; font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none; padding: 8px 20px 8px; transition: color .4s, background .4s; } /* Button outline warning */ .btn--outline-warning { color: #ec6843; border: 1px solid #ec6843; } /* Button more */ .btn--more { position: relative; padding: 3px 30px 10px; line-height: 1.1; } .btn--more span { display: block; width: 14px; height: 14px; border-left: 3px solid #ec6843; border-bottom: 3px solid #ec6843; -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin: 0 auto; transition: border-color .4s; margin-top: -3px; } .btn--more:hover { color: #fff; background: #ec6843; } .btn--more:hover span { border-color: #fff; } /* Button large */ .btn--large { font-size: 18px; } /* Button primary */ .btn--primary { background: #297fca; color: #fff; } .btn--primary:hover { background: #0b3661; } /* Button download */ .btn-download { padding: 9px 26px 8px 36px; } .btn-download i { position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; vertical-align: middle; margin-right: 12px; left: 10px; } /* Button small */ .btn--small { font-size: 8px; padding: 7px 18px 7px 26px; } /* Button View .btn--view {width:75px; height:30px; font-size:12pt; vertical-align:middle; font-weight:bold; text-decoration:none; } */ /* Button small */ .btn--more-secondary { color: #3498db; font-size: 13px; font-weight: 700; text-transform: uppercase; text-decoration: none; text-align: center; } .btn--more-secondary span { display: block; } .btn--more-secondary { padding: 9px 10px 0px; position: relative; display: inline-block; margin: 0 auto; } .btn--more-secondary:before { content: ''; width: 8px; height: 8px; display: inline-block; border-left: 2px solid #ec6843; border-top: 2px solid #ec6843; -ms-transform: rotate(-135deg) translateX(-50%); transform: rotate(-135deg) translateX(-50%); position: absolute; top: 100%; left: 48%; } .btn--more-secondary .less { display: none; } .btn--more-secondary.visible:before { top: 0; -ms-transform: rotate(45deg) translateX(-50%); transform: rotate(45deg) translateX(-50%); left: 49%; } .btn--more-secondary.visible .less { display: inline-block; } .btn--more-secondary.visible .more { display: none; } /* Button warning */ .btn--warning { padding: 5px 17px 5px; color: #ffffff; font-size: 18px; font-weight: 700; text-transform: uppercase; background-color: #ec6843; } .btn--warning:hover { background-color: #b64c2e; } /* Button lighter blue */ .btn--lighter-blue { font-size: 15px; font-weight: 700; background-color: #297fca; color: #fff; } .btn--lighter-blue:hover { background-color: #0b4ecb; } /* Button light blue */ .btn--light-blue { font-size: 15px; font-weight: 700; background-color: #0b4ecb; color: #fff; } .btn--light-blue:hover { background-color: #1548a7; } /* Button blue */ .btn--blue { font-size: 15px; font-weight: 700; background-color: #1548a7 ; color: #fff; } .btn--blue:hover { background-color: #083b9b; } /* Button dark blue */ .btn--dark-blue { font-size: 15px; font-weight: 700; background-color: #083b9b ; color: #fff; } .btn--dark-blue:hover { background-color: #002f87; } /* Button darker blue */ .btn--darker-blue { font-size: 15px; font-weight: 700; background-color: #002f87; color: #fff; } .btn--darker-blue:hover { background-color: #032c79; } /* ------------------------------------------------------------ *\ Features primary \* ------------------------------------------------------------ */ .features--primary h2 { margin-bottom: 24px !important; font-size: 36px; font-weight: 300; color: #ec6843; letter-spacing: -0.02em !important; } .features--primary p { line-height: 1.45 !important; } .features--primary .cols { margin: 0 -40px; -ms-flex-align: start; -ms-grid-row-align: flex-start; align-items: flex-start; } .features--primary .col { padding: 10px 42px 50px; } .features--primary .col + .col { border-left: 1px solid #979797; } @media (max-width: 1023px) { .features--primary h2 { margin-bottom: 20px !important; font-size: 30px; } .features--primary .cols { margin: 0 -20px; } .features--primary .col { padding: 10px 20px 50px; } } @media (max-width: 767px) { .features--primary h2 { margin-bottom: 15px !important; font-size: 26px; } .features--primary .cols { display: block; padding: 0 20px; } .features--primary .col--1of3 { display: block; width: 100%; max-width: 100%; padding: 20px 0; } .features--primary .col + .col { border-left: 0; border-top: 1px solid #979797; } } /* ------------------------------------------------------------ *\ Features secondary \* ------------------------------------------------------------ */ .features--secondary h4 { margin-bottom: 7px; font-weight: 700; } .features--secondary h5 { margin-bottom: 0 !important; color: #042a52; font-size: 14px; font-weight: 700; text-transform: uppercase; } .features--secondary h5 span { display: block; margin-bottom: 0; font-size: 46px; line-height: .9; } .features--secondary span { display: inline-block; font-size: 12px; margin-bottom: 21px; font-weight: bold; } .features--secondary span + p { line-height: 1.45; padding-right: 15px; } .features--secondary ul { position: relative; display: -ms-flexbox; display: flex; list-style-type: none; margin: 0 -20px 0 -12px; border-left: 1px solid #979797; } .features--secondary ul:before { content: ''; position: absolute; top: 30px; left: 0; right: 0; bottom: 0; background-color: #f0f8ff; display: inline-block; } .features--secondary ul ul { display: block; margin: 0; border-left: 0;} .features--secondary li { position: relative; padding: 7px 12px 15px; z-index: 10; } /*.features--secondary li:nth-child(1) { flex: 0 0 23%; max-width: 23%; } .features--secondary li:nth-child(2) { flex: 0 0 22%; max-width: 22%; } .features--secondary li:nth-child(3) { flex: 0 0 27%; max-width: 27%; } .features--secondary li:nth-child(4) { flex: 0 0 28%; max-width: 28%; }*/ .features--secondary li:nth-child(1) { -ms-flex: 0 0 32%; flex: 0 0 32%; max-width: 32%; } .features--secondary li:nth-child(2) { -ms-flex: 0 0 31%; flex: 0 0 31%; max-width: 31%; } .features--secondary li:nth-child(3) { -ms-flex: 0 0 37%; flex: 0 0 37%; max-width: 37%; } .features--secondary li:last-child { border-right: 1px solid #979797; } .features--secondary ul li + li { margin-top: 0 !important; border-left: 1px solid #979797; } .features--secondary ul ul { display: block; padding-left: 0 !important; } .features--secondary ul ul li { padding: 0; display: block; width: 100% !important; max-width: 100% !important; } .features--secondary ul ul li + li { border: 0; } .features--secondary img { display: block; width: auto !important; margin: 0 auto !important; } .features--secondary .feature--secondary { position: relative; } .features--secondary .feature--secondary + .feature--secondary:before { content: ''; width: 90%; display: inline-block; height: 1px; position: absolute; top: 0; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); background: #d7d7d7; } .features--secondary .feature--secondary + .feature--secondary { margin-top: 37px; padding-top: 17px; } .features--secondary .cols { position: relative; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; padding: 34px 0; } .features--secondary .cols:before { content: ''; display: inline-block; height: 1px; background: #d7d7d7; position: absolute; top: 0; left: 15px; right: 15px; } .features--secondary .cols + .cols { border-bottom: 1px solid #d7d7d7; } .features--secondary .col-size1 { -ms-flex: 0 0 10%; flex: 0 0 10%; max-width: 10%; } .features--secondary .col-size1 h5 { margin-top: -11px; } .features--secondary .col-size2 { -ms-flex: 0 0 85%; flex: 0 0 85%; max-width: 85%; } .features--secondary .list-progress span { margin-bottom: 0; } .features--secondary .list-progress li:last-child { border-right: 0; } .features--secondary .feature--centered { width: 31%; max-width: 31%; margin: 0 auto; position: relative; left: -10px; } .features--secondary .feature--centered:before { content: none; display: none !important; } .features--secondary .feature--centered ul { border-left: 0; } .features--secondary .feature--centered ul li { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .features--secondary .feature--centered ul li:last-child { border-right: 0; } @media (max-width: 1023px) { .features--secondary ul:before { right: 0; } .features--secondary .feature--centered { left: 0; } } @media (max-width: 767px) { .features--secondary h5 { margin-bottom: 15px !important; } .features--secondary h2 { margin-bottom: 15px !important; font-size: 26px; } .features--secondary .cols { display: block; margin: 0; } .features--secondary .col-size1 { display: block; width: 100%; max-width: 100%; padding: 0; } .features--secondary .col-size2 { display: block; width: 100%; max-width: 100%; padding: 0; } .features--secondary .col + .col { border-left: 0; border-top: 1px solid #979797; } .features--secondary ul { display: block; margin: 0; border-left: 0; } .features--secondary ul:before { top: 0; } .features--secondary li:nth-child(1) { width: 100%; max-width: 100%; } .features--secondary li:nth-child(2) { width: 100%; max-width: 100%; } .features--secondary li:nth-child(3) { width: 100%; max-width: 100%; } .features--secondary li:nth-child(4) { width: 100%; max-width: 100%; } .features--secondary li:last-child { border-right: 0; } .features--secondary ul li + li { margin-top: 0 !important; border-left: 0; border-top: 1px solid #979797; } .features--secondary .feature--centered { width: 100%; max-width: 100%; margin: 0 auto; left: 0; border-top: 1px solid #979797; margin-top: 0 !important; padding-top: 0 !important; } } /* ------------------------------------------------------------ *\ Form Elements \* ------------------------------------------------------------ */ input::-webkit-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::placeholder { color: inherit; opacity: 1; } input:-webkit-autofill { -webkit-text-fill-color: inherit; -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset; } .field {} .textarea {} .select {} .radio {} .checkbox input { display: none; } .checkbox input:checked + label:before { display: inline-block; } .checkbox label { position: relative; display: inline-block; width: 20px; height: 20px; border:1px solid #ec6843; border-radius: 2px; } .checkbox label:before { content: ''; display: none; width: 15px; height: 12px; background-size: 15px 12px; background-repeat: no-repeat; background-image: url(images/ico-check.png); position: absolute; top: 3px; left: 2px; } /* ------------------------------------------------------------ *\ Form \* ------------------------------------------------------------ */ .form {} /* ------------------------------------------------------------ *\ Intro \* ------------------------------------------------------------ */ .intro { height: 800px; position: relative; background-repeat: no-repeat; background-position: center right; background-size: cover; } .intro .intro__inner { position: absolute; top: 0; left: 0; width: 100%; } .intro .intro__content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; padding: 74px 100px 100px 50px; } .intro__content h1 {position:absolute; top:40px; color: #ffffff; font-weight: 400; font-size:8em;} .intro__content h2, .section__head .shell h2 {display:block; position:absolute; top:160px; width:100%; color: #ffffff; font-weight: 400; text-transform:capitalize; font-size:3.25em; line-height: 1.2em;} .section__head .shell h2 {position:relative; display:none; font-size:3em;} .intro .btn--more { position: absolute; bottom: 14px; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); } .intro__LSM {background-image:url("../images/LSM-2100x1100.jpg")} .intro__KNM {background-image:url("../../barrier/images/KNM-2100x1100.jpg")} .intro__LiftWrx {background-image:url("../../liftwrx/images/liftwrx-2100x1100.jpg")} .intro__KSCH {background-image:url("../../ksch/images/ksch-2100x1100.jpg")} .intro__KSCH .intro__content h1 {top:350px} .intro__KSCH .intro__content h2 {top:475px; left:55px;} .intro__UQSR {background-image:url("../../ultraquiet/images/UltraQuietSR_2100x1100.jpg")} .intro__UQSR .intro__content h2 {margin-top:10px;} .intro__ISOGRID {background-image:url("../../isogrid/images/isogrid-hero.jpg")} .intro__IPRB .intro__content h1, .intro__UNIBRACE .intro__content h1, .intro__Wave-Hanger .intro__content h1, .intro__Wallmat .intro__content h1, .intro__SOUND-DAMP2 .intro__content h1, .intro__PSB-S .intro__content h1, .intro__PSB-M .intro__content h1, .intro__PC-10 .intro__content h1, .intro__NAFP-10 .intro__content h1, .intro__ISOBACKER .intro__content h1, .intro__ISOGRID .intro__content h1, .intro__FIC-W .intro__content h1, .intro__AF .intro__content h1, .intro__GOTHAM .intro__content h1, .intro__ICC .intro__content h1, .intro__ICW .intro__content h1, .intro__MUTA .intro__content h1 {top:550px} .intro__IPRB .intro__content h2, .intro__Wave-Hanger .intro__content h2, .intro__Wallmat .intro__content h2, .intro__SOUND-DAMP2 .intro__content h2, .intro__PSB-S .intro__content h2, .intro__PSB-M .intro__content h2, .intro__PC-10 .intro__content h2, .intro__NAFP-10 .intro__content h2, .intro__ISOBACKER .intro__content h2, .intro__ISOGRID .intro__content h2, .intro__FIC-W .intro__content h2, .intro__AF .intro__content h2, .intro__GOTHAM .intro__content h2, .intro__ICC .intro__content h2, .intro__ICW .intro__content h2, .intro__MUTA .intro__content h2 {top:675px; left:55px;} .intro__UNIBRACE .intro__content h1, .intro__Wave-Hanger .intro__content h1, .intro__Wave-Hanger .intro__content h2, .intro__Wallmat .intro__content h1, .intro__Wallmat .intro__content h2, .intro__SOUND-DAMP2 .intro__content h1, .intro__SOUND-DAMP2 .intro__content h2, .intro__PSB-S .intro__content h1, .intro__PSB-M .intro__content h1, .intro__PSB-S .intro__content h2, .intro__PSB-M .intro__content h2, .intro__PC-10 .intro__content h1, .intro__PC-10 .intro__content h2, .intro__NAFP-10 .intro__content h1, .intro__NAFP-10 .intro__content h2, .intro__AF .intro__content h1, .intro__GOTHAM .intro__content h1, .intro__ICC .intro__content h1, .intro__ICW .intro__content h1, .intro__MUTA .intro__content h1, .intro__AF .intro__content h2, .intro__GOTHAM .intro__content h2, .intro__ICC .intro__content h2, .intro__ICW .intro__content h2, .intro__MUTA .intro__content h2 {color:#000;} .intro__Soundmatt {background-image:url("../../soundmatt/images/Soundmatt-2100x1100.jpg")} .intro__SR {background-image:url("../../sr/images/SR-Floorboard-2100x1100.jpg")} .intro__ISOLayment {background-image:url("../../isolayment/images/Isolayment-QT-F-2100x1100.jpg")} .intro__FLM {background-image:url("../../flm/images/FLM-2100x1100.jpg")} .intro__FIC-C {background-image:url("../../fic/images/FIC-Concrete-2100x100.jpg")} .intro__FIC-W {background-image:url("../../fic/images/FIC-Wood-2100x100.jpg")} .intro__AF {background-image:url("../../af/images/AF-2100x1100.jpg")} .intro__GOTHAM {background-image:url("../../gotham/images/GOTHAM-2100x1100.jpg")} .intro__ICC {background-image:url("../../icc/images/ICC-2100x1100.jpg")} .intro__ICW {background-image:url("../../icw/images/ICW-2100x1100.jpg")} .intro__MUTA {background-image:url("../../muta/images/MUTA-2100x1100.jpg")} .intro__RIM-C {background-image:url("../../rim/images/RIM-Concrete-2100x1100.jpg")} .intro__RIM-W {background-image:url("../../rim/images/RIM-Wood-2100x1100.jpg")} .intro__Wallmat {background-image:url("../../wallmat/images/Wallmat-2100x1100.jpg")} .intro__Wave-Hanger {background-image:url("../../wave-hanger/images/WAVE-Hanger-2100x1100.jpg")} .intro__KSM {background-image:url("../../ksm/images/KSM-2100x1100.jpg")} .intro__PSB-M {background-image:url("../../psb/images/PSB-M-2100x1100.jpg")} .intro__PSB-S {background-image:url("../../psb/images/PSB-S-2100x1100.jpg")} .intro__NAFP-10 {background-image:url("../../nafp/images/NAFP-10-2100x1100.jpg")} .intro__PC-10 {background-image:url("../../pc-10/images/PC-10-2100x1100.jpg")} .intro__IPRB {background-image:url("../../iprb/images/IPRB-2100x1100.jpg")} .intro__ISOMAX {background-image:url("../../isomax/images/IsoMax-2100x1100.jpg")} .intro__ISOBACKER {background-image:url("../../isobacker/images/IsoBacker-2100x1100.jpg")} .intro__SOUND-DAMP2 {background-image:url("../../sound-damp2/images/Sound-Damp2-2100x1100.jpg")} .intro__UNIBRACE {background-image:url("../../unibrace/images/UniBrace-2100x1100.jpg")} @media (max-width: 1400px) { .intro__LiftWrx .intro__content h2 {width:40%;} .intro__KSCH .intro__content h2 {width:50%;} } @media (max-width: 1200px) { .intro { height: 580px; } .intro .intro__content { padding: 74px 40px 100px; } .intro__LiftWrx .intro__content h1 {top:0px;} .intro__content h2 {display:none;} .section__head .shell h2 {display:block; top:10px;} .intro__IPRB .intro__content h1, .intro__UNIBRACE .intro__content h1, .intro__Wave-Hanger .intro__content h1, .intro__Wallmat .intro__content h1, .intro__SOUND-DAMP2 .intro__content h1, .intro__PSB-S .intro__content h1, .intro__PSB-M .intro__content h1, .intro__PC-10 .intro__content h1, .intro__NAFP-10 .intro__content h1, .intro__ISOBACKER .intro__content h1, .intro__ISOGRID .intro__content h1, .intro__FIC-W .intro__content h1, .intro__AF .intro__content h1, .intro__GOTHAM .intro__content h1, .intro__ICC .intro__content h1, .intro__ICW .intro__content h1, .intro__MUTA .intro__content h1 {top:400px;} } @media (max-width: 1023px) { .intro { height: 480px; } .intro .intro__content { display: block; } .intro__LSM .intro__content h1 {top:0px;} .intro__KSCH .intro__content h1 {top:175px} .intro__IPRB .intro__content h1, .intro__UNIBRACE .intro__content h1, .intro__Wave-Hanger .intro__content h1, .intro__Wallmat .intro__content h1, .intro__SOUND-DAMP2 .intro__content h1, .intro__PSB-S .intro__content h1, .intro__PSB-M .intro__content h1, .intro__PC-10 .intro__content h1, .intro__NAFP-10 .intro__content h1, .intro__ISOBACKER .intro__content h1, .intro__ISOGRID .intro__content h1, .intro__FIC-W .intro__content h1, .intro__AF .intro__content h1, .intro__GOTHAM .intro__content h1, .intro__ICC .intro__content h1, .intro__ICW .intro__content h1, .intro__MUTA .intro__content h1 {top:320px;} } @media (max-width: 767px) { .intro { height: 400px; } .intro .intro__content { padding: 40px 22px 30px; } .intro__content h1 {font-size:6em;} .intro__IPRB .intro__content h1, .intro__UNIBRACE .intro__content h1, .intro__Wave-Hanger .intro__content h1, .intro__Wallmat .intro__content h1, .intro__SOUND-DAMP2 .intro__content h1, .intro__PSB-S .intro__content h1, .intro__PSB-M .intro__content h1, .intro__PC-10 .intro__content h1, .intro__NAFP-10 .intro__content h1, .intro__ISOBACKER .intro__content h1, .intro__ISOGRID .intro__content h1, .intro__FIC-W .intro__content h1, .intro__AF .intro__content h1, .intro__GOTHAM .intro__content h1, .intro__ICC .intro__content h1, .intro__ICW .intro__content h1, .intro__MUTA .intro__content h1 {top:280px;} } @media (max-width:568px) { .intro { height: 325px; } .intro__content h1 {font-size:4em; top:10px;} .intro__KSCH .intro__content h1 {top:125px} .intro__IPRB .intro__content h1, .intro__UNIBRACE .intro__content h1, .intro__Wave-Hanger .intro__content h1, .intro__Wallmat .intro__content h1, .intro__SOUND-DAMP2 .intro__content h1, .intro__PSB-S .intro__content h1, .intro__PSB-M .intro__content h1, .intro__PC-10 .intro__content h1, .intro__NAFP-10 .intro__content h1, .intro__ISOBACKER .intro__content h1, .intro__ISOGRID .intro__content h1, .intro__FIC-W .intro__content h1, .intro__AF .intro__content h1, .intro__GOTHAM .intro__content h1, .intro__ICC .intro__content h1, .intro__ICW .intro__content h1, .intro__MUTA .intro__content h1 {top:235px;} .intro__LSM {background-image:url("../images/LSM-375x325.jpg")} .intro__KNM {background-image:url("../../barrier/images/KNM-375x325.jpg")} .intro__LiftWrx {background-image:url("../../liftwrx/images/liftwrx-375x325.jpg")} .intro__KSCH {background-image:url("../../ksch/images/ksch-375x325.jpg")} .intro__UQSR {background-image:url("../../ultraquiet/images/UltraQuietSR_750x650.jpg")} .intro__ISOGRID {background-image:url("../../isogrid/images/isogrid-375x325.jpg")} .intro__Soundmatt {background-image:url("../../soundmatt/images/Soundmatt-750x650.jpg")} .intro__SR {background-image:url("../../sr/images/SR-Floorboard-750x650.jpg")} .intro__ISOLayment {background-image:url("../../isolayment/images/Isolayment-QT-F-750x650.jpg")} .intro__FLM {background-image:url("../../flm/images/FLM-750x650.jpg")} .intro__AF {background-image:url("../../af/images/AF-375x325.jpg")} .intro__GOTHAM {background-image:url("../../gotham/images/GOTHAM-375x325.jpg")} .intro__ICC {background-image:url("../../icc/images/ICC-375x325.jpg")} .intro__ICW {background-image:url("../../icw/images/ICW-375x325.jpg")} .intro__MUTA {background-image:url("../../muta/images/MUTA-375x325.jpg")} .intro__Wallmat {background-image:url("../../wallmat/images/Wallmat-375x325.jpg")} .intro__Wave-Hanger {background-image:url("../../wave-hanger/images/WAVE-Hanger-375x325.jpg")} .intro__KSM {background-image:url("../../ksm/images/KSM-375x325.jpg")} .intro__PSB-M {background-image:url("../../psb/images/PSB-M-375x325.jpg")} .intro__PSB-S {background-image:url("../../psb/images/PSB-S-375x325.jpg")} .intro__NAFP-10 {background-image:url("../../nafp/images/NAFP-10-375x325.jpg")} .intro__PC-10 {background-image:url("../../pc-10/images/PC-10-375x325.jpg")} .intro__IPRB {background-image:url("../../iprb/images/IPRB-375x325.jpg")} .intro__ISOMAX {background-image:url("../../isomax/images/IsoMax-375x325.jpg")} .intro__ISOBACKER {background-image:url("../../isobacker/images/IsoBacker-375x325.jpg")} .intro__SOUND-DAMP2 {background-image:url("../../sound-damp2/images/Sound-Damp2-375x325.jpg")} .intro__UNIBRACE {background-image:url("../../unibrace/images/UniBrace-375x325.jpg")} } /* ------------------------------------------------------------ *\ Link \* ------------------------------------------------------------ */ .link-main { display: inline-block; position: relative; padding: 4px 4px 4px 50px; color: #cde6fd; font-size: 12px; font-weight: 700; text-transform: uppercase; background-color: #297fca; text-decoration: none; min-height: 24px; letter-spacing: 0.01em; width:97%;} .link-main:before { content: ''; width: 0; height: 0; display: inline-block; border-bottom: 24px solid transparent; border-left: 10px solid #297fca; border-right: 10px solid transparent; position: absolute; top: 0; left: 100%; } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* ------------------------------------------------------------ *\ List colors \* ------------------------------------------------------------ */ .list-colors { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; color: #ec6843; font-size: 11px; margin: 0 -5px; } .list-colors li { padding: 0 5px; -ms-flex: 0 0 14.28%; flex: 0 0 14.28%; max-width: 14.28%; } .list-colors li + li { margin-top: 0 !important; } .list-colors span { display: inline-block; width: 100px; height: 100px; } .list-colors .dark-blue { background: #0b3662; } .list-colors .orange { background: #ec6843; } .list-colors .lighter-blue { background: #cde6fd; } .list-colors .light-blue { background: #297fca; border: 1px solid #979797; } .list-colors .blue { background: #002f87; } .list-colors .darker-blue { background: #042a52; } .list-colors .grey { background: #f6fbff; border: 1px solid #979797; } .list-colors h4 { margin-bottom: 1px; text-align: center; } .list-colors h4 span { display: block; max-width: 100px; color: #ec6843 !important; width: auto; height: auto; } .list-colors p { display: block; margin-left: 10px; line-height: 1.4 !important; } @media (max-width: 1200px) { .list-colors span { width: 90px; height: 90px; } .list-colors p { margin-left: 0; } } @media (max-width: 767px) { .list-colors li { margin-bottom: 20px; } .list-colors li { padding: 0 5px; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .list-colors span { width: 100%; } } /* ------------------------------------------------------------ *\ List primary \* ------------------------------------------------------------ */ .list--primary { list-style-type: none; } .list--primary > li { position: relative; padding-left: 37px; line-height: 1.5; } .list--primary li + li { margin-top: 16px !important; } .list--primary > li:before { content: ''; display: inline-block; width: 11px; height: 11px; border: 2px solid #ec6843; position: absolute; top: 5px; left: 0; } .list--primary ul { list-style-type: none; margin-top: 5px; } .list--primary ul li + li { margin-top: 5px !important; } .list--primary strong { display: block; margin-bottom: 0px; } @media (max-width: 767px) { .list--primary > li { padding-left: 20px; } } /* ------------------------------------------------------------ *\ List progress \* ------------------------------------------------------------ */ .list-progress li { color: #0b3661; font-size: 11px !important; font-weight: 700; } .list-progress span { position: relative; display: inline-block; width: 45px; height: 8px; border: 1px solid #979797; margin-right: 4px; } .list-progress span:before { content: ''; display: inline-block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #297fca; } .list-progress .small:before { right: 10px; } /* ------------------------------------------------------------ *\ List images \* ------------------------------------------------------------ */ .list-images { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .list-images li { -ms-flex: 0 0 33%; flex: 0 0 33%; max-width: 33%; } .list-images a { display: block; } @media (max-width: 767px) { .list-images { display: block; } .list-images li { width: 100%; max-width: 100%; } .list-images a { width: 100%; max-width: 100%; } .list-images img { width: 100%; } } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo {} /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav ul { list-style-type: none; } .nav li { position: relative; } .nav a { position: relative; display: block; padding: 21px 20px 20px 75px; color: #cde6fd; font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none; letter-spacing: 0.08em; } .nav a i { position: absolute; top: 50%; left: 48px; -ms-transform: translateY(-50%); transform: translateY(-50%); } .nav ul ul { display: none; padding: 6px 0 15px; background-color: #002f87; } .nav ul ul a { padding: 5px 20px 4px 86px; color: #add6fa; } .nav ul ul .current a { color: #fff; } .nav .arrow { content: ''; position: absolute; top: 21px; right: 10px; display: inline-block; width: 20px; height: 20px; line-height: 14px; cursor: pointer; text-align: center; vertical-align: middle; transition: top .4s, right .4s; } .nav .arrow:before { content: ''; width: 8px; height: 8px; display: inline-block; border-left: 2px solid #fff; border-top: 2px solid #fff; -ms-transform: rotate(135deg); transform: rotate(135deg); transition: transform .4s, border-color .4s; } .nav .has-dropdown > a { padding-right: 0; margin-right: 35px; } .nav .has-dropdown.expanded > a { color: #ec6843; } .nav .has-dropdown.expanded .arrow { top: 19px; right: 10px; } .nav .has-dropdown.expanded .arrow:before { border-color: #ec6843; -ms-transform: rotate(225deg); transform: rotate(225deg); } .related-products {display:block; position:relative; left:75px; width:65%; padding:10px 0px 2px; border-bottom: 1px dashed #ccc; color: #cde6fd; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;} /*.nav .expanded ul { display: block; }*/ @media(min-width: 1025px) { .nav a:hover { color: #ec6843; } .nav .has-dropdown:hover .arrow:before { border-color: #ec6843; } } @media (max-width: 1023px) { .nav a { padding: 20px 80px; font-size: 13px; } .nav a i { left: 53px; } .nav ul ul { padding: 6px 0 9px; } .nav ul ul a { padding: 8px 43px 8px 97px; line-height: 1.6; } .nav .has-dropdown > a { margin-right: 53px; } .nav .has-dropdown .arrow { right: 17px; top: 21px; } .nav .has-dropdown.expanded .arrow { top: 19px; right: 16px; } } /* ------------------------------------------------------------ *\ Nav secondary \* ------------------------------------------------------------ */ .nav--secondary ul { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; list-style-type: none; } .nav--secondary li { position: relative; } .nav--secondary li + li { margin-left: 41px; } .nav--secondary .current:before { content: ''; width: 0; height: 0; border-bottom: 15px solid #ec6843; border-left: 11px solid transparent; border-right: 11px solid transparent; display: inline-block; position: absolute; bottom: 0; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); transition: visibility .4s, opacity .4s; } .nav--secondary a { display: block; padding: 28px 0 25px; color: #cde6fd; font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none; letter-spacing: 0.09em; } .nav--secondary ul ul { display: block; position: absolute; top: 100%; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); width: 150px; background: #000; padding: 20px 20px; visibility: hidden; opacity: 0; transition: visibility .4s, opacity .4s; } .nav--secondary ul ul:before { content: ''; width: 0; height: 0; border-bottom: 15px solid #000; border-left: 11px solid transparent; border-right: 11px solid transparent; display: inline-block; position: absolute; bottom: 100%; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); } .nav--secondary ul ul li + li { margin-left: 0; margin-top: 15px; } .nav--secondary ul ul a { padding: 0; } .nav--secondary ul ul ul { left: 205px; top: -20px; } .nav--secondary > ul > li:last-child li > ul { left: auto; right: 55px; } .nav--secondary ul ul ul:before { display: none; } .nav--secondary ul .expanded > ul { opacity: 1; visibility: visible; } @media(min-width: 1025px) { .nav--secondary .current:hover:before { visibility: hidden; opacity: 0; } .nav--secondary li:hover > a { color: #ec6843; } .nav--secondary ul li:hover > ul { visibility: visible; opacity: 1; } } @media (max-width: 1023px) { .nav--secondary { display: block; } .nav--secondary ul { display: block; padding-top: 6px; } .nav--secondary li + li { margin-left: 0; } .nav--secondary a { padding: 14px 12px 14px 52px; } .nav--secondary ul ul { display: none; position: static; visibility: visible; opacity: 1; -ms-transform: translateX(0); transform: translateX(0); padding: 20px 0 20px 0; width: 100%; background: #002f87; } .nav--secondary ul ul li + li { margin-top: 0; } .nav--secondary ul ul a { padding: 8px 43px 8px 97px; } .nav--secondary ul ul:before { content: none; } .nav--secondary .current:before { content: none; } /* .nav--secondary .hover { display: block; } */ .nav--secondary .has-dropdown > a { padding-right: 0; margin-right: 40px; } .nav--secondary .has-dropdown .arrow { width: 20px; height: 20px; display: inline-block; position: absolute; top: 12px; right: 17px; transition: top .4s, right .4s; text-align: center; cursor: pointer; } .nav--secondary ul ul ul { padding: 10px 0; } .nav--secondary ul ul .has-dropdown .arrow { top: 5px; } .nav--secondary .has-dropdown .arrow:after { content: ''; width: 8px; height: 8px; display: inline-block; border-left: 2px solid #fff; border-top: 2px solid #fff; -ms-transform: rotate(135deg); transform: rotate(135deg); transition: transform .4s, border-color .4s; } .nav--secondary .has-dropdown.expanded > a, .nav--secondary .has-dropdown.hover > a { color: #ec6843; } .nav--secondary .has-dropdown.expanded > .arrow:after, .nav--secondary .has-dropdown.hover > .arrow:after { border-color: #ec6843; -ms-transform: rotate(225deg); transform: rotate(225deg); top: 16px; right: 24px; } .nav--secondary ul ul .has-dropdown > .arrow:after { top: 12px; } .nav--secondary ul ul .has-dropdown.expanded > .arrow:after, .nav--secondary ul ul .has-dropdown.hover > .arrow:after { top: 10px; } } /* ------------------------------------------------------------ *\ Nav btn \* ------------------------------------------------------------ */ .nav-btn { padding-top: 2px !important; position: relative; color: #add6fa; font-size: 7px; font-weight: 700; text-transform: uppercase; padding-left: 20px; text-decoration: none; letter-spacing: 0.02em; } .nav-btn:before { content: ''; width: 7px; height: 1px; background:#add6fa; display: inline-block; position: absolute; top: 9px; left: 0; } .nav-btn:after { content: ''; width: 1px; height: 7px; background:#add6fa; display: inline-block; position: absolute; top: 6px; left: 3px; transition: transform .4s; } .nav-btn.expanded:after { -ms-transform: rotate(-90deg); transform: rotate(-90deg); } /* ------------------------------------------------------------ *\ Nav trigger \* ------------------------------------------------------------ */ .nav-trigger { position: relative; display: inline-block; width: 24px; height: 16px; } .nav-trigger span { position: absolute; display: block; height: 3px; width: 100%; border-radius: 4px; background: #fff; transition: top .2s .25s, opacity .2s .25s, transform .2s 0s; } .nav-trigger span:nth-child(1) { top: 0; } .nav-trigger span:nth-child(2) { top: 7px; } .nav-trigger span:nth-child(3) { top: 14px; } .nav-trigger--active span { transition: background .2s, top .2s, opacity .2s, transform .2s .25s; } .nav-trigger--active span:nth-child(3), .nav-trigger--active span:nth-child(1) { top: 8px; } .nav-trigger--active span:nth-child(2) { opacity: 0; } .nav-trigger--active span:nth-child(1) { -ms-transform: rotate(45deg); transform: rotate(45deg); } .nav-trigger--active span:nth-child(3) { -ms-transform: rotate(-45deg); transform: rotate(-45deg); } /* ------------------------------------------------------------ *\ Nav sticky \* ------------------------------------------------------------ */ .nav--sticky { position: fixed; top: 240px; right: 0; z-index: 20; width: 210px; -ms-transform: translateX(100%); transform: translateX(100%); transition: transform .4s; border-left:1px groove black; border-top:1px groove black; border-bottom:1px groove black; height: 836px; margin-right:40px } /*.nav--sticky ul { list-style-type: none; border-top: 1px solid #979797; border-bottom: 1px solid #979797; padding-top: 10px; padding-bottom: 9px; margin-bottom: 3px; } .nav--sticky ul li + li { border-top: 1px solid #979797; } .nav--sticky ul a { display: block; padding: 7px 0px 7px; color: #0b3661; font-size: 11px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em; } .nav--sticky ul a:hover { color: #ec6843; } */ /*.nav--sticky .nav--sticky__head { -ms-transform: translateX(-38px); transform: translateX(-38px); transition: transform .4s; }*/ .nav--sticky .nav--sticky__head:before { content: ''; width: 1px; height: 836px; border-left: 1px solid #979797; position: absolute; top: 0; left: 0; } /*.nav--sticky .nav--sticky__body { padding: 36px 20px 20px 20px; background: #f6fbff; } .nav--sticky.visible { -ms-transform: translateX(0); transform: translateX(0); } .nav--sticky.visible .nav--sticky__head { -ms-transform: translateX(0); transform: translateX(0); } .nav--sticky .btn { display: block; margin: 0 auto; max-width: 105px; padding: 2px 10px 3px; } */ @media (max-width: 1023px) { .nav--sticky .nav--sticky__head:before { content: none; } } @media (max-width: 767px) { .nav--sticky { top: 60px; width: 200px; } /*.nav--sticky ul { padding: 0; } .nav--sticky ul a { padding: 4px 0; } .nav--sticky ul a br { display: none; }*/ .nav--sticky .nav--sticky__body { padding: 15px 10px; background: #f6fbff; } /*.nav--sticky .btn { margin-top: 6px; font-size: 13px; }*/ } /* ------------------------------------------------------------ *\ Popup \* ------------------------------------------------------------ */ .popup { position: relative; padding: 35px 20px; max-width: 900px; margin: 0 auto; } .popup iframe { width: 100%; height: 100%; max-width: 100%; min-height: 644px; display: block; margin: 0 auto 20px; -webkit-overflow-scrolling: touch; overflow-y: auto; } .popup iframe body { -webkit-overflow-scrolling: touch !important; overflow-y: scroll !important; } .popup .popup__inner { padding: 25px 70px 25px; background: #fff; overflow:auto; -webkit-overflow-scrolling:touch } .popup .actions-primary ul { list-style-type: none; } .popup .actions-primary li + li { margin-left: 15px; } .popup .actions-primary .btn--small { font-size: 12px; padding: 8px 9px 8px 26px; } .popup .actions-primary .btn--small i { width: 12px; height: 15px; } .popup .mfp-close { position: absolute; top: 60px; right: 34px; width: 20px; height: 20px; display: inline-block; font-size: 0; opacity: 1; transition: opacity .4s; } .popup .mfp-close:before { content: ''; background-image: url(images/ico-close@2x.png); width: 20px; height: 20px; background-size: 20px 20px; background-repeat: no-repeat; display: inline-block; position: absolute;top: 0; left: 0; } .popup .mfp-close:hover { opacity: .8; } @media (max-width: 1023px) { .popup { max-width: 100%; } } @media (max-width: 767px) { .popup { position: relative; padding: 15px 10px; } .popup iframe { min-height: 320px; margin-bottom: 10px; } .popup .popup__inner { padding: 34px 5px 10px; background: #fff; } .popup .mfp-close { top: 22px; right: 15px; } } /* ------------------------------------------------------------ *\ Popup image \* ------------------------------------------------------------ */ .popup--image img {/* width: 100%; */ display: block; margin: 15px auto 30px; } /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ .section--base ul { list-style-position: inside; } .section--base ul li + li { margin-top: 10px; } .section--base ul ul { padding-left: 30px; } .section--base ul ul li + li { margin-top: 4px; } @media (max-width: 767px) { .section--base ul ul { padding-left: 20px; } } /* ------------------------------------------------------------ *\ Section about \* ------------------------------------------------------------ */ .section--about .section__head { background-color: #042a52; padding: 14px 0 16px; } .section--about .section__head h4 { margin-bottom: 0; color: #e6f3ff; font-size: 25px; font-weight: 400; letter-spacing: 0.002em; } .section--about .section__body { padding: 42px 0 100px; border-left: 15px solid #ecf0f1; background: #fff; } .section--about .section__body p { margin-bottom: 26px; font-size: 16px; line-height: 1.65; } .section--about .section__body ul li { font-size: 16px; line-height: 1.65; } .section--about .section__body .cols { margin: 0 -34px; -ms-flex-pack: justify; justify-content: space-between; } .section--about .section__body .col { padding: 0 22px } .section--about .section__body .col--size1 { -ms-flex: 0 0 48%; flex: 0 0 48%; max-width: 48%; } .section--about .section__body .col--size2 { -ms-flex: 0 0 52%; flex: 0 0 52%; max-width: 52%; padding-left: 116px; padding-right: 60px; } .section--about .shell { padding: 0 92px; } .section--about .shell { padding: 0 60px; } @media(min-width: 1400px) { .section--about .section__body .cols br { display: none; } } @media (max-width: 1200px) { .section--about .section__head { padding: 20px 0; } .section--about .section__head h4 { font-size: 20px; } .section--about .section__body { padding: 40px 0 40px; border-left: 0; } .section--about .section__body .cols { margin: 0 -20px; } .section--about .shell { padding: 0 40px; } .section--about .section__body .cols br { display: none; } .section--about .section__body .col--size1 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-left: 15px; padding-right: 15px; } .section--about .section__body .col--size2 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding-left: 15px; padding-right: 15px; } } @media (max-width: 767px) { .section--about .section__head { padding: 14px 0 11px; } .section--about .section__head h4 { font-size: 18px; line-height: 1.8; } .section--about .section__body { padding: 39px 0; } .section--about .section__body p, .section--about .section__body ul li { font-size: 16px; line-height: 1.2; } .section--about .section__body p + p { margin-top: -10px;} .section--about .section__body .cols { display: block; margin: 0; } .section--about .section__body .cols br { display: none; } .section--about .section__body .col--size1 { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; } .section--about .section__body .col--size2 { width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; } } /* ------------------------------------------------------------ *\ Section solid \* ------------------------------------------------------------ */ .section--solid { background-color: #f9fbfd; } /* ------------------------------------------------------------ *\ Section main \* ------------------------------------------------------------ */ .section--main { padding: 46px 0 70px; } .section--main h2 { margin-bottom: 17px; letter-spacing: 0.01em; } .section--main h3 { margin-bottom: 24px; } .section--main h4 span { color: #0b3661; } .section--main p { line-height: 1.6; } .section--main p + ul { margin-top: 23px; } .section--main .section__head { margin-right: 80px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 19px; padding-bottom: 5px; border-bottom: 1px solid #9b9b9b; padding-right: 177px; } .section--main .section__head h1 { margin-bottom: 0; } .section--main .section__head .btn { margin-top: 7px; } .section--main .section__body h5 { margin-bottom: 13px; } .section--main .section__body img + p { margin-top: 36px; } .section--main .cols .btn { margin-top: 6px; } .section--main .btn + img { margin-top: 83px; } .section--main .list-colors { margin-top: 62px; margin-right: -39px; } .section--main .features--primary { margin-top: 60px; margin-bottom: 60px; } @media (max-width: 1200px) { .section--main { padding: 40px 0; } .section--main h3 { margin-bottom: 18px; } .section--main .section__head { margin-right: 0; padding-right: 0; padding-bottom: 12px; } .section--main .section__body { margin-right: 0; } .section--main .list-colors { margin-right: 0; } } @media (max-width: 767px) { .section--main { padding: 35px 0; } .section--main p { font-size: 16px; } .section--main .section__body img + p { margin-top: 20px; } .section--main .section__head { display: block; padding-bottom: 15px; } .section--main .section__head .btn { margin-top: 8px; } .section--main .cols { display: block; margin: 0; } .section--main .col--1of2 { width: 100%; max-width: 100%; padding: 0; } .section--main .col--1of2 + .col--1of2 { margin-top: 30px; } .section--main .btn + img { margin-top: 25px; } .section--main .list-colors { margin-top: 40px; margin-bottom: -20px; } } /* ------------------------------------------------------------ *\ Section alt \* ------------------------------------------------------------ */ .section--alt .cols img { display: block; margin: 0 auto; } .section--alt .btn + img { margin-top: 83px; } @media(min-width: 1600px) { .section--alt .cols img { display: block; margin: 83px auto 0; width: 100%; } .section--alt .cols img.eighty {width: 60%;} } @media (max-width: 767px) { .section--alt .btn + img { margin-top: 20px; } .section--alt .col.text-center { text-align: left; } } /* ------------------------------------------------------------ *\ Section main secondary \* ------------------------------------------------------------ */ .section--main-secondary { padding: 46px 0; } .section--main-secondary p { line-height: 2.75; margin-bottom: 13px; font-size: 16px; } .section--main-secondary p:last-child { margin-bottom: 0; } .section--main-secondary small { display: inline-block; line-height: 2.8; font-size: 12px; font-weight: 700; margin-bottom: 20px; } .section--main-secondary .section__head { margin-bottom: 30px; padding-bottom: 12px; } .section--main-secondary .section__body:after { content: ''; display: table; line-height: 0; clear: both; } .section--main-secondary .cols { margin-bottom: 39px; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .section--main-secondary .col--size-1 { -ms-flex: 0 0 54%; flex: 0 0 54%; max-width: 54%; } .section--main-secondary .col--size-2 { -ms-flex: 0 0 36.7%; flex: 0 0 36.7%; max-width: 36.7%; margin-right: -50px; } .section--main-secondary .alignright { margin-top: -4px; } @media (max-width: 1023px) { .section--main-secondary .col--size-1 { -ms-flex: 0 0 65%; flex: 0 0 65%; max-width: 65%; } .section--main-secondary .col--size-2 { -ms-flex: 0 0 35%; flex: 0 0 35%; max-width: 35%; margin-right: 0; } } @media (max-width: 767px) { .section--main-secondary p { line-height: 2; font-size: 16px; } .section--main-secondary small { margin-top: 20px; line-height: 1.7; } .section--main-secondary .cols { display: block; margin: 0; } .section--main-secondary .col--size-1 { width: 100%; max-width: 100%; padding: 0; } .section--main-secondary .col--size-2 { width: 100%; max-width: 100%; margin-right: 0; padding: 0; } .section--main-secondary .alignright { margin-top: 10px; margin-bottom: 0px; margin-left: 0; float: none; } } /* ------------------------------------------------------------ *\ Section main border \* ------------------------------------------------------------ */ .section--main-border { padding-bottom: 0; } .section--main-border .section__body { padding-bottom: 71px; border-bottom: 1px solid #9b9b9b; } /* ------------------------------------------------------------ *\ Section installation \* ------------------------------------------------------------ */ .section--installation {background-color:#fff;} .section--installation .section__head { padding-bottom: 16px; margin-bottom: 23px; padding-right: 141px; margin-right: -15px; } .section--installation .section__head h1 { font-size: 36px; } .section--installation .section__head .btn { margin: 7px 31px 0 10px; } .section--installation .section__head .btn i { left: 17px; } .section--installation .section__body { margin-right: 0; } .section--installation .list-images { margin-right: 40px; } .section--installation .list-images img { width: 100%; } @media (max-width: 1200px) { .section--installation .section__head { padding-right: 0; } } @media (max-width: 1023px) { .section--installation .section__head .btn { margin: 4px 20px 0; } .section--installation .list-images { margin: 0 20px; } } @media (max-width: 767px) { .section--installation .section__head .btn { margin: 4px 20px 0 0; } } /* ------------------------------------------------------------ *\ Section installation solid \* ------------------------------------------------------------ */ .section--installation-solid { color: #000; } /* ------------------------------------------------------------ *\ Section details \* ------------------------------------------------------------ */ .section--details { padding-bottom: 0; } .section--details .section__head { display: block; margin-bottom: 0; padding-right: 0; padding-bottom: 8px; } .section--details .section__head h1 { margin-bottom: 5px; border-bottom: 1px solid #9b9b9b; } .section--details .section__body { margin-right: 170px; } .section--details .btn--more-secondary { padding-left: 30px; padding-right: 30px; background: #f8fbfd; } .section--details .tiles { margin-right: 14; } .section--details .tiles__actions { max-width: 1270px; position: relative; text-align: center; } .section--details .tiles__actions:before { content: ''; width: 100%; height: 2px; border-top: 2px dashed #3498db; position: absolute; top: 50%; left: 0; -ms-transform: translateY(-50%); transform: translateY(-50%); } .section--details .tiles-tertiary__content { display: block;/* max-width: 920px;*/ } .section--details .tiles-tertiary .tiles-tertiary__content { margin: 0 -40px 0 -40px; } @media(max-width: 1320px) { .section--details .section__body { margin-right: 0; } } @media (max-width: 1200px) { .section--details .tiles-tertiary .tiles-tertiary__content { margin: 0 -20px ; padding: 15px 20px 34px; } } @media (max-width: 767px) { .section--details .tiles__actions:before { top: 79%; } } /* ------------------------------------------------------------ *\ Section slider \* ------------------------------------------------------------ */ .section--slider h1 { color: #fff; } .section--slider .section__head { margin-bottom: 0; } .section--slider .section__body { margin-right: -40px; } @media (max-width: 1023px) { .section--slider .section__body { margin: 0 -20px; padding-top: 40px; } } @media (max-width: 767px) { .section--slider { padding: 17px 0; } .section--slider h1 { font-size: 34px; } .section--slider .section__body { padding-top: 7px; } } /* ------------------------------------------------------------ *\ Section slider secondary \* ------------------------------------------------------------ */ .section--slider-secondary { padding: 0; margin-bottom: 20px; } /* ------------------------------------------------------------ *\ Section info \* ------------------------------------------------------------ */ .section--info h3 { margin-bottom: 13px; font-size: 28px; } .section--info p { margin-bottom: 46px; line-height: 2.75; } .section--info p:last-child { margin-bottom: 0; } .section--info img { display: block; } .section--info a + img { margin-top: 22px; } .section--info a { text-decoration: none; color: #ec6843; } .section--info .col--size-1 { -ms-flex: 0 0 39%; flex: 0 0 39%; max-width: 39%; padding-left: 50px; padding-bottom: 68px; } .section--info .col--size-2 { -ms-flex: 0 0 61%; flex: 0 0 61%; max-width: 61%; padding-left: 0; } .section--info .col--size-2 img { display: block; margin: 0 auto; } .section--info .cols { -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; } .section--info .cols + .cols { padding-top: 47px; margin-top: 53px; border-top: 1px solid #979797; } .section--info .actions-primary { display: inline-block; } .section--info .actions-primary ul { list-style-type: none; -ms-flex-pack: start; justify-content: flex-start; padding: 15px 21px 0; border-top: 1px solid #979797; } .section--info .actions-primary a { font-size: 12px; color: #fff; padding: 9px 13px 9px 25px !important; } .section--info .actions-primary a .ico-download { width: 12px; height: 15px; margin-right: 3px !important; } .section--info .list-images { margin: 0 -5px; } .section--info .list-images li { padding: 0 5px; } .section--info .list-images li + li { margin-top: 0; } @media (max-width: 1200px) { .section--info p { margin-bottom: 20px; line-height: 1.9; } .section--info .col--size-1 { padding-left: 15px; padding-bottom: 0; } } @media (max-width: 767px) { .section--info .cols { display: block; } .section--info .cols + .cols { padding-top: 30px; margin-top: 35px; } .section--info .col--size-1 { width: 100%; max-width: 100%; margin-bottom: 20px; padding: 0; } .section--info .col--size-2 { width: 100%; max-width: 100%; padding-left: 15px; } .section--info .actions-primary ul { padding: 15px 0 0; } } /* ------------------------------------------------------------ *\ Section info main \* ------------------------------------------------------------ */ .section--info-main { text-align: left; padding-top: 0; } .section--info-main .section__head { text-align: left; position: relative; margin: 0 0 30px 0; padding-right: 100px; } .section--info-main .section__head:before { content: ''; position: absolute; top: 0; left: -40px; right: -40px; bottom: -30px; background: #fff; } .section--info-main .section__head .section__head-inner { position: relative; -ms-flex: 0 0 100%; flex: 0 0 100%; z-index: 1; border-bottom: 1px solid #9b9b9b; display: block; width: 100px; padding: 46px 0 9px; } .section--info-main .section__head .shell { width: 100%; } .section--info-main .section__body { margin-right: 73px; padding-top: 30px; } @media(min-width: 1600px) { .section--info-main img { width: 100%; } } @media (max-width: 1023px) { .section--info-main .section__head { padding-right: 0; } .section--info-main .section__head:before { content: ''; left: -20px; right: -20px; } .section--info-main .section__body { margin-right: 0; } } @media (max-width: 767px) { .section--info-main { padding-bottom: 50px; } .section--info-main .section__head .section__head-inner { padding: 20px 0 0; width: 100%; max-width: 100%; } .section--info-main .section__head { margin-bottom: 10px; } .section--info-main .section__head:before { bottom: -10px; } } /* ------------------------------------------------------------ *\ Section info secondary \* ------------------------------------------------------------ */ .section--info-secondary { padding: 0px 0 30px; } .section--info-secondary .section__body { margin-right: 41px; } .section--info-secondary .cols + .cols { padding-top: 54px; margin-top: 73px; border-top: 1px solid #979797; } .section--info-secondary .cols:last-child .col--size-1 { padding-bottom: 44px; padding-right: 15px; padding-left: 82px; } .section--info-secondary .col--size-1 { padding-bottom: 0; padding-left: 50px; padding-right: 10px; } @media(min-width: 1600px) { .section--info-secondary img { width: 100%; } .section--info-secondary .col--size-1 img { width: auto; } } @media(max-width: 1300px) { .section--info-secondary .list-images { margin: 0 -5px; } } @media (max-width: 1200px) { .section--info-secondary .col--size-1 { padding-left: 15px; padding-right: 15px; } .section--info-secondary .cols:last-child .col--size-1 { padding-bottom: 0; padding-left: 15px; } } @media (max-width: 1023px) { .section--info-secondary .section__body { margin-right: 0; } .section--info-secondary .cols { margin: 0 -15px; } } @media (max-width: 767px) { .section--info-secondary .cols + .cols { padding-top: 30px; margin-top: 35px; } .section--info .list-images { display: -ms-flexbox; display: flex; margin: 0; } .section--info .list-images li { -ms-flex: 0 0 33.33%; flex: 0 0 33.33%; max-width: 33.33%; padding: 0; } .section--info .list-images li + li { margin-top: 0; } } /* ------------------------------------------------------------ *\ Slider \* ------------------------------------------------------------ */ .slider {} .slider .slides { list-style: none outside none; } /* ------------------------------------------------------------ *\ Slider primary \* ------------------------------------------------------------ */ .slider--primary { position: relative; overflow: hidden; padding-left: 24px; } .slider--primary .owl-stage { position: relative; } .slider--primary .owl-stage:before { content: ''; height: 1px; display: inline-block; background: #fff; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); left: 45px; right: 45px; } .slider--primary ul { list-style-type: none; } .slider--primary ul li { position: absolute; left: 0; max-width: 105px; padding-left: 6px; } .slider--primary ul li:before { content: ''; width: 1px; height: 100%; position: absolute; top: 0; left: 0; display: inline-block; background: #979797; } .slider--primary h4 { margin-bottom: 4px; font-size: 18px; color: #fff; margin-right: -30px; } .slider--primary p { color: #cde6fd; font-size: 11px; line-height: 1.6; letter-spacing: 0.02em; } .slider--primary .btn { padding: 16px 10px 16px; min-width: 268px; font-size: 15px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; } .slider--primary .slider__slide { height: 425px; padding: 0 10px; width: 302px; } .slider--primary .slider__slide li:nth-child(1) { top: 45%; left: 15%; padding-bottom: 62px; margin-top: -62px; -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider--primary .slider__slide li:nth-child(1) i { margin-left: 3px; width: 13px; height: 10px;} .slider--primary .slider__slide li:nth-child(2) { top: 50%; left: 60%; padding-bottom: 100px; margin-top: -100px; -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider--primary .slider__slide li:nth-child(3) { top: 30%; left: 53%; padding-top: 96px; margin-top: 96px; } .slider--primary .slider__slide.one li:nth-child(1) p { color: #ec6843; } .slider--primary .slider__slide.two li:nth-child(1) { top: 45%; left: 8%; padding-bottom: 65px; margin-top: -65px; -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider--primary .slider__slide.two li:nth-child(2) { top: 50%; left: 54%; padding-bottom: 95px; margin-top: -95px; -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider--primary .slider__slide.two li:nth-child(3) {top: 30%; left: 37%; padding-top: 74px; margin-top: 74px; } .slider--primary .slider__slide.two li:nth-child(1) p { color: #ec6843; } .slider--primary .slider__slide.two li:nth-child(2) p { color: #76b4eb; } .slider--primary .slider__slide.three li:nth-child(1) { top: 45%; left: 18%; padding-bottom: 78px; margin-top: -78px; } .slider--primary .slider__slide.three li:nth-child(1) p { color: #76b4eb; } .slider--primary .slider__slide.three li:nth-child(2) { top: 50%; left: 6%; padding-top: 68px; margin-top: 68px; padding-bottom: 0; } .slider--primary .slider__slide.three .btn { min-width: 287px; } .slider--primary .slider__slide.four li:nth-child(1) p { color: #ec6843; } .slider--primary .slider__slide.four li:nth-child(2) p { color: #76b4eb; } .slider--primary .slider__slide.four li:nth-child(2) { top: 50%; left: 56%; padding-bottom: 97px; margin-top: -97px; } .slider--primary .slider__slide.four li:nth-child(1) { top: 45%; left: 17%; padding-bottom: 69px; margin-top: -69px; } .slider--primary .slider__slide.four li:nth-child(3) { top: 30%; left: 9%; padding-top: 65px; margin-top: 65px; padding-bottom: 0; } .slider--primary .slider__slide.four li:nth-child(4) { top: 30%; left: 53%; padding-top: 87px; margin-top: 87px; padding-bottom: 0; } .slider--primary .slider__slide.four .btn { min-width: 287px; } .slider--primary .slider__slide.five li:nth-child(1) { top: 45%; left: 15%; padding-bottom: 59px; margin-top: -59px; } .slider--primary .slider__slide.five li:nth-child(1) h4 { margin-right: -50px; } .slider--primary .slider__slide.five li:nth-child(2) { top: 50%; left: 55%; padding-top: 70px; margin-top: 70px; padding-bottom: 0; } .slider--primary .slider__slide.five .btn { min-width: 292px; } .slider--primary .slider__slide.six li:nth-child(1) { top: 46%; left: 10%; padding-bottom: 70px; margin-top: -70px; } .slider--primary .slider__slide.six li:nth-child(2) { top: 50%; left: 35%; padding-bottom: 98px; margin-top: -98px; } .slider--primary .slider__slide.six li:nth-child(3) { top: 16%; left: 62%; padding-bottom: 50px; margin-top: -50px; padding-top: 0; } .slider--primary .slider__slide.six li:nth-child(4) { top: 30%; left: 14%; padding-top: 64px; margin-top: 64px; padding-bottom: 0; max-width: 170px; } .slider--primary .slider__slide.six li:nth-child(5) { top: 30%; left: 67%; padding-top: 78px; margin-top: 78px; padding-bottom: 0; } .slider--primary .slider__slide.six li:nth-child(3) h4 { margin-right: -40px;} .slider--primary .slider__slide.six li:nth-child(1) p { color: #ec6843; } .slider--primary .slider__slide.six li:nth-child(2) p { color: #76b4eb; } .slider--primary .slider__slide.six li:nth-child(4) p { position: relative; color: #add6fa; } .slider--primary .slider__slide.six li:nth-child(3) p { position: relative; margin-top: 10px; margin-right: -30px; } .slider--primary .slider__slide.six li:nth-child(3) p + p { margin-top: 39px; } .slider--primary .slider__slide.six li:nth-child(3) p + p:before { content: ''; width: 1px; height: 20px; background: #fff; display: inline-block; position: absolute; top: -28px; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); } .slider--primary .slider__slide.six li:nth-child(4) p:last-child { color: #cde6fd; margin-left: 25px; margin-right: -20px; padding-left: 20px; } .slider--primary .slider__slide.six .btn { min-width: 368px; } .slider--primary .slider__slide.six li:nth-child(4) i { margin-left: 5px; position: relative; top: -2px; } .slider--primary .slider__slide.six span { display: block; margin-right: 10px; width: 8px; height: 8px; border-left: 2px solid #ec6843; border-top: 2px solid #ec6843; -ms-transform: rotate(135deg); transform: rotate(135deg); position: absolute; top: 7px; left: 0; } .slider--primary .slider__slide.six span:last-child { margin-right: 0; margin-left: 10px; position: relative; top: -10px; left: auto; right: -91%; bottom: 0; } .slider--primary .slider__slide-large { width: 426px; padding: 0 20px; } .slider--primary .owl-prev { width: 26px; height: 42px; display: inline-block; position: absolute; top: 50%; left: -24px; -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider--primary .owl-prev:before { content: ''; width: 30px; height: 7px; position: absolute; top: 0; left: 0; display: inline-block; background: #fff; -ms-transform: rotate(-45deg); transform: rotate(-45deg); transition: background .4s; } .slider--primary .owl-prev:after { content: ''; width: 30px; height: 7px; position: absolute; top: 17px; left: 0; display: inline-block; background: #fff; -ms-transform: rotate(45deg); transform: rotate(45deg); transition: background .4s; } .slider--primary .owl-prev:hover:before { background: #ec6843; } .slider--primary .owl-prev:hover:after { background: #ec6843; } .slider--primary .owl-next { width: 26px; height: 42px; display: inline-block; position: absolute; top: 50%; right: 10px; -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider--primary .owl-next:before { content: ''; width: 30px; height: 7px; position: absolute; top: 0; left: 0; display: inline-block; background: #fff; -ms-transform: rotate(45deg); transform: rotate(45deg); transition: background .4s; } .slider--primary .owl-next:after { content: ''; width: 30px; height: 7px; position: absolute; top: 17px; left: 0; display: inline-block; background: #fff; -ms-transform: rotate(-45deg); transform: rotate(-45deg); transition: background .4s; } .slider--primary .owl-next:hover:before { background: #ec6843; } .slider--primary .owl-next:hover:after { background: #ec6843; } @media (max-width: 1023px) { .slider--primary .owl-stage:before { left: 45px; right: 40px; } } @media (max-width: 767px) { .slider--primary { padding-left: 0; } .slider--primary h4 { font-size: 17px; } .slider--primary .slider__slide { height: 402px; padding: 0; width: auto; } .slider--primary .slider__slide.six li:nth-child(1) { top: 45%; left: 8%; padding-bottom: 70px; margin-top: -70px; max-width: 65px; } .slider--primary .slider__slide.six li:nth-child(2) { top: 50%; left: 30%; padding-bottom: 98px; margin-top: -98px; max-width: 65px; } .slider--primary .slider__slide.six li:nth-child(3) { top: 16%; left: 62%; padding-bottom: 50px; margin-top: -50px; padding-top: 0; } .slider--primary .slider__slide.six li:nth-child(4) { top: 30%; left: 8%; padding-top: 64px; margin-top: 64px; padding-bottom: 0; max-width: 170px; } .slider--primary .slider__slide.six li:nth-child(5) { top: 30%; left: 38%; padding-top: 78px; margin-top: 78px; padding-bottom: 0; } .slider--primary .slider__slide.six li:nth-child(4) p:last-child { color: #cde6fd; margin-left: 12px; margin-right: 0px; padding-left: 15px; } .slider--primary .slider__slide.six span:last-child { margin-right: 0; margin-left: 8px; position: relative; top: -10px; left: auto; right: -80%; } .slider--primary .btn { min-width: 88% !important; max-width: 100%; } .slider--primary .slider__slide.four li:nth-child(1) { top: 45%; left: 19%; padding-bottom: 65px; margin-top: -65px; } .slider--primary .slider__slide.four li:nth-child(2) { top: 50%; left: 53%; padding-bottom: 92px; margin-top: -92px; } .slider--primary .slider__slide.four li:nth-child(3) { top: 30%; left: 13%; padding-top: 62px; margin-top: 62px; padding-bottom: 0; } .slider--primary .slider__slide.four li:nth-child(4) { top: 30%; left: 52%; padding-top: 92px; margin-top: 92px; padding-bottom: 0; } .slider--primary .slider__slide li:nth-child(2) { top: 50%; left: 60%; padding-bottom: 100px; margin-top: -100px; -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider--primary .owl-prev { left: 3px; } .slider--primary .owl-next { right: 7px; } } @media (max-width: 479px) { .slider--primary .slider__slide.six li:nth-child(1) { top: 45%; left: 7%; padding-bottom: 70px; margin-top: -70px; max-width: 65px; } .slider--primary .slider__slide.six li:nth-child(2) { top: 50%; left: 31%; padding-bottom: 98px; margin-top: -98px; max-width: 65px; } .slider--primary .slider__slide.six li:nth-child(3) { top: 16%; left: 60%; padding-bottom: 50px; margin-top: -50px; padding-top: 0; } .slider--primary .slider__slide.six li:nth-child(4) { top: 30%; left: 7%; padding-top: 64px; margin-top: 64px; padding-bottom: 0; max-width: 170px; } .slider--primary .slider__slide.six li:nth-child(5) { top: 30%; left: 65%; padding-top: 78px; margin-top: 78px; padding-bottom: 0; } } /* ------------------------------------------------------------ *\ Slider secondary \* ------------------------------------------------------------ */ .slider--secondary { margin-right: -20px;} .slider--secondary .owl-item { backface-visibility: hidden; } .slider--secondary .slider__slide { background: #fff; } .slider--secondary .slider__slide-main { position: relative; min-height: calc(100vh - 69px); background-position: center top; background-size: cover; background-repeat: no-repeat; } .slider--secondary .slider__slide-main p { position: absolute; top: 10px; left: 0; width: 100%; text-align: center; padding: 10px 20px; font-size: 11px; font-weight: 400; color: #0b3661; margin: 0; } .slider--secondary .slider__slide-main h1 { margin-bottom: 1px; font-size: 72px; font-weight: 300; line-height: 1.1; letter-spacing: 0.01em; } .slider--secondary .slider__slide-main h3 { font-size: 24px; font-weight: 700; letter-spacing: 0.018em; } .slider--secondary .slider__slide-main .slider__slide-inner { position: absolute; top: 50%; left: 0; width: 100%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .slider--secondary .slider__slide-main .slider__slide-content { text-align: right; color: #fff; padding: 10px 35px 115px; } .slider--secondary .slider__slide-secondary p { font-size: 18px; font-weight: 300; color: #042a52; line-height: 3.2; } .slider--secondary .slider__slide-secondary .cols { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; margin: 0; } .slider--secondary .slider__slide-secondary .col { float: none; padding: 0; } .slider--secondary .slider__slide-secondary .col p { margin: 0 68px; } .slider--secondary .slider__slide-secondary .cols--reversed .col:nth-child(1) { -ms-flex-order: 2; order: 2; } .slider--secondary .slider__slide-secondary .cols--reversed .col:nth-child(2) { -ms-flex-order: 1; order: 1; } .slider--secondary .slider__slide-secondary .col--centered { text-align: center; padding: 0 20px; } .slider--secondary .slider__slide-secondary .col--centered img { width: auto;display: block; margin: 0 auto; } .slider--secondary .slider__slide-secondary .alignright { width: auto; max-width: 197px; margin-top: 12px; margin-right: 29px; } .slider--secondary .slider__slide-main--secondary .col--size5 p { margin: -9px 15px 7px 65px !important; max-width: 450px; } .slider--secondary .slider__slide-main--secondary .col--size6 { -ms-flex: 0 0 46%; flex: 0 0 46%; max-width: 46%; } .slider--secondary .slider__slide-main--secondary .col--size5 { -ms-flex: 0 0 54%; flex: 0 0 54%; max-width: 54%; } .slider--secondary .col--size1 { -ms-flex: 0 0 50.5%; flex: 0 0 50.5%; max-width: 50.5%; } .slider--secondary .col--size2 { -ms-flex: 0 0 49.5%; flex: 0 0 49.5%; max-width: 49.5%; } .slider--secondary .col--size3 { -ms-flex: 0 0 42.8%; flex: 0 0 42.8%; max-width: 42.8%; } .slider--secondary .col--size4 { -ms-flex: 0 0 57.2%; flex: 0 0 57.2%; max-width: 57.2%; } .slider--secondary .col--size3 p { font-size: 24px; color: #ec6843; font-weight: 400; margin-left: 0 !important; line-height: 1.5; margin-top: -21px !important; letter-spacing: 0.01em; } .slider--secondary .col--size5 { display: block; -ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; } .slider--secondary .col--size5 p { margin: 21px 30px 0 !important; max-width: 450px; } .slider--secondary .col--size5:after { content: ''; display: table; clear: both; line-height: 0; } .slider--secondary .col--size6 { -ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; } .slider--secondary .col--size6 p { margin: -21px 30px 0 !important; max-width: 450px; } .slider--secondary .owl-dots { display: none; } @media (max-width: 1200px) { .slider--secondary .slider__slide-secondary .col p { margin: 0 20px; } .slider--secondary .slider__slide-secondary .col p br { display: none; } .slider--secondary .slider__slide-main--secondary .col--size5 p { margin: 10px 20px 7px !important; } .slider--secondary .slider__slide-secondary p { line-height: 1.5; } .slider--secondary .col--size3 p { font-size: 18px; margin: 20px 20px 20px !important; } } @media( max-width: 1025px) { .slider--secondary { margin-right: 0; } .slider--secondary .slider__slide-main h1 { font-size: 46px; } .slider--secondary .slider__slide-main p { padding: 5px 10px; } .slider--secondary .col--size6 p { margin: 0 20px !important; } .slider--secondary .owl-carousel { display: block !important; } } @media (max-width: 767px) { .slider--secondary .slider__slide-main { height: 490px; min-height: auto; } .slider--secondary .slider__slide-main h1 { margin-bottom: 4px; font-size: 40px; line-height: 1.2; } .slider--secondary .slider__slide-main h3 { font-size: 14px; } .slider--secondary .slider__slide-main p { top: 0; padding: 5px 10px; font-size: 13px; font-weight: 400; color: #0b3661; margin: 0; line-height: 1.3; } .slider--secondary .slider__slide-main .slider__slide-content { text-align: left; padding: 10px 0 81px 70px; } .slider--secondary .cols { display: block !important; } .slider--secondary .col { width: 100% !important; max-width: 100% !important; margin-bottom: 0 !important; padding: 0 !important; } .slider--secondary .col p { position: relative; z-index: 10; margin: 0 !important; font-size: 15px; padding: 10px 25px; line-height: 2.5; } .slider--secondary .col--size3 p { margin: 0 !important; padding: 10px 25px; font-size: 16px; line-height: 2; } .slider--secondary .slider__slide-main--secondary .col--size5 p { margin: 0 !important; } .slider--secondary .slider__slide-secondary .alignright { float: none; margin-bottom: 20px; margin-left: 20px; } .slider--secondary .slider__slide-secondary-main .col--size4 img { margin-top: -84px; } } /* ------------------------------------------------------------ *\ Steps \* ------------------------------------------------------------ */ .steps { list-style-type: none; } .steps .step + .step { margin-top: 40px; } /* ------------------------------------------------------------ *\ Step \* ------------------------------------------------------------ */ .step h3 { margin-top: 4px; margin-bottom: 0; font-weight: 400; color: #0b3661; } .step p { line-height: 2; letter-spacing: 0.004em; max-width: 95%; } .step .step__head { margin-bottom: 25px; } .step .col--size-1 { -ms-flex: 0 0 27.2%; flex: 0 0 27.2%; max-width: 27.2%; } .step .col--size-2 { -ms-flex: 0 0 72.8%; flex: 0 0 72.8%; max-width: 73.8%; } @media (max-width: 767px) { .step h3 { margin-bottom: 13px; } .step .col--size-1 { width: 100%; max-width: 100%; padding: 0; } .step .col--size-2 { width: 100%; max-width: 100%; padding: 0; } } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ .table {} /* ------------------------------------------------------------ *\ Tiles \* ------------------------------------------------------------ */ .tiles .tile { margin-bottom: 43px; } .tiles .col { float: left; } .tiles .cols { -ms-flex-flow: row wrap; flex-flow: row wrap; } .tiles .invisible { display: none; } .tiles .actions-primary-small .btn { font-size: 8px; padding: 7px 19px 7px 27px; } .tiles .actions-primary-small .checkbox label { width: 16px; height: 16px; } .tiles .actions-primary-small .checkbox label:before { width: 11px; height: 9px; background-size: 11px 9px; } .tiles .tiles__actions { margin-top: -14px; } @media (max-width: 1023px) { .tiles .tile { margin-bottom: 30px; } } @media (max-width: 767px) { .tiles .invisible { display: block; } .tiles .cols { margin: 0; } .tiles .col { padding: 0; } .tiles .col--1of4 { width: 100%; max-width: 100%; } .tiles .col--1of2 + .col--1of2 { margin-top: 0; } } /* ------------------------------------------------------------ *\ Tile \* ------------------------------------------------------------ */ .tile { padding: 15px 20px 61px; position: relative; background:#fff; box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, .2); transition: box-shadow .4s; } .tile:hover { box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, .2); } .tile h4 { text-decoration: none; margin-bottom: 24px; color: #0b3661; font-size: 20px; font-weight: 700; } .tile h4 a { text-decoration: none; } .tile ul { max-width: 298px; margin: 0 auto 20px; list-style-type: none; } .tile ul li + li { margin-top: -1px; } .tile ul a { text-decoration: none; color: #297fca; font-size: 17px; font-weight: 700; } .tile img { display: block; width: 100%; max-width: 298px; margin: 0 auto; } .tile .link-popup { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .tile .actions-primary { position: absolute; bottom: 13px; left: 0; width: 100%; } .tile .actions-primary ul { margin-bottom: 0; max-width: 100%; position: relative; z-index: 10; } .tile .btn { color: #fff; } .tile .actions-primary { margin-top: 20px; } .tile-test-425px { height:425px; } .tile-test-575px { height:575px; } .tile-test-625px { height:625px; } @media (max-width: 1200px) { .tile { padding: 15px 15px 60px; } .tile h4 { margin-bottom: 14px; font-size: 16px; } .tile ul a { font-size: 15px; } } @media (max-width: 767px) { .tile { padding: 15px 10px 60px; } .tile-test-425px, .tile-test-575px, .tile-test-625px { height:inherit;} } /* ------------------------------------------------------------ *\ Tiles secondary \* ------------------------------------------------------------ */ .tiles--secondary img { border: 1px solid #9b9b9b; } .tiles--secondary .tile { padding: 10px 13px 84px; } .tiles--secondary .actions-primary li + li { margin-left: 6px; } .tiles--secondary .actions-primary { margin-top: 39px; } @media (max-width: 767px) { .tiles--secondary .actions-primary li + li { margin-left: 0; } } /* ------------------------------------------------------------ *\ Tiles tertiary \* ------------------------------------------------------------ */ .tiles-tertiary h2 { margin-bottom: 0; padding: 15px 0 15px; color: #ec6843; font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid #9b9b9b; } .tiles-tertiary img { border: 1px solid #9b9b9b; } .tiles-tertiary .tiles-tertiary__content { background-color: #f6fbff; padding: 15px 40px 34px; } .tiles-tertiary__content .cols {justify-content: flex-start;} .tiles-tertiary .actions-primary { margin-top: 9px; } @media (max-width: 1023px) { .tiles-tertiary h2 { font-size: 24px; } } @media (max-width: 767px) { .tiles-tertiary h2 { font-size: 23px; } .tiles-tertiary .tile { margin-bottom: 20px; } .tiles-tertiary .cols { display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; margin: 0 -5px; } .tiles-tertiary .col--1of4 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; padding: 0 5px; } } /* ------------------------------------------------------------ *\ Tiles main \* ------------------------------------------------------------ */ .tiles--main .tile { min-height: 409px; } @media (max-width: 767px) { .tiles--main .tile { min-height: auto; } } /* ------------------------------------------------------------ *\ Tiles list \* ------------------------------------------------------------ */ @media (max-width: 767px) { .tiles-list .tile { margin-bottom: 10px; padding: 0; background: none; box-shadow: none; } .tiles-list .tile h4 { position: relative; margin-bottom: 0; padding-left: 20px; } .tiles-list .tile h4:before { content: ''; background-image: url(images/ico-download-white.png); width: 12px; height: 14px; position: absolute; top: 4px; left: 0;} .tiles-list .tile ul { display: none; } .tiles-list .tile img { display: none; } .tiles-list .tile .link-popup { z-index: 10; } } /* ------------------------------------------------------------ *\ Tiles secondary alt \* ------------------------------------------------------------ */ @media (max-width: 767px) { .tiles--secondary-alt img { margin: 0 auto; } .tiles--secondary-alt h4 { margin-bottom: 0;position: absolute; bottom: 45px; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); } .tiles--secondary-alt .tile { padding: 10px 13px 79px; } } /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { list-style: none outside none; } /* ------------------------------------------------------------ *\ IV. Themes \* ------------------------------------------------------------ */ .mfp-bg { opacity: 1 !important; background: rgba(4, 42, 82, 0.9) !important; } .mfp-close { width: 23px !important; height: 23px; } .mfp-close:hover, .mfp-close:focus { opacity: .8; -webkit-backface-visibility: hidden; } /* Searchbox */ #searchbox {display:none; position:absolute; width:40%; right:0px; top:5.2em; z-index: 0; margin:0%; padding:0.75em; background-color:rgb(255,255,255);} #searchbox .addsearch {width:88%;} .addsearch {background-image: url(../../images/search-background-icon.png); background-repeat: no-repeat; background-position: 10px 10px; padding-left: 40px; height:40px;} /* Process */ #process {display:block; position:relative; width:100%; background-color: #0b3662; color:#fff;} #process h1 {color:rgba(255,255,255,0.8); font-style:oblique; font-size:4em; font-weight: 300;} #process div {display:block; position:relative; padding-bottom:2em;} #process div h2 {display:inline-block; position:relative; font-size:3em; font-weight: 300;} #process div.process-blue h2 {color:#297fca;} #process div p {display:inline-block; position:relative; font-weight: 300; font-size:1em; vertical-align: middle;} @media (min-width:280px) { #process h1 {padding:12% 0% 0% 10%;} #process div.process-blue {margin-left:10%;} #process div.process-orange {margin-left:10%;} #process div.process-blue h2 {width:90%;} #process div.process-orange h2 {width:90%;} #process div.process-blue p {width:90%;} #process div.process-orange p {width:90%;} iframe.sketchfab {width:100%; height:340px;} } @media (min-width:767px) { #process h1 {padding:12% 0% 0% 10%;} #process div.process-blue {margin-left:10%;} #process div.process-orange {margin-left:30%;} #process div.process-blue h2 {width:30%;} #process div.process-orange h2 {width:28%;} #process div.process-blue p {width:65%;} #process div.process-orange p {width:65%;} iframe.sketchfab {width:100%; height:340px;} } @media (min-width:1023px) { #process h1 {padding:12% 0% 0% 10%;} #process div.process-blue {margin-left:10%;} #process div.process-orange {margin-left:22%;} #process div.process-blue h2 {width:22%;} #process div.process-orange h2 {width:18%;} #process div.process-blue p {width:70%;} #process div.process-orange p {width:70%;} iframe.sketchfab {width:100%; height:275px;} } @media (min-width:1200px) { #process h1 {padding:10% 0% 0% 10%;} #process div.process-blue {margin-left:10%;} #process div.process-orange {margin-left:23%;} #process div.process-blue h2 {width:20%;} #process div.process-orange h2 {width:18%;} #process div.process-blue p {width:70%;} #process div.process-orange p {width:70%;} iframe.sketchfab {width:100%; height:350px;} } @media (min-width:1400px) { #process h1 {padding:8% 0% 0% 8%;} #process div.process-blue {margin-left:8%;} #process div.process-orange {margin-left:18%;} #process div.process-blue h2 {width:15%;} #process div.process-orange h2 {width:12%;} #process div.process-blue p {width:70%;} #process div.process-orange p {width:70%;} iframe.sketchfab {width:100%; height: 500px;} } table.testing-results {border:2px solid #000; text-align:center;} table.testing-results td, table.testing-results th {border: 1px solid #9b9b9b; width:10%; padding:2% 0%;} table.install-data {width:50%; text-align:center; margin-left:25%;} table.install-data th, table.install-data td {padding:0.25em 1em;} @media (max-width:767px) { table.install-data {width:90%; margin-left:5%;} } table.isolayment-data {display:block; position:relative; margin-top:3em;} table.isolayment-data td, table.isolayment-data th {border: 1px solid #9b9b9b; width:25%; padding:1em; text-align: center;} table.isolayment-data th {font-weight:600;} div.uqsr-ins-num {display:inline-block; margin-left:1%; vertical-align: top; margin-top:0.5em;} div.uqsr-ins-txt {display:inline-block; vertical-align: top; margin-top:0.5em;} img.uqsr-ins-img {width:100%; margin:3em 0em; display:block; position:relative; left:0%;} @media (min-width:280px) {div.uqsr-ins-num {width:4%; margin-right:1%;} div.uqsr-ins-txt {width:91%;}} @media (min-width:1200px) {div.uqsr-ins-num {width:2%;} div.uqsr-ins-txt {width:93%;} img.uqsr-ins-img {width:70%; left:15%;}} @media (min-width:1400px) {div.uqsr-ins-num {margin-right:0%;} div.uqsr-ins-txt {width:95%;}} p.isolayment-install-para {font-size:1em; line-height:1.65em;} p.indent-left {padding-left:3.5%; width:95%;} #fic-landing-page {display:block; position:relative; padding-top:120px; padding-left:2%;} .fic-types {display:inline-block; position:relative;} .fic-types img {width:100%;} .fic-types h2 {position:absolute; bottom:3%; left:3%; color:#fff; font-size:3em; font-weight:300; text-transform: uppercase;} @media (min-width:280px) {.fic-types {width:100%;} .fic-types img {opacity: 1;}} @media (min-width:767px) {.fic-types {width:49%;} .fic-types img {opacity: 0.75;} .fic-types img:hover {opacity: 1;}} h5.rfq a {color:#fff; background-color:rgb(0,48,135); padding:1em; border-radius: 0.25em; display:block; margin:1em 0em; text-align:center; text-transform: uppercase; text-decoration: none;} h5.rfq a:hover {background-color:rgb(150,94,5);}