/* Table of Contents update on Tue Dec 01 2015 09:52:45 GMT+0200 (FLE Standard Time) I. Generic -------------------------------------- 01. Reset ------------------------------------ 02. Fonts ------------------------------------ 03. Base ------------------------------------- Animation Bouncing Arrow ----------------- Animation Rotate ------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 04. Helpers ---------------------------------- Clear ------------------------------------ Notext ----------------------------------- Hidden ----------------------------------- Alignleft -------------------------------- Alignright ------------------------------- Disabled --------------------------------- II. Regions -------------------------------------- 01. Wrapper ---------------------------------- 02. Container -------------------------------- Small Desktop ---------------------------- 03. Shell ------------------------------------ 04. Header ----------------------------------- Mobile ----------------------------------- 05. Header Contact --------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 06. Main ------------------------------------- 07. Footer ----------------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 08. Footer Bar ------------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 09. Footer Pinned ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 10. Footer Mobile ---------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 11. Content ---------------------------------- 12. Sidebar ---------------------------------- III. Themes --------------------------------------- IV. Modules -------------------------------------- 01. Button ----------------------------------- 02. Dropdown --------------------------------- 03. Filter ----------------------------------- 04. Form Elements ---------------------------- 05. Form ------------------------------------- 06. Form Partners ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 07. Intro ------------------------------------ Small Intro ------------------------------ Intro Individual ------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 08. Xsmall Intro ----------------------------- Mobile ----------------------------------- 09. Intro Blog Single ------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 10. List ------------------------------------- 11. List Checks ------------------------------ 12. List Circles ----------------------------- 13. List Logos ------------------------------- 14. Loader ----------------------------------- 15. Logo ------------------------------------- Mobile ----------------------------------- 16. Nav -------------------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 17. Nav Secondary ---------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 18. Nav Footer ------------------------------- 19. Popup ------------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- 20. Post Single ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 21. Search ----------------------------------- Mobile ----------------------------------- 22. Section ---------------------------------- 23. Section Logos ---------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 24. Section Info ----------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 25. Section Case Studies --------------------- 26. Section Testimonials --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 27. Section Text ----------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 28. Section Careers -------------------------- Tablet Portrait -------------------------- 29. Section Privacy -------------------------- Tablet Portrait -------------------------- 30. Section Terms ---------------------------- Tablet Portrait -------------------------- 31. Section Introduction --------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 32. Section People --------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 33. Section Featured Work -------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 34. Section Archived Work -------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 35. Section Case Details --------------------- Small Desktop ---------------------------- Mobile ----------------------------------- 36. Section Case ----------------------------- Small Desktop ---------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 37. Section Testimonial Single --------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 38. Section Product Feature ------------------ Small Desktop ---------------------------- Mobile ----------------------------------- 39. Section More Studies --------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- 40. Section Posts ---------------------------- Blue Post -------------------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 41. Section 404 ------------------------------ Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 42. Slider ----------------------------------- 43. Slider Case Studies ---------------------- Small Desktop ---------------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 44. Slider Testimonials ---------------------- Tablet Portrait -------------------------- Mobile ----------------------------------- Mobile ----------------------------------- 45. Tab -------------------------------------- Mobile ----------------------------------- 46. Table ------------------------------------ 47. Widget ----------------------------------- */ .ico-email-hover { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -140px -122px; width: 30px; height: 21px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-email { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -106px -122px; width: 30px; height: 21px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-hex-medium-pink { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -110px 0; width: 53px; height: 59px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-hex-medium { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -167px 0; width: 53px; height: 59px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-hex-small { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: 0 -122px; width: 34px; height: 38px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-hex { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: 0 0; width: 106px; height: 118px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-linkedin-hover { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -26px -164px; width: 22px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-linkedin { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: 0 -164px; width: 22px; height: 22px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-share-normal { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -167px -63px; width: 38px; height: 54px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-share { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -110px -63px; width: 38px; height: 54px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-hover { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -72px -122px; width: 30px; height: 24px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -38px -122px; width: 30px; height: 24px; display: inline-block; vertical-align: middle; font-size: 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .ico-email-hover { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: -130px -120px; background-size: 215.5px 181.5px; width: 29.5px; height: 20.5px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-email { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: -98.5px -120px; background-size: 215.5px 181.5px; width: 29.5px; height: 20.5px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-hex-medium-pink { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: -107.5px 0; background-size: 215.5px 181.5px; width: 53px; height: 59px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-hex-medium { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: -162.5px 0; background-size: 215.5px 181.5px; width: 53px; height: 59px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-hex-small { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: 0 -120px; background-size: 215.5px 181.5px; width: 33.5px; height: 38px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-hex { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: 0 0; background-size: 215.5px 181.5px; width: 105.5px; height: 118px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-linkedin-hover { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: -23.5px -160px; background-size: 215.5px 181.5px; width: 21.5px; height: 21.5px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-linkedin { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: 0 -160px; background-size: 215.5px 181.5px; width: 21.5px; height: 21.5px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-share-normal { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: -162.5px -61px; background-size: 215.5px 181.5px; width: 38px; height: 53.5px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-share { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: -107.5px -61px; background-size: 215.5px 181.5px; width: 38px; height: 53.5px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter-hover { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: -67px -120px; background-size: 215.5px 181.5px; width: 29.5px; height: 24px; display: inline-block; vertical-align: middle; font-size: 0; } .ico-twitter { background-image: url(https://www.webigence.com/css/images/sprite.@2x.png); background-position: -35.5px -120px; background-size: 215.5px 181.5px; width: 29.5px; height: 24px; display: inline-block; vertical-align: middle; font-size: 0; } } /* ------------------------------------------------------------ *\ 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, body { height: 100%; } 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 { 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="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { display: none; -webkit-appearance: none; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } textarea { overflow: auto; resize: none; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } a[href^="tel"]:hover { color: inherit; } 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; } /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Base \* ------------------------------------------------------------ */ body { min-width: 320px; background: #fff url(https://www.webigence.com/css/images/spinner.gif) no-repeat center; font-family: 'Roboto', sans-serif; font-size: 20px; line-height: 1.75; color: #636978; } body.loaded { background: #fff; } body.no-scroll, body.no-scroll .wrapper { overflow: hidden; height: 100%; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } a:hover, a:focus, a:active { outline: none; } a[href^="tel"] { text-decoration: none; } h1 { font-size: 46px; } h2 { font-size: 40px; } h3 { font-size: 33px; } h4 { font-size: 28px; } h5 { font-size: 24px; } h6 { font-size: 18px; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.875em; } p, ul, ol, dl, table, blockquote { margin-bottom: 1.75em; } p { font-weight: 400; } 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; } /* Animation Bouncing Arrow */ @-webkit-keyframes bouncing-arrow { 0%, 20%, 50%, 80%, 100% { -webkit-transform:translateY(0); transform:translateY(0); } 40% { -webkit-transform:translateY(-10px); transform:translateY(-10px); } 60% { -webkit-transform:translateY(-5px); transform:translateY(-5px); } } @keyframes bouncing-arrow { 0%, 20%, 50%, 80%, 100% { -webkit-transform:translateY(0); transform:translateY(0); } 40% { -webkit-transform:translateY(-10px); transform:translateY(-10px); } 60% { -webkit-transform:translateY(-5px); transform:translateY(-5px); } } /* Animation Rotate */ @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .contact-closing, .contact-opened { position: relative; } .contact-closing .intro, .contact-opened .intro, .contact-closing .header, .contact-opened .header { position: absolute; top: 0; } .mfp-bg { opacity: .6; } /* Mobile */ @media (max-width: 413px) { body { font-size: 18px; } h1 { font-size: 36px; } h2 { font-size: 24px; } h4 { font-size: 18px; } } /* overlay at start */ .mfp-fade.mfp-bg { opacity: 0; transition: all .5s ease-out; } /* overlay animate in */ .mfp-fade.mfp-bg.mfp-ready { opacity: .6; } /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-fade.mfp-wrap .mfp-content { opacity: 0; transition: all .5s ease-out; } /* content animate it */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; } /* content animate out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } @supports (-webkit-appearance: none) { /* Mobile */ @media (max-width: 767px) { /*.wrapper-home { padding-top: 0 !important; } .wrapper .intro.intro-home { position: relative; }*/ .wrapper .section-info .animated h1, .wrapper .section-info .animated p, .wrapper .section-info .animated .pull-right + [class^="col-"] h1, .wrapper .section-info .animated .pull-right + [class^="col-"] p { opacity: 1; visibility: visible; -webkit-transform: translateX(0px) !important; -ms-transform: translateX(0px) !important; transform: translateX(0px) !important; } } } .wrapper-home { padding-top: 100vh; } @media (max-width: 767px) { .link-tel-white:hover, .link-tel-white:active { color: #fff !important; text-decoration: underline !important; } .link-tel-pink:hover, .link-tel-pink:active { color: #ff2e64 !important; text-decoration: underline !important; } .mobile-contact a[href^='tel']:hover, .mobile-contact a[href^='tel']:active { color: #fff !important; text-decoration: underline !important; } } /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ /* Clear */ .clear:after { content: ''; line-height: 0; display: table; clear: both; } /* Notext */ .notext { white-space: nowrap; text-indent: 100%; text-shadow: none; overflow: hidden; } .notext-old { font-size: 0; line-height: 0; text-indent: -4000px; } /* Hidden */ [hidden], .hidden { display: none; } /* Alignleft */ .alignleft { float: left; } /* Alignright */ .alignright { float: right; } /* Disabled */ [disabled], .disabled { cursor: default; } /* ------------------------------------------------------------ *\ II. Regions \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Wrapper \* ------------------------------------------------------------ */ .wrapper { overflow: hidden; display: none; } .wrapper.loaded { display: block; } /* ------------------------------------------------------------ *\ Container \* ------------------------------------------------------------ */ .container { width: 1267px; } /* Small Desktop */ @media (max-width: 1299px) { .container { width: 100%; } } /* ------------------------------------------------------------ *\ Shell \* ------------------------------------------------------------ */ .shell { max-width: 1200px; margin: auto; } /* ------------------------------------------------------------ *\ Header \* ------------------------------------------------------------ */ .header { width: 100%; position: absolute; left: 0px; top: 0px; z-index: 999; transition: -webkit-transform .5s, top .5s; transition: transform .5s, top .5s; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .header .header-inner { padding: 26px 0; transition: padding .5s; } .header.hide-header { display: none; } .header .header-inner:before, .header .header-inner:after { content: ''; display: table; } .header .header-inner:after { clear: both; } .header .logo { float: left; } .header .nav { float: right; margin-top: 4px; } .header .btn { margin: 0 0 0 15px; } /*.header.header-alt { opacity: 1; top: -100%; } .header.header-alt.fixed { top: -140px; }*/ .header.header-alt .header-inner { padding: 26px 0; } .header.header-alt .logo img { opacity: 1; } .header.header-alt .logo span { left: 5px; } .header .nav-toggle { display: none; } .header { position: fixed; top: 0; left: 0; right: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .header.scrolled { position: fixed; -webkit-transform: translateY(-140px); -ms-transform: translateY(-140px); transform: translateY(-140px); } .header.scrolled.slide { background-color: #3e54ae; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .header.scrolled .header-inner { padding: 15px 0; } .header.header-pinned.fixed, .header.header-blue { background-color: #3e54ae; } .header.scrolled.slide { border-bottom: 2px solid #fff; } .header.scrolled.slide .logo img { opacity: 1; } .header.scrolled.slide .logo span { left: 5px; } /* Mobile */ @media (max-width: 767px) { .header .nav { margin: 0; } .header .logo { margin-left: 3px; } .header .nav-toggle { display: block; width: 17px; position: absolute; right: 18px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; font-size: 36px; z-index: 9999; } .header .nav-toggle .bar { display: block; height: 2px; background-color: #fff; } .header .nav-toggle .bar ~ .bar { margin-top: 4px; } .header.header-alt .logo img { width: 30px; height: auto; } .header .header-inner { padding: 23px 0; } .header.scrolled .header-inner { padding: 23px 0; } } /* ------------------------------------------------------------ *\ Header Contact \* ------------------------------------------------------------ */ .header-contact { background-color: #386dd9; height: 0px; text-align: center; overflow: hidden; color: #fff; transition: height .5s; } .header-contact.contact-no-transition { transition: none; } .header-contact.contact-opened { height: 600px; } .header-contact.contact-opened .close-header-contact { display: block; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; } .header-contact.contact-opened .close-header-contact:hover { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .header-contact .header-contact-head { margin-bottom: 100px; position: relative; padding-top: 47px; } .header-contact .header-contact-head h3 { font-weight: 200; font-size: 52px; margin: 0 0 11px; } .header-contact .header-contact-head h5 { font-weight: 300; margin: 0; letter-spacing: -0.025em; } .header-contact .close-header-contact { position: absolute; right: 32px; top: 32px; font-size: 0; color: #fff; z-index: 1; } .header-contact .close-header-contact i { font-size: 43px; } .header-contact .header-contact-body { text-align: center; } .header-contact .header-contact-body a { display: inline-block; cursor: pointer; } .header-contact .header-contact-body a:hover, .header-contact .header-contact-body a:focus, .header-contact .header-contact-body a:active { text-decoration: none; color: #fff; } .header-contact .header-contact-body a[href^='tel'] { pointer-events: none; } .header-contact .header-contact-body .icon { display: inline-block; width: 106px; height: 118px; background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: 0 0; text-align: center; margin-bottom: 30px; } .header-contact .header-contact-body .icon i { color: #386dd9; font-size: 74px; line-height: 114px; } .header-contact .header-contact-body span { display: block; font-weight: 200; font-size: 42px; } .header-contact .col-sm-6 a { padding-left: 40px; } .header-contact .col-sm-6 ~ .col-sm-6 a { padding-left: 0; padding-right: 40px; } /* Tablet Portrait */ @media (max-width: 1023px) { .header-contact .header-contact-head { margin-bottom: 50px; } .header-contact .header-contact-head h3 { font-size: 32px; } .header-contact .col-sm-6 a, .header-contact .col-sm-6 ~ .col-sm-6 a { padding: 0; } .header-contact .header-contact-body span { font-size: 32px; } .header-contact .header-contact-body .icon { width: 53px; height: 59px; background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -167px 0; } .header-contact .header-contact-body .icon i { line-height: 57px; font-size: 34px; } } /* Mobile */ @media (max-width: 767px) { .header-contact .header-contact-body a[href^='tel'] { pointer-events: initial; } .header-contact .close-header-contact { display: none; } } /* ------------------------------------------------------------ *\ Main \* ------------------------------------------------------------ */ .main { position: relative; background-color: #fff; z-index: 9; -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; } .main.intro-under { z-index: 999; } /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ .footer { background-color: #212a3e; position: relative; z-index: 10; } .footer:before { content: ''; width: 100%; height: 1px; background-color: #212a3e; position: absolute; left: 0; bottom: -1px; } .footer .footer-inner { position: relative; padding: 40px 0 30px; } .footer .logo-footer { display: inline-block; color: #fff; white-space: nowrap; margin-bottom: 87px; margin-top: 10px; } .footer .logo-footer:hover { text-decoration: none; } .footer .logo-footer img { display: inline-block; vertical-align: middle; margin-right: 10px; } .footer .logo-footer span { display: inline-block; vertical-align: middle; font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: 0.025em; } .footer .logo-footer strong { font-weight: 500; font-size: 20px; display: block; letter-spacing: 0; } .footer .footer-contacts { width: 40%; float: right; } .footer .footer-address { display: inline-block; font-weight: 500; font-size: 16px; color: #fff; } .footer .footer-address span { display: block; line-height: 2; } .footer .email, .footer .phone { font-weight: 500; font-size: 16px; color: #fff; line-height: 2; } .footer .phone { margin: 30px 0 0; } /* Small Desktop */ @media (max-width: 1299px) { .footer .footer-contacts { width: 50%; } } /* Mobile */ @media (max-width: 767px) { .footer { display: none; } } /* ------------------------------------------------------------ *\ Footer Bar \* ------------------------------------------------------------ */ .footer-bar { background-color: #3e54ae; position: relative; z-index: 9; color: #fff; height: 0; } .footer-bar .footer-bar-head { position: relative; text-align: center; margin-bottom: 71px; padding-top: 93px; } .footer-bar .footer-bar-head h3 { font-size: 46px; margin: 0 0 10px; } .footer-bar .footer-bar-head h5 { font-weight: 300; margin: 0; } .footer-bar [class^='col'] { padding-left: 130px; } .footer-bar .footer-bar-body { padding-bottom: 100px; text-align: left; overflow: hidden; } .footer-bar .footer-bar-body h6 { font-weight: 500; margin: 0 0 30px; } .footer-bar .footer-bar-body .list-checks { display: inline-block; vertical-align: top; } .footer-bar .footer-bar-body .list-checks ~ .list-checks { margin-left: 80px; } .footer-bar-centered .footer-bar-body { text-align: center; } .footer-bar .go-top { width: 56px; height: 56px; border: 3px solid #212a3e; border-radius: 50%; text-align: center; position: absolute; right: 0; bottom: 100%; margin-bottom: 60px; z-index: 99; transition: border-color .3s; } .footer-bar .go-top:hover, .footer-bar .go-top:focus, .footer-bar .go-top:active { outline: none; } .footer-bar .go-top:hover { text-decoration: none; border-color: #ff2e64; } .footer-bar .go-top:hover i { color: #ff2e64; } .footer-bar .go-top i { font-size: 40px; color: #212a3e; line-height: 50px; transition: color .3s; } .footer-bar .close-footer-bar { position: absolute; right: 40px; top: 40px; font-size: 0; z-index: 999; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; } .footer-bar .close-footer-bar:hover { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .footer-bar .close-footer-bar i { font-size: 48px; } .footer-bar .close-footer-bar:hover i, .footer-bar .close-footer-bar:focus i { color: #fff; } .footer-bar-opened { height: auto; text-align: center; } .footer-bar-opened .container { position: relative; left: 0; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .footer-bar-opened [class^='col'] { padding-left: 9%; } .footer-bar-opened .list-checks { text-align: left; } .footer-bar-opened .footer-bar-body { padding-bottom: 66px; } .footer-bar-block .footer-bar-head { padding-top: 62px; margin-bottom: 60px; } .footer-bar-block [class^='col'] { padding-left: 11.4%; } .footer-bar-block [class^='col'] ~ [class^='col'] { padding-left: 13.3%; } .footer-bar-block .list-checks li { line-height: 2.25; } .footer-bar-block .list-checks li:before { font-size: 31px; } .footer-bar-block .footer-bar-body { padding-bottom: 30px; } .footer-bar-block .footer-bar-body .list-checks ~ .list-checks { margin-left: 90px; } .footer-bar-upper .go-top { margin-bottom: 220px; } @media (max-width: 1199px) { /*.footer-bar-block [class^='col'], .footer-bar-block [class^='col'] ~ [class^='col'] { padding-left: 15px; } .footer-bar-block .footer-bar-head { padding-top: 40px; margin-bottom: 40px; }*/ .footer-bar [class^='col'], .footer-bar-block [class^='col'], .footer-bar-block [class^='col'] ~ [class^='col'] { padding-left: 15px; width: auto; float: none; display: inline-block; vertical-align: top; } .footer-bar-block [class^='col'] ~ [class^='col'] { margin-left: 130px; } .footer-bar .footer-bar-body, .footer-bar-block .footer-bar-body { text-align: center; } .footer-bar-block .footer-bar-body .list-checks ~ .list-checks, .footer-bar .footer-bar-body .list-checks ~ .list-checks { margin-left: 10px; } } @media (max-width: 959px) { .footer-bar-block [class^='col'] ~ [class^='col'] { margin-left: 0; } } /* Mobile */ @media (max-width: 767px) { .footer-bar-opened { display: block; } .footer-bar .go-top { display: none; } .footer-bar .close-footer-bar { right: 20px; top: 20px; } .footer-bar-opened .footer-bar-body { text-align: left; } .footer-bar-opened .footer-bar-head { padding-top: 40px; } .footer-bar .footer-bar-body .list-checks ~ .list-checks:last-child { margin-left: 0; } .footer-bar [class^='col'], .footer-bar-block [class^='col'], .footer-bar-block [class^='col'] ~ [class^='col'] { width: 100%; display: block; } .footer-bar-block [class^='col'] ~ [class^='col'] { margin-top: 40px; } .footer-bar .footer-bar-body .list-checks { width: 100%; } .footer-bar#section-technologies .list-checks ~ .list-checks { margin-left: 0; } .footer-bar-careers .footer-bar-body .list-checks { margin-left: 0 !important; width: 100%; } } /* Mobile */ @media (max-width: 479px) { .footer-bar .footer-bar-body .list-checks li { font-size: 16px !important; } } @media (max-width: 413px) { .footer-bar .footer-bar-head h3 { font-size: 36px; } .footer-bar .footer-bar-body .list-checks { display: block; margin-bottom: 30px; } .footer-bar-block .footer-bar-body .list-checks ~ .list-checks, .footer-bar .footer-bar-body .list-checks ~ .list-checks { margin-left: 0; } .footer-bar#section-technologies .list-checks ~ .list-checks { margin-left: 0; } } /* ------------------------------------------------------------ *\ Footer Pinned \* ------------------------------------------------------------ */ .footer-pinned { width: 100%; position: fixed; left: 0; bottom: -70px; z-index: 999; background-color: #212a3e; border-top: 2px solid #fff; overflow: hidden; color: #fff; padding: 13px 0; transition: bottom .3s; } .footer-pinned-placeholder { height: 70px; transition: 300ms; } .footer-pinned.hidden + .footer-pinned-placeholder { height: 0; } .footer-pinned.slide { bottom: 0; } .footer-pinned h6 { display: inline-block; vertical-align: middle; font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 0.075em; margin: 0; } .footer-pinned ul { display: inline-block; vertical-align: middle; list-style: none; margin: 0; } .footer-pinned ul li { display: inline-block; vertical-align: middle; margin-left: 25px; } .footer-pinned ul li ~ li { margin-left: 20px; } .footer-pinned ul .icon { display: inline-block; vertical-align: middle; margin-right: 10px; width: 34px; height: 38px; background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: 0 -122px; text-align: center; } .footer-pinned ul .icon i { font-size: 24px; color: #212a3e; line-height: 36px; top: 0; } .footer-pinned ul .icon + span { display: inline-block; vertical-align: middle; font-weight: 500; font-size: 18px; letter-spacing: 0.075em; } .footer-pinned ul .icon + span a:hover, .footer-pinned ul .icon + span a:focus, .footer-pinned ul .icon + span a:active { color: #fff; text-decoration: none; } .footer-pinned ul .icon + span a[href^='tel'] { pointer-events: none; } .footer-pinned.static { position: absolute; left: 0; bottom: 0; border-bottom: 2px solid #fff; } .footer-pinned .close-pinned-footer { float: right; font-size: 0; position: relative; right: -8px; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; } .footer-pinned .close-pinned-footer:hover { text-decoration: none; color: #fff; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .footer-pinned .close-pinned-footer i { font-size: 36px; } .footer-pinned-expand { display: none; } .footer-pinned .mobile-contact { display: none; } /* Tablet Portrait */ @media (max-width: 1023px) { .footer-pinned { padding: 2px 0; height: 45px; overflow: hidden; transition: height .3s ease-in-out, bottom .3s ease-in-out; } .footer-pinned ul { display: none; margin: 7px 0 0; } .footer-pinned .close-pinned-footer { display: none; } .footer-pinned.expand { height: 100%; bottom: 0; border-top: 0; } .footer-pinned.expand.slide { bottom: 0; } .footer-pinned-expand { display: block; position: absolute; right: 15px; top: 8px; } .footer-pinned-expand .mdi-navigation-close { display: none; } .footer-pinned h6 { margin: 5px 0 0; } .footer-pinned-expand:hover, .footer-pinned-expand:focus, .footer-pinned-expand:active { color: #fff; } .footer-pinned-expand i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); font-size: 28px; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; } .footer-pinned.expand .footer-pinned-expand .mdi-navigation-expand-more { display: none; } .footer-pinned.expand .footer-pinned-expand .mdi-navigation-close { display: block; } .footer-pinned ul li { margin-left: 0; } .footer-pinned ul li ~ li { margin-left: 20px; } .footer-pinned ul .icon + span { font-size: 14px; } .footer-pinned.expand h6 { display: none; } .footer-pinned.expand .mobile-contact { display: block; padding-top: 80px; text-align: center; } .footer-pinned.expand .mobile-contact h1 { font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 50px; } .footer-pinned.expand .mobile-contact h5 { display: none; } .footer-pinned.expand .mobile-contact .icon + span { font-size: 24px; } .footer-pinned.expand .mobile-contact .col-sm-12 ~ .col-sm-12 { margin-top: 40px; } .footer-pinned.expand .mobile-contact .icon { display: block; width: 53px; height: 59px; text-align: center; line-height: 66px; margin: 0 auto 5px; background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -167px 0; color: #212a3e; } } /* Mobile */ @media (max-width: 767px) { .footer-pinned ul .icon + span a[href^='tel'] { pointer-events: auto; } } /* ------------------------------------------------------------ *\ Footer Mobile \* ------------------------------------------------------------ */ .footer-mobile { display: none; } /* Mobile */ @media (max-width: 767px) { .footer-mobile { display: block; background-color: #212a3e; padding: 30px 0; text-align: center; position: relative; z-index: 10; } .footer-mobile.overflow { overflow: hidden; } .footer-mobile .go-top { width: 56px; height: 56px; border: 3px solid #212a3e; border-radius: 50%; text-align: center; position: absolute; left: 50%; top: -100px; margin-left: -28px; z-index: 99; } .footer-mobile-top .go-top { top: -140px; } .footer-mobile .go-top i { font-size: 40px; color: #212a3e; line-height: 50px; } .footer-mobile .footer-box ~ .footer-box { margin-top: 50px; } .footer-mobile .footer-box .icon { display: inline-block; width: 53px; height: 59px; background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -167px 0; text-align: center; line-height: 1; } .footer-mobile .footer-box .icon:hover { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -110px 0; } .footer-mobile .footer-box .icon i { font-size: 30px; color: #212a3e; line-height: 57px; } .footer-mobile .footer-box h4 { font-size: 26px; color: #fff; } .footer-mobile .footer-box h4 a:hover { text-decoration: none; color: #ff2e64; } .footer-mobile .footer-box h5 { font-weight: 500; font-size: 20px; color: #fff; margin: 10px 0 5px; } .footer-mobile .footer-box p { font-size: 16px; margin: 0; } .footer-mobile .footer-box p + a { font-size: 16px; font-weight: 500; color: #fff; } .footer-mobile .footer-box .icon-alt, .footer-mobile .footer-box .icon-alt:hover { background: none; } .footer-mobile .toggle-options { display: inline-block; margin-top: 100px; } .footer-mobile .toggle-options:hover, .footer-mobile .toggle-options:focus, .footer-mobile .toggle-options:active { text-decoration: none; } .footer-mobile .toggle-options span { display: inline-block; vertical-align: middle; font-weight: 400; font-size: 18px; color: #fff; margin-right: 5px; } .footer-mobile .toggle-options i { vertical-align: middle; color: #fff; font-size: 30px; transition: -webkit-transform .4s; transition: transform .4s; } .footer-mobile .toggle-options span.normal { display: inline-block; } .footer-mobile .toggle-options span.active { display: none; } .footer-mobile .toggle-options.active span.active { display: inline-block; } .footer-mobile .toggle-options.active span.normal { display: none; } .footer-mobile .toggle-options.active i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .footer-mobile .footer-nav { list-style: none; padding: 0; margin-top: 20px; display: none; } .footer-mobile .footer-nav li ~ li { margin-top: 10px; } .footer-mobile .footer-nav a { display: block; font-weight: 300; font-size: 27px; color: #fff; line-height: 1.7; } .footer-mobile-home .go-top { display: none; } } /* Mobile */ @media (max-width: 413px) { .footer-mobile .toggle-options { margin-top: 50px; } } /* ------------------------------------------------------------ *\ Content \* ------------------------------------------------------------ */ .content {} /* ------------------------------------------------------------ *\ Sidebar \* ------------------------------------------------------------ */ .sidebar {} /* ------------------------------------------------------------ *\ III. Themes \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ IV. Modules \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Button \* ------------------------------------------------------------ */ .btn { display: inline-block; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .btn-pink { border: 2px solid #fff; border-radius: 2px; color: #fff !important; background-color: transparent; text-transform: none; transition: all .3s; padding: 13px 31px !important; } .btn-pink:hover { background-color: #ff2e64 !important; border-color: #ff2e64; } .btn-pink-alt { border-color: #212a3e; color: #212a3e !important; font-weight: 500; font-size: 18px; } .btn-pink-alt:hover { color: #fff !important; } /* ------------------------------------------------------------ *\ Dropdown \* ------------------------------------------------------------ */ .dropdown .dropdown-toggle { margin: 0; padding: 10px 0; color: #fff !important; border: 0; padding: 0; } .dropdown.open .dropdown-toggle, .dropdown.open .dropdown-toggle:hover, .dropdown.open .dropdown-toggle:focus, .dropdown.open .dropdown-toggle:active { background-color: transparent; } .dropdown .dropdown-toggle:hover, .dropdown .dropdown-toggle:focus, .dropdown .dropdown-toggle:active { box-shadow: none !important; } .dropdown .dropdown-toggle i, .dropdown .dropdown-toggle span { display: inline-block; vertical-align: middle; } .dropdown .dropdown-toggle i { position: relative; top: -1px; } .dropdown .dropdown-toggle span { margin-left: 5px; font-family: 'Roboto', sans-serif; font-size: 20px; text-transform: none; } .dropdown .dropdown-menu { width: 235px; position: absolute; left: auto; right: 0; top: 100%; max-width: none; } .dropdown .dropdown-menu li { display: block; padding: 0; } .dropdown .dropdown-menu li ~ li { margin: 0; } /* ------------------------------------------------------------ *\ Filter \* ------------------------------------------------------------ */ .filter { width: auto; position: absolute; right: 10px; bottom: 21px; opacity: 0; transition: opacity .3s; z-index: 99; } .filter.active { opacity: 1; } .filter .toggle-filter { padding: 0 0 5px; color: #fff; opacity: 1; font-size: 20px; letter-spacing: 0.005em; } .filter .toggle-filter i, .filter .toggle-filter span { display: inline-block; vertical-align: middle; } .filter .toggle-filter span { margin-left: 0; font-weight: 500; font-size: 20px; text-transform: none; } .filter .filter-options { width: 235px; background-color: #fff; border-radius: 5px; position: absolute; right: 0; top: 100%; z-index: 999; box-shadow: 0 2px 8px rgba(0,0,0, .2); color: #212a3e; opacity: 0; visibility: hidden; transition: all .3s; overflow: hidden; } .filter .filter-options-inner { height: 100%; padding: 39px 19px 37px 41px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .filter .filter-options-inner::-webkit-scrollbar { display: none; } .filter .filter-options.opened { opacity: 1; visibility: visible; } .filter .filter-options h6 { font-weight: 400; font-size: 18px; margin: 0 0 27px; } .filter .filter-options ul { list-style: none; } .filter .filter-options ul li { display: block; } .filter .filter-options ul li ~ li { margin: 16px 0 0 !important; } .filter .filter-options ul a { display: block; padding: 0; font-weight: 500; font-size: 14px; color: #212a3e; opacity: 1; text-transform: none; position: relative; transition: color .3s; } .filter .filter-options ul a:hover { color: #ff2e64; text-decoration: none; } .filter .filter-options ul .selected a { color: #ff2e64; font-weight: 700; } .filter .filter-options ul .selected a:after { content: '\e8a7'; font-family: 'Material-Design-Icons'; position: absolute; right: 0; top: 50%; font-size: 18px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .filter .filter-options ul .current a:before { display: none; } /* ------------------------------------------------------------ *\ Form Elements \* ------------------------------------------------------------ */ input::-webkit-input-placeholder { color: inherit; opacity: 1; } input::-moz-placeholder { color: inherit; opacity: 1; } input:-ms-input-placeholder { color: inherit; opacity: 1; } input::placeholder { color: inherit; opacity: 1; } textarea::-webkit-input-placeholder { color: inherit; opacity: 1; } textarea::-moz-placeholder { color: inherit; opacity: 1; } textarea:-ms-input-placeholder { color: inherit; opacity: 1; } textarea::placeholder { color: inherit; opacity: 1; } input:-webkit-autofill { -webkit-text-fill-color: inherit !important; -webkit-box-shadow: 0 0 0 1000px #fff inset; } .field {} .textarea {} .select {} .radio {} .checkbox {} .form-control { font-weight: 400; font-size: 18px; color: #212a3e; background-size: 0 2px,100% 2px; } .form-control-wrapper .floating-label { font-weight: 400; font-size: 16px; top: 0; } .form-control-wrapper.error:after { content: '\e6a4'; font-family: 'Material-Design-Icons'; font-size: 18px; color: #f6454e; position: absolute; right: 0; top: 0; } .form-group .form-control:focus, .form-group .form-control.filled { background-image: linear-gradient(#3e54ae,#3e54ae),linear-gradient(#d2d2d2,#d2d2d2); background-size: 100% 2px,100% 1px; } .form-group textarea.auto-expand { line-height: 24px; padding: 5px 0; height: 34px; max-height: 300px; } .form-group input.form-control:focus ~ .floating-label, .form-group input.form-control.filled ~ .floating-label, .form-group textarea.form-control:focus ~ .floating-label, .form-group textarea.form-control.filled ~ .floating-label { color: #3e54ae; } .form-group .form-control.error { background-image: linear-gradient(#f6454e,#f6454e),linear-gradient(#d2d2d2,#d2d2d2); background-size: 100% 2px,100% 1px; } .form-group input.form-control.error ~ .floating-label, .form-group textarea.form-control.error ~ .floating-label { color: #f6454e; } .form-group { margin-bottom: 0; } .form-group ~ .form-group { margin-top: 40px; } /* ------------------------------------------------------------ *\ Form \* ------------------------------------------------------------ */ .form {} /* ------------------------------------------------------------ *\ Form Partners \* ------------------------------------------------------------ */ .form-partners .form-head { margin-bottom: 55px; color: #212a3e; margin-right: -30px; } .form-partners .form-head h1 { font-weight: 300; font-size: 48px; margin: 0 0 10px; line-height: 1.3; } .form-partners .form-head p { font-weight: 300; font-size: 20px; line-height: 1.75; letter-spacing: -0.01em; margin-bottom: 0; color: #000; } .form-partners .form-actions { padding-top: 115px; text-align: center; } .form-partners .form-actions .btn { width: 100%; padding: 16px 31px !important; } .form-partners .form-actions .btn span { display: inline-block; vertical-align: middle; } .form-partners .form-actions .btn i { display: none; } .form-partners .form-actions .btn .icon { position: relative; top: 1px; display: none; } .form-partners .form-actions .btn.sent, .form-partners .form-actions .btn.sending { background-color: #ff2e64; color: #fff !important; border-color: #ff2e64; } .form-partners .form-actions .btn.error, .form-partners .form-actions .btn.error:hover { background-color: #f6454e !important; color: #fff !important; border-color: #f6454e !important; } .form-partners .form-actions .btn.sent .icon, .form-partners .form-actions .btn.error .icon, .form-partners .form-actions .btn.sending .icon { display: inline-block; } .form-partners .form-actions .btn.error .text { display: none; } .form-partners .form-actions .btn.sending .text { display: none; } .form-partners .form-actions .btn.sending .mdi-navigation-refresh { display: inline-block; -webkit-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; } .form-partners .form-actions .btn.sent .mdi-action-done { display: inline-block; } .form-partners .form-actions .btn.error .mdi-alert-warning { display: inline-block; } .form-partners .form-control { box-shadow: inset 0 -2px 0 #d2d2d2\9; } .form-partners .form-control:focus, .form-partners .form-control.filled { box-shadow: inset 0 -2px 0 #3e54ae\9; } .form-partners .form-control:focus ~ .floating-label, .form-partners .form-control.filled ~ .floating-label { font-size: 14px; top: -20px; } .form-partners .form-group { position: relative; } .form-partners .form-notice { display: none; font-weight: 400; font-size: 13px; color: #f6454e; position: absolute; left: 1px; top: 100%; margin-top: 3px; } .form-partners .form-control-wrapper.error ~ .form-notice { display: inline-block; } /* Tablet Portrait */ @media (max-width: 1023px) { .form-partners .form-head h1 { font-size: 32px; } } /* Mobile */ @media (max-width: 767px) { .form-partners .form-actions { padding-top: 40px; } } @media (max-height: 659px) { .form-partners .form-head { margin-right: 0; } .form-partners .form-head h1 { font-size: 28px; } .form-partners .for { font-size: 18px; } .form-partners .form-head { margin-bottom: 30px; } .form-partners .form-actions { padding-top: 30px; } } /* ------------------------------------------------------------ *\ Intro \* ------------------------------------------------------------ */ .intro { width: 100%; position: fixed; left: 0; top: 0; text-align: center; z-index: 10; background-repeat: no-repeat; background-position: center; background-size: cover; transition: top .5s; -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); } .intro.intro-under { z-index: -1; } .intro.intro-under .intro-actions { z-index: -1; } .intro.intro-large { height: 603px; } .intro .intro-image { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 3; overflow: hidden; background-size: cover; background-position: center center; will-change: transform; } .intro .intro-image img { display: none; } .intro .intro-image:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; background-color: #3e54ae; opacity: .9; } .intro.intro-individual { height: 625px; max-height: 92vh; } .intro.intro-individual .intro-image:before { opacity: .7; } .intro .intro-content { width: 100%; position: absolute; left: 0; top: 50%; z-index: 5; color: #fff; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .intro .intro-content h1 { font-weight: 500; margin: 0 0 10px; } .intro .intro-content h5 { font-weight: 500; margin: 0; } .intro .intro-content h6 { font-weight: 400; margin: 50px 0 0; } .intro .intro-content img { margin-bottom: 30px; } .intro .intro-actions { width: 100%; position: absolute; left: 0; bottom: -28px; z-index: 10; } .intro .intro-actions .link-more { display: inline-block; font-weight: 500; font-size: 18px; color: #fff; text-transform: uppercase; text-align: center; letter-spacing: 0.075em; } .intro .intro-actions .link-more span { display: inline-block; } .intro .intro-actions .link-more span.text { display: block; } .intro .intro-actions .link-more .btn-fab { background-color: #fff; padding: 0; box-shadow: 0 2px 3px rgba(0,0,0, .4); } .intro .intro-actions .link-more i { color: #3e54ae; font-size: 34px; line-height: 56px; top: 0; transition: color .3s; } .intro .intro-actions .link-more:hover { text-decoration: none; } .intro .intro-actions .link-more:hover i { color: #ff2e64; } .intro .intro-actions .link-more:hover, .intro .intro-actions .link-more:focus, .intro .intro-actions .link-more:active { text-decoration: none; } .intro .intro-actions .link-more.at-start i { -webkit-animation: bouncing-arrow 2s infinite; animation: bouncing-arrow 2s infinite; text-indent: 1px; } .intro.intro-home .intro-content h5 { font-weight: 300; } .intro-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 8; background-color: #000; opacity: 0; will-change: opacity; } /* Small Intro */ .intro.intro-small { height: 425px; background-color: #3d56b2; } .intro.intro-small h1 { font-weight: 200; font-size: 52px; margin: 40px 0 0; } /* Intro Individual */ .intro.intro-individual h1 { font-weight: 200; font-size: 52px; } .intro.intro-individual .content-img { position: absolute; right: 9%; bottom: 0; z-index: 10; display: block !important; } .intro.intro-individual .intro-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; } .intro.intro-about { height: 395px; } .intro.intro-case-studies { height: 395px; } .intro.intro-case-studies .tabs-nav li ~ li { margin-left: 12px; } .intro.intro-home .intro-content { top: 45.5%; } .intro.intro-home .intro-content img { margin-bottom: 40px; } .intro.animated h1, .intro.animated h5, .intro.animated h6, .intro.animated p, .intro.animated img { opacity: 0; visibility: hidden; -webkit-transform: translateY(25px); -ms-transform: translateY(25px); transform: translateY(25px); transition: all 1.5s ease-in-out; } .intro.animated h1 { transition-delay: .2s; } .intro.animated h5, .intro.animated h6, .intro.animated p { transition-delay: .4s; } .intro.animated-in h1, .intro.animated-in h5, .intro.animated-in h6, .intro.animated-in p, .intro.animated-in img { opacity: 1; visibility: visible; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .intro.intro-home.intro-large { height: 100vh; } .intro.intro-home.intro-large .intro-actions { opacity: 0; transition: opacity 1s ease 3.5s; } .intro.intro-home.intro-large.animated-in .intro-actions { opacity: 1; } @media (max-width: 1279px) { .intro.intro-individual .content-img { bottom: 0; right: 0; height: 280px; width: auto; } } /* Tablet Portrait */ @media (max-width: 1023px) { .intro.intro-individual .content-img { height: 240px; } } /* Mobile */ @media (max-width: 767px) { .intro.intro-home .intro-content img { width: 64px; height: auto; margin-bottom: 30px; } .intro.intro-individual .content-img { display: none !important; } .intro.intro-home .intro-content h1 { font-size: 37px; margin-bottom: 20px; line-height: 1.23; } .intro.intro-home .intro-content h5 { font-weight: 300; font-size: 19px; line-height: 1.56; } .intro .intro-actions .link-more { font-size: 15px; } /*.intro-content.js-fade-to { opacity: 1 !important; margin-top: 0 !important; }*/ } /* Mobile */ @media (max-width: 767px) { .intro.intro-individual h1 { font-size: 46px; } .intro.intro-individual .intro-image .content-img { display: none !important; } } @media (max-width: 374px) { .intro.intro-about .nav-secondary a { font-size: 11px; } } /* ------------------------------------------------------------ *\ Xsmall Intro \* ------------------------------------------------------------ */ .intro.intro-xsmall, .intro.intro-xsmall .intro-content { height: 210px; background-color: #3e54ae; } .intro.intro-blog.with-image, .intro.intro-blog.with-image .intro-content { background-color: transparent; } /* Mobile */ @media (max-width: 767px) { .intro.intro-blog .tabs-nav li ~ li { margin-left: 10px; } } /* ------------------------------------------------------------ *\ Intro Blog Single \* ------------------------------------------------------------ */ .intro.intro-blog-single { height: 536px; } .intro.intro-blog-single h1 { font-weight: 200; font-size: 52px; line-height: 1.38; margin: 0 0 60px; } .intro.intro-blog-single .intro-content { top: auto; bottom: 25px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .intro.intro-blog-single .author-avatar { display: inline-block; margin-bottom: 15px; } .intro.intro-blog-single .author-avatar img { border: 2px solid #fff; border-radius: 50%; margin-bottom: 0; } .intro.intro-blog-single .post-meta { font-weight: 500; font-size: 16px; line-height: 1.25; } .intro.intro-blog-single .post-meta a:hover { text-decoration: none; color: #fff; } .intro.intro-blog-single .post-meta span { display: block; } /* Tablet Portrait */ @media (max-width: 1023px) { .intro h1, .intro.intro-small h1, .intro.intro-blog-single h1 { font-size: 32px; } } /* Mobile */ @media (max-width: 767px) { /*.intro { height: 500px !important; }*/ .intro.intro-xsmall, .intro.intro-xsmall .intro-content { height: 127px !important; } .intro.intro-blog-single h1 { font-size: 48px; margin-bottom: 20px; } .intro.intro-small { height: 300px !important; } .intro.intro-case-studies, .intro.intro-about { height: 350px !important; } .intro.intro-blog-single { height: 550px !important; } .intro.intro-blog-single .post-meta { font-weight: 400; font-size: 15px; } } /* Mobile */ @media (max-width: 413px) { .intro.intro-blog-single h1 { display: -webkit-box; font-size: 44px; overflow: hidden; -webkit-line-clamp: 5; -webkit-box-orient: vertical; } } @media (max-width: 374px) { .intro.intro-blog-single h1 { font-size: 42px; } } @media (max-height: 579px) { /*.intro.intro-home { height: 420px !important; }*/ .intro.intro-home .intro-content img { margin-bottom: 20px; } .intro.intro-home .intro-content h1 { font-size: 28px; padding: 0 20px; } .intro.intro-home .intro-content h5 { font-size: 16px; } .intro.intro-individual { height: 420px !important; } .intro.intro-individual h1 { font-size: 34px; } .intro.intro-individual h6 { margin-top: 30px; } } .intro.intro-under ~ .search-results { opacity: 0; visibility: hidden; } /* ------------------------------------------------------------ *\ List \* ------------------------------------------------------------ */ [class^="list-"] { list-style: none outside none; } /* ------------------------------------------------------------ *\ List Checks \* ------------------------------------------------------------ */ .list-checks li { font-weight: 500; font-size: 18px; color: #fff; line-height: 2.22; letter-spacing: -0.01em; padding-left: 45px; position: relative; } .list-checks li:before { content: '\e61d'; font-family: 'Material-Design-Icons'; position: absolute; left: 0; top: 4px; font-size: 33px; line-height: 1; } @media (max-width: 959px) { .list-checks li { font-size: 16px; } } @media (max-width: 767px) { .list-checks li { font-size: 18px; } } /* ------------------------------------------------------------ *\ List Circles \* ------------------------------------------------------------ */ .list-circles { margin: 30px 0 40px; } .list-circles li { font-weight: 400; font-size: 16px; color: #212a3e; line-height: 1.9; position: relative; padding-left: 30px; } .list-circles li:before { content: ''; width: 10px; height: 10px; background-color: #212a3e; border-radius: 50%; position: absolute; left: 0; top: 10px; } .list-circles li ~ li { margin-top: 20px; } /* ------------------------------------------------------------ *\ List Logos \* ------------------------------------------------------------ */ .list-logos li { display: inline-block; vertical-align: middle; } /* ------------------------------------------------------------ *\ Loader \* ------------------------------------------------------------ */ .loader { text-align: center; padding-top: 80px; } .loader img { display: inline-block; } .loader.infinite-scroll-loader { display: none; } .loader.infinite-scroll-loader.visible { display: block; } /* ------------------------------------------------------------ *\ Logo \* ------------------------------------------------------------ */ .logo img { display: inline-block; vertical-align: middle; opacity: 0; transition: opacity .3s .3s; } .logo span { display: inline-block; vertical-align: middle; font-family: 'PT Sans Caption', sans-serif; font-weight: 700; color: #fff; font-size: 28px; position: relative; left: -60px; transition: left .3s .3s; } .logo:hover { text-decoration: none; } /* Mobile */ @media (max-width: 767px) { .logo span { font-size: 14px; left: -27px; } .logo img { width: 27px; } } /* ------------------------------------------------------------ *\ Nav \* ------------------------------------------------------------ */ .nav { color: #fff; } .nav ul { font-size: 0; } .nav li { display: inline-block; vertical-align: middle; } .nav a { display: block; font-weight: 500; font-size: 16px; color: #fff; padding: 10px 15px; position: relative; } .nav a:before { content: ''; width: 0; height: 2px; background-color: #fff; position: absolute; left: 50%; bottom: 10px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; transition: opacity .3s, width .3s; } .nav a.btn:before { display: none; } .nav a:hover, .nav a:focus, .nav a:active { text-decoration: none; } .nav a:hover, .nav .current a { text-decoration: none; } .nav a:hover:before, .nav .current a:before { width: 30px; opacity: 1; } /* Mobile */ @media (max-width: 767px) { .nav { width: 100%; height: 100vh; position: fixed; left: 0; top: 0; background-color: #386dd9; z-index: 9999; margin: 0; text-align: center; padding-top: 56px; overflow-y: auto; transition: all .3s; opacity: 0; visibility: hidden; } .nav.open { opacity: 1; visibility: visible; } .nav li { display: block; } .nav a { font-weight: 300; font-size: 37px; } .nav a:before { display: none; } .nav .alt { margin-top: 56px; } .nav .alt ~ .alt { margin-top: 12px; } .nav .alt a { padding: 3px 15px; } .nav .alt .icon { display: inline-block; width: 53px; height: 59px; background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -167px 0; text-align: center; } .nav .alt .icon i { font-size: 30px; color: #386dd9; line-height: 57px; } .nav .alt span { display: block; font-weight: 300; font-size: 27px; color: #fff; } .nav .alt a { display: block; font-size: 24px; } .nav-toggle .bar { transition: all .3s; position: relative; top: 0; } .nav-toggle.open .bar:nth-child(2) { opacity: 0; } .nav-toggle.open .bar:first-child { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); top: 6px; } .nav-toggle.open .bar:last-child { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: -6px; } } /* Mobile */ @media (max-width: 413px) { .nav a { font-size: 33px; padding: 7px 15px 6px; } } @media (max-width: 767px) and (max-height: 599px) { .nav { padding-top: 40px; } .nav a { font-size: 26px; padding: 5px 15px; } .nav .alt { margin-top: 10px; } } /* ------------------------------------------------------------ *\ Nav Secondary \* ------------------------------------------------------------ */ .nav-secondary { width: 100%; position: absolute; left: 0; bottom: 0; z-index: 10; text-align: left; } .nav-secondary ul { list-style: none; max-width: 1257px; margin: 0 auto; position: relative; } .nav-secondary li { display: inline-block; vertical-align: middle; } .nav-secondary li ~ li { margin-left: 8px; } .nav-secondary a { display: block; font-weight: 400; font-size: 16px; color: #fff; text-transform: uppercase; letter-spacing: 0.075em; opacity: .5; transition: opacity .3s; line-height: 1; padding: 0 6px 26px; position: relative; } .nav-secondary a:before { content: ''; width: 0%; height: 2px; background-color: #ff2e64; position: absolute; left: 50%; bottom: 0; opacity: 0; transition: opacity .3s, width .3s; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .nav-secondary a:hover, .nav-secondary a:active, .nav-secondary a:focus { opacity: 1; text-decoration: none; } .nav-secondary .current a { opacity: 1; } .nav-secondary .current a:before { opacity: 1; width: 100%; } /* Small Desktop */ @media (max-width: 1299px) { .nav-secondary { padding-left: 15px; } } /* Mobile */ @media (max-width: 767px) { .nav-secondary { padding-left: 12px; } } /* Mobile */ @media (max-width: 413px) { .nav-secondary a { font-size: 14px; padding: 0 6px 24px; } .nav-secondary li ~ li { margin-left: 0; } } /* ------------------------------------------------------------ *\ Nav Footer \* ------------------------------------------------------------ */ .nav-footer ul { list-style: none; } .nav-footer ul li { display: inline-block; vertical-align: middle; line-height: 1; } .nav-footer ul li ~ li { margin-left: 7px; padding-left: 12px; border-left: 1px solid #fff; } .nav-footer ul a { display: block; font-weight: 500; font-size: 16px; color: #fff; } /* ------------------------------------------------------------ *\ Popup \* ------------------------------------------------------------ */ .popup { max-width: 887px; background-color: #fff; border-radius: 5px; position: relative; padding: 45px 17px 50px 60px; font-size: 0; margin: 0 auto; } .popup .popup-body { display: inline-block; vertical-align: middle; width: 45.4%; } .popup .popup-image { display: inline-block; vertical-align: middle; width: 54.6%; text-align: center; } .popup .popup-image img { display: inline-block; max-width: 100%; height: auto; border-radius: 50%; } .popup button.mfp-close { font-size: 0; right: -41px; top: -40px; opacity: 1; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; } .popup button.mfp-close:hover { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .popup button.mfp-close:before { content: '\e8aa'; font-family: 'Material-Design-Icons'; font-size: 42px; color: #fff; } /* Tablet Portrait */ @media (max-width: 1023px) { .popup { padding: 45px 17px 50px 30px; } .popup button.mfp-close { right: 20px; top: 20px; } .popup button.mfp-close:before { color: #212a3e; } } /* Mobile */ @media (max-width: 767px) { .popup { padding: 45px 20px 20px 20px !important; } .popup button.mfp-close { top: 10px; right: 10px; } .popup .popup-image { display: none; } .popup .popup-body { display: block; width: 100%; } } @media (max-height: 659px) { .popup { padding: 15px 15px 20px 30px; } } /* ------------------------------------------------------------ *\ Post Single \* ------------------------------------------------------------ */ .post-single { padding-bottom: 17px; } .post-single .entry, .post-single .entry-header, .post-single .entry-foot { margin: 0 -16px; color: #212a3e; } .post-single .entry-header { padding-top: 85px; margin-right: -20px; margin-bottom: 42px; } .post-single .entry-header h2 { font-weight: 300; line-height: 1.5; margin: 0; } .post-single .entry div { overflow: hidden; } .post-single .entry p { color: #636978; line-height: 2; letter-spacing: 0.01em; margin-bottom: 20px; overflow: hidden; } .post-single .entry p a { font-weight: 500; color: #ff2e64; } .post-single .entry p.dark { color: #212a3e; } .post-single .entry p strong { color: #212a3e; display: block; padding: 25px 0 10px; } .post-single .entry h3 { font-weight: 300; margin: 16px 0 20px; } .post-single .entry figure { margin-bottom: 30px; } .post-single .entry figure img { width: 100%; height: auto; } .post-single .entry figure figcaption { font-weight: 400; font-size: 16px; color: #212a3e; line-height: 2.2; letter-spacing: 0.01em; padding-top: 5px; } .post-single .entry figure.alignleft { margin-right: 20px; } .post-single .entry figure.alignright { margin-left: 20px; } .post-single .entry figure.alignleft ~ figure.alignleft { margin-left: 0; margin-right: 0; } .post-single .entry .full-width { width: 100%; margin-top: 55px; margin-bottom: 47px; } .post-single .entry .one-quarter { width: 24%; } .post-single .entry .one-half { width: 48%; margin-top: 8px; } .post-single .entry ul { list-style: none; font-weight: 400; font-size: 16px; color: #212a3e; margin-bottom: 22px; } .post-single .entry ul li { position: relative; padding-left: 30px; letter-spacing: 0.01em; } .post-single .entry ul li ~ li { margin-top: 22px; } .post-single .entry ul li:before { content: ''; width: 10px; height: 10px; border-radius: 50px; background-color: #212a3e; position: absolute; left: 0; top: 8px; } .post-single .entry ol { list-style: none; font-weight: 400; font-size: 16px; color: #212a3e; margin-bottom: 60px; counter-reset: section; } .post-single .entry ol li { position: relative; padding-left: 30px; letter-spacing: 0.01em; } .post-single .entry ol li ~ li { margin-top: 24px; } .post-single .entry ol li:before { content: counter(section) "."; counter-increment: section; font-weight: 700; color: #212a3e; font-size: 16px; position: absolute; left: 0; top: 0; } .post-single .entry blockquote { clear: both; padding: 0; border: 0; text-align: left; padding: 30px 0 20px; margin: 0 0 30px ; } .post-single .entry blockquote p { font-family: 'PT Sans', sans-serif; font-weight: 700; font-style: italic; font-size: 26px; color: #386dd9; line-height: 1.54; letter-spacing: 0.01em; margin: 0; } .post-single .entry-foot { margin: 86px -16px 50px; } .post-single .entry-foot > h6 { position: relative; font-weight: 400; font-size: 16px; letter-spacing: 0.075em; margin-bottom: 24px; } .post-single .entry-foot > h6:before { content: ''; width: 100%; height: 1px; background-color: #d3d4d8; position: absolute; left: 0; bottom: 4px; z-index: 1; } .post-single .entry-foot > h6 span { display: inline-block; background-color: #fff; padding-right: 10px; position: relative; z-index: 2; } .post-single .entry-foot .entry-foot-author { overflow: hidden; } .post-single .entry-foot .entry-foot-author > a img { float: left; border: 2px solid #fff; border-radius: 50%; margin-right: 20px; } .post-single .entry-foot .entry-foot-author span { display: none; } .post-single .entry-foot .entry-foot-author > a:hover { text-decoration: none; color: #212a3e; } .post-single .entry-foot .entry-foot-author p, .post-single .entry-foot .entry-foot-author h6 { overflow: hidden; } .post-single .entry-foot .entry-foot-author h6 { margin: 8px 0 16px; font-weight: 700; font-size: 16px; } .post-single .entry-foot .entry-foot-author p { font-weight: 400; font-size: 16px; line-height: 1.25; letter-spacing: 0.025em; } .post-single .entry-share { text-align: center; padding-top: 129px; padding-left: 50px; } .post-single .share { display: inline-block; position: relative; } .post-single .share .toggle-share { display: inline-block; font-weight: 500; font-size: 16px; color: #212a3e; } .post-single .share .toggle-share:hover { text-decoration: none; color: #ff2e64; } .post-single .share .toggle-share:hover span { text-decoration: none; } .post-single .share .toggle-share span { display: inline-block; vertical-align: middle; margin-left: 5px; } .post-single .share .toggle-share i { vertical-align: middle; position: relative; top: -5px; } .post-single .share .toggle-share:hover i { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -110px -63px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .post-single .share .toggle-share:hover i { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -110px -63px; } } .post-single .share .toggle-share:hover, .post-single .share .toggle-share:active, .post-single .share .toggle-share:focus { text-decoration: none; } .post-single .share .share-options { width: 207px; padding: 20px 10px; position: absolute; left: -84px; bottom: 100%; margin-bottom: 20px; border-radius: 5px; background-color: #f2f4f7; z-index: 99; opacity: 0; visibility: hidden; transition: all .3s; } .post-single .share .share-options.opened { opacity: 1; visibility: visible; } .post-single .share .share-options:before { content: ''; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 0; border-top: 15px solid #f2f4f7; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 100%; margin-top: -1px; } .post-single .share .share-options ul { list-style: none; text-align: left; } .post-single .share .share-options ul li ~ li { margin-top: 22px; } .post-single .share .share-options ul a { display: block; padding: 12px 10px 12px 17px; position: relative; transition: background-color .3s; background-color: transparent; } .post-single .share .share-options ul span { display: block; vertical-align: middle; padding-left: 57px; font-weight: 700; font-size: 16px; color: #212a3e; transition: color .3s; } .post-single .share .share-options ul i { position: absolute; left: 17px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .post-single .share .share-options ul a:hover { text-decoration: none; background-color: #ff2e64; } .post-single .share .share-options ul a:hover span { color: #fff; } .post-single .share .share-options ul a:hover .ico-linkedin { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -26px -164px; } .post-single .share .share-options ul a:hover .ico-twitter { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -72px -122px; } .post-single .share .share-options ul a:hover .ico-email { background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -140px -122px; } /* Tablet Portrait */ @media (max-width: 1023px) { .post-single .entry, .post-single .entry-header, .post-single .entry-foot { margin: 0; } .post-single .entry-header { padding-top: 40px; margin-bottom: 30px; } .post-single .entry-header h2 { font-size: 26px; } } /* Mobile */ @media (max-width: 767px) { .post-single { padding-bottom: 0; } .post-single .entry-header h2 { font-weight: 300; font-size: 40px; line-height: 1.5; } .post-single .entry .full-width { margin: 0 -15px; width: auto; } .post-single .entry figure figcaption { padding: 5px 15px 10px; } .post-single .entry blockquote p { text-align: center; } .post-single .entry .one-quarter, .post-single .entry .one-half { width: auto; margin: 0 -15px; float: none; } .post-single .entry div { margin: 0 -15px; } .post-single .entry figure.alignleft, .post-single .entry figure.alignright { margin: 0 ; } .post-single .entry .one-quarter { margin: 0 0 20px !important; } .post-single .entry-foot .entry-foot-author a { display: block; position: relative; padding-left: 88px; } .post-single .entry-foot .entry-foot-author > a img { margin: 0; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .post-single .entry-share { background-color: #fff; padding-left: 0; padding-top: 50px; } .post-single .share .toggle-share { display: none; } .post-single .share { display: block; } .post-single .share .share-options { display: block; opacity: 1; visibility: visible; position: relative; width: auto; left: 0; bottom: 0; margin: 0 -15px; border-radius: 0; } .post-single .share .share-options:before { display: none; } .post-single .share .share-options ul { font-size: 0; } .post-single .share .share-options li { display: inline-block; vertical-align: middle; width: 33.3333%; text-align: center; } .post-single .share .share-options ul a { padding: 20px 10px; } .post-single .share .share-options ul span { display: none; } .post-single .share .share-options ul li ~ li { margin: 0; } .post-single .share .share-options ul i { position: relative; left: 0; top: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /* Mobile */ @media (max-width: 413px) { .post-single .entry-header h2 { font-size: 26px; } } /* ------------------------------------------------------------ *\ Search \* ------------------------------------------------------------ */ .search { position: absolute; right: 7px; bottom: 0; } .search .search-field { width: 88px; font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 20px; color: #fff; background-color: transparent; border: 0; border-bottom: 2px solid #3e54ae; padding-left: 26px; padding-bottom: 17px; transition: all .5s; border-radius: 0; } .search .search-field.populated, .search .search-field:focus { width: 378px; padding-left: 32px; border-bottom-color: #ff2e64; } .search .btn-search { font-size: 24px !important; color: #fff !important; position: absolute; left: -2px; top: 7px; cursor: pointer; padding: 0; margin: 0; opacity: 1 !important; } .search .btn-search:hover { box-shadow: none !important; } .search-field::-webkit-input-placeholder { opacity: .5; color: #fff; } .search-field::-moz-placeholder { opacity: .5; color: #fff; } .search-field:-moz-placeholder { opacity: .5; color: #fff; } .search-field:-ms-input-placeholder { opacity: .5; color: #fff; } .search-results { width: 378px; background-color: #fff; position: absolute; right: 0; top: 100%; box-shadow: 0 2px 8px rgba(0,0,0, .2); z-index: 999; padding: 37px 20px; border-radius: 0 0 5px 5px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; overflow-y: auto; -webkit-overflow-scrolling: touch; } .search-results.visible { opacity: 1; visibility: visible; } .search-results-head { overflow: hidden; color: #212a3e; margin-bottom: 33px; } .search-results-head h6 { float: left; font-size: 18px; margin: 0; } .search-results-head a { float: right; color: #ff2e64; font-weight: 500; font-size: 14px; text-transform: uppercase; letter-spacing: 0.075em; opacity: 1; padding: 0; } .search-results-body li { display: block; font-size: 0; } .search-results-body li ~ li { margin: 15px 0 0; } .search-results-body li a { opacity: 1; padding: 0; overflow: hidden; font-size: 0; } .search-results-body li img { display: inline-block; vertical-align: middle; border-radius: 50%; border: 2px solid #fff; width: 15%; margin-right: 6%; } .search-results-body li p {display: inline-block; vertical-align: middle; width: 79%; margin: 0; overflow: hidden; color: #212a3e; text-transform: none; font-weight: 500; font-size: 14px; line-height: 1.57; letter-spacing: -0.005em; } .search-results-body li .highlight { color: #386dd9; } .search-results-body .no-results-message { display: none; } .search-results-body.no-results .no-results-message { display: block; } .search-results-body.no-results ul { display: none; } .search-results-foot { margin: 26px -20px 0; border-top: 1px solid #eceff3; padding: 30px 20px 0; color: #212a3e; } .search-results-foot h6 { margin: 0 0 27px; } .search-results-foot ul li { display: block; } .search-results-foot ul li ~ li { margin: 10px 0 0; } .search-results-foot ul a { padding: 0; font-weight: 500; font-size: 14px; line-height: 1.3; opacity: 1; color: #212a3e; text-transform: none; transition: color .3s; } .search-results-foot ul a:hover { text-decoration: none; font-weight: 700; color: #ff2e64; } .search-mobile { display: none; transition: margin .3s; } /* Mobile */ @media (max-width: 767px) { .search-mobile { display: block; } .search-results.visible { display: none; } .search-mobile .search-results.visible { display: block; } .search { position: fixed; width: 56px; height: 56px; background-color: #ff2e64; border-radius: 50%; right: 16px; bottom: 16px; z-index: 999; box-shadow: 0 2px 3px rgba(0,0,0, .4); } .search:before { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 30px; display: none; } .search .open-search { display: block; width: 58px; height: 58px; border-radius: 50%; text-align: center; color: #fff; line-height: 1; } .search .open-search i { font-size: 30px; line-height: 56px; } .search-mobile .search-inner { width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 999; transition: -webkit-transform .3s; transition: transform .3s; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .search-mobile.opened .search-inner { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .search-mobile .go-back { position: absolute; left: 13px; top: 27px; color: #212a3e; z-index: 99999; } .search-mobile .cancel { position: absolute; right: 20px; top: 30px; color: #c4c4c4; z-index: 99999; display: none; } .search .search-results { width: 100%; height: 100%; position: absolute; left: 0; top: 0; padding-top: 50px; opacity: 1; visibility: visible; } .search-results-head h6 { font-size: 15px; margin-left: 7px; } .search-results-head a { font-size: 12px; } .search-results-body li ~ li { margin: 29px 0 0; } .search .search-field { display: none; border: 0; height: 86px; line-height: 86px; padding: 0 60px 0 70px; font-size: 22px; } .search .search-results-head { margin-bottom: 20px; } .search.opened { overflow: visible; } .search.opened .search-field { width: 100%; height: auto; display: block; position: absolute; left: 0; top: 0; z-index: 9999; padding: 25px 60px 26px 61px; background-color: #fff; color: #212a3e; line-height: 1.3; } .search.opened .search-results { z-index: 9998; background-color: #f2f4f7; overflow: auto; } .search-field::-webkit-input-placeholder { opacity: .5; color: #212a3e; } .search-field::-moz-placeholder { opacity: .5; color: #212a3e; } .search-field:-moz-placeholder { opacity: .5; color: #212a3e; } .search-field:-ms-input-placeholder { opacity: .5; color: #212a3e; } .search-results { padding: 37px 18px; } .search-results .search-results-head, .search-results .search-results-body, .search-results .search-results-foot { display: none; } .search-results.visible .search-results-head, .search-results.visible .search-results-body, .search-results.visible .search-results-foot { display: block; } .search-inner.populated .cancel { display: block; } .search-results-body ul { margin-bottom: 0; } .search-results-body li img { border: 0; width: 11.4%; margin-right: 5%; } .search-results-body li p { font-weight: 400; font-size: 14px; line-height: 1.46; color: #212a3e; } .search-results-body li .highlight { font-weight: 500; } .search-results-foot { margin-top: 10px; padding-top: 15px; border: 0; padding-left: 26px; padding-right: 26px; } .search-results-foot h6 { font-size: 15px; margin-left: 7px; margin: 0 0 17px; } } /* ------------------------------------------------------------ *\ Section \* ------------------------------------------------------------ */ .section {} .section-body a[href^='mailto'] { font-weight: 500 !important; color: #ff2e64 !important; } /* ------------------------------------------------------------ *\ Section Logos \* ------------------------------------------------------------ */ .section-logos { padding: 42px 0; border-bottom: 1px solid #e8e9eb; } .section-logos .section-body { text-align: center; } .section-logos .section-body ul { list-style: none; font-size: 0; } .section-logos .section-body ul li { display: inline-block; vertical-align: middle; margin: 0 30px; } /* Small Desktop */ @media (max-width: 1299px) { .section-logos .section-body ul li { width: 16.6667%; margin: 0; padding: 0 20px; } .section-logos .section-body ul img { max-width: 100%; height: auto; } } /* Mobile */ @media (max-width: 767px) { .section-logos { padding: 0; border: 0; } .section-logos .section-body ul li { width: 33.3333%; margin-top: 20px; } } /* ------------------------------------------------------------ *\ Section Info \* ------------------------------------------------------------ */ .section-info { padding: 0 0 150px; } .section-info .row:nth-child(2n) .section-text { padding-left: 23%; } .section-info .row:nth-child(2n) .section-image { padding-left: 0; padding-right: 50px; } .section-info .section-image, .section-info .section-text { height: 340px; margin-top: 100px; } .section-info .section-image { text-align: center; padding-left: 50px; } .section-info .section-text { display: table; width: 100%; vertical-align: middle; padding: 0; } .section-info .section-text-inner { display: table-cell; vertical-align: middle; padding-top: 60px; } .section-info .section-text h2 { font-weight: 300; color: #000; margin: 0 0 30px; } .section-info .section-text p { font-size: 24px; line-height: 2; letter-spacing: -0.01em; color: #a8aaaf; } .section-info .section-text p span { display: block; font-weight: 400; } .section-info .animated h1, .section-info .animated p { opacity: 0; visibility: hidden; -webkit-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); transition: all 1.5s ease-in-out; } .section-info .animated .pull-right + [class^="col-"] h1, .section-info .animated .pull-right + [class^="col-"] p { -webkit-transform: translateX(-25px); -ms-transform: translateX(-25px); transform: translateX(-25px); } .section-info .animated-in h1, .section-info .animated-in p, .section-info .animated-in .pull-right + [class^="col-"] h1, .section-info .animated-in .pull-right + [class^="col-"] p { opacity: 1; visibility: visible; -webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px); } /* Small Desktop */ @media (max-width: 1299px) { .section-info .section-text h2 { font-size: 36px; } .section-info .section-text p { font-size: 20px; } .section-info .section-text p span { display: inline; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-info .section-text-inner { padding-top: 20px; } } /* Mobile */ @media (max-width: 767px) { .section-info { padding: 50px 0 50px; border-top: 1px solid #f6f7f7; } .section-info .section-image { padding: 0; height: auto; } .section-info .section-image img { width: 60%; height: auto; } .section-info .section-text { display: block; margin-top: 0; text-align: center; height: auto; } .section-info .section-text p { font-weight: 300; font-size: 23px; line-height: 1.87; } .section-info .section-text p span { font-weight: 300; } .section-info .section-text h2 { width: 100%; text-align: center; position: absolute; left: 0; top: 0; font-weight: 200; font-size: 36px; } .section-info .section-text h2 span { display: block; } .section-info .section-body .row { position: relative; } .section-info .section-body .row ~ .row { margin-top: 40px; } .section-info .section-body .col-sm-6 { position: static; float: none !important; } .section-info .row:nth-child(2n) .section-image, .section-info .row:nth-child(2n) .section-text { padding: 0; } } /* ------------------------------------------------------------ *\ Section Case Studies \* ------------------------------------------------------------ */ .section-case-studies { background-color: #212a3e; } /* ------------------------------------------------------------ *\ Section Testimonials \* ------------------------------------------------------------ */ .section-testimonials { padding: 88px 0 235px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-testimonials { padding: 40px 0 100px; } } /* Mobile */ @media (max-width: 767px) { .section-testimonials { padding: 40px 0 140px; } } /* ------------------------------------------------------------ *\ Section Text \* ------------------------------------------------------------ */ .section-text { padding: 215px 0 190px; } .section-text-alt { padding: 93px 0 190px; } .section-text .section-body { margin: 0 -15px; } .section-text h2 { width: 110%; font-weight: 300; color: #212a3e; margin: 0 0 30px; } .section-text h2 ~ h2 { margin-top: 47px; } .section-text p { font-weight: 400; letter-spacing: -0.01em; margin: 0 0 30px; } .section-text p span { font-weight: 500; } .section-text strong { font-weight: 700; color: #212a3e; } .section-text .link-block { font-weight: 500; color: #ff2e64; text-decoration: underline; } .section-text .link-block:hover, .section-text .link-block:active, .section-text .link-block:focus { text-decoration: none; } /* Small Desktop */ @media (max-width: 1299px) { .section-text h2 { font-size: 36px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-text-alt { padding: 40px 0; } .section-text .section-body { margin: 0; } } /* Mobile */ @media (max-width: 413px) { .section-text h2 { font-size: 32px; width: 100%; } .section-text .link-block { font-size: 16px; } } /* ------------------------------------------------------------ *\ Section Careers \* ------------------------------------------------------------ */ .section-careers { padding-bottom: 205px; } .section-careers p { margin-bottom: 33px; } .section-careers p strong { display: block; padding-top: 10px; } .section-careers .list-circles { margin-bottom: 50px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-careers { padding-bottom: 40px; } } /* ------------------------------------------------------------ *\ Section Privacy \* ------------------------------------------------------------ */ .section-privacy { padding: 228px 0 190px; } .section-privacy p { margin-bottom: 34px; padding-right: 10px; } .section-privacy .section-body { margin: 0 -9px 0 -15px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-privacy { padding: 140px 0 100px; } .section-privacy .section-body { margin: 0; } } /* ------------------------------------------------------------ *\ Section Terms \* ------------------------------------------------------------ */ .section-terms { padding: 228px 0 190px; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-terms { padding: 140px 0 100px; } } /* ------------------------------------------------------------ *\ Section Introduction \* ------------------------------------------------------------ */ .section-introduction { padding: 90px 0 68px; position: relative; background-color: #fff; z-index: 9; -webkit-overflow-scrolling: touch; -webkit-backface-visibility: hidden; } .section-introduction .section-body p { color: #212a3e; margin-bottom: 20px; opacity: .9; } .section-introduction .section-body h6 { font-weight: 700; font-size: 14px; color: #212a3e; margin: 90px 0 36px; letter-spacing: 0.01em; } .section-introduction .list-logos li ~ li { margin-left: 43px; } .section-introduction .section-image { text-align: center; } .section-introduction .section-image img { display: inline-block; max-width: 100%; height: auto; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-introduction .section-body h6 { margin: 30px 0; } .section-introduction .list-logos { font-size: 0; } .section-introduction .list-logos li { display: inline-block; width: 25%; text-align: center; padding: 0 10px; } .section-introduction .list-logos li ~ li { margin-left: 0; } } /* Mobile */ @media (max-width: 767px) { .section-introduction { padding: 60px 0 20px; } .section-introduction .section-image { margin-top: 0; margin-bottom: 40px; } .section-introduction .section-image img { width: 60%; height: auto; } } /* Mobile */ @media (max-width: 413px) { .section-introduction { padding: 30px 0 20px; } } /* ------------------------------------------------------------ *\ Section People \* ------------------------------------------------------------ */ .section-people { padding: 90px 0 149px; } .section-people .go-top { width: 56px; height: 56px; border: 3px solid #212a3e; border-radius: 50%; text-align: center; position: absolute; right: 15px; bottom: -110px; z-index: 99; } .section-people .go-top:hover, .section-people .go-top:focus, .section-people .go-top:active { outline: none; } .section-people .go-top:hover { text-decoration: none; } .section-people .go-top i { font-size: 40px; color: #212a3e; line-height: 50px; } .section-people .section-head { padding-right: 50px; } .section-people .section-head h1 { margin: 0 0 30px; color: #212a3e; } .section-people .section-head p { margin: 0 0 17px; font-size: 18px; line-height: 1.94; letter-spacing: -0.01em; } .section-people .section-body { padding-left: 20px; } .section-people .team-members { overflow: hidden; padding-top: 5px; } .section-people .team-member { float: left; width: 20.8%; margin: 0 0 40px 4.2%; text-align: center; } .section-people .team-member:nth-child(4n+1) { clear: left; } .section-people .team-member img { max-width: 100%; height: auto; border-radius: 50%; margin-bottom: 15px; } .section-people .team-member h4 { font-weight: 300; color: #212a3e; margin: 0; line-height: 1.3; } .section-people .team-member p { font-size: 16px; color: #212a3e; letter-spacing: 0.01em; opacity: .7; line-height: 1.3; } .section-people .team-member a:hover { text-decoration: none; } .section-people .team-member a:hover h4, .section-people .team-member a:hover p { color: #212a3e; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-people { padding: 40px 0 100px; } .section-people .section-head { padding: 0; } .section-people .team-member { width: 29.13%; } .section-people .team-member:nth-child(4n+1) { clear: none; } .section-people .team-member:nth-child(3n+1) { clear: left; } .section-people .go-top { bottom: -60px; } } /* Mobile */ @media (max-width: 767px) { .section-people .section-body { padding: 0; margin-left: -20px; } .section-people .go-top { display: none; } .section-people .team-member { margin-left: 0; padding-left: 20px; width: 50%; } .section-people .team-member:nth-child(3n+1) { clear: none; } } /* ------------------------------------------------------------ *\ Section Featured Work \* ------------------------------------------------------------ */ .section-featured-work { padding: 0 0 190px; } .section-featured-work .section-group { position: relative; overflow: hidden; } .section-featured-work .section-group .row { font-size: 0; position: relative; } .section-featured-work .section-group .col-sm-12 { float: none; display: inline-block; vertical-align: middle; } .section-featured-work .section-body { width: 100%; color: #212a3e; z-index: 9; } .section-featured-work .section-body-inner { margin-right: -15px; padding: 20px 0; } .section-featured-work .section-body h2 { margin: 0 0 30px; line-height: 1.2; } .section-featured-work .section-body a:hover, .section-featured-work .section-body a:focus, .section-featured-work .section-body a:active { text-decoration: none; color: #000; } .section-featured-work .section-body h2 span { display: block; } .section-featured-work .section-body p { opacity: .8; font-size: 16px; line-height: 1.9; margin-bottom: 30px; } .section-featured-work .section-body .btn { padding: 17px 28px !important; } .section-featured-work .section-image { border-bottom: 1px solid #fff; position: relative; z-index: 10; } .section-featured-work .section-image img { width: 100%; height: auto; } /* Small Desktop */ @media (max-width: 1299px) { .section-featured-work .section-image { height: 540px; overflow: hidden; } .section-featured-work .section-image img { height: 100%; width: auto; max-width: none; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); position: relative; } .section-featured-work .section-body h2 { font-size: 36px; } .section-featured-work .section-body h2 span { display: inline; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-featured-work { padding: 40px 0 100px; } .section-featured-work .section-body { position: relative; left: 0; top: 0; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .section-featured-work .section-image { width: 100%; height: auto; padding: 0; } .section-featured-work .section-image img { width: 100%; height: auto; max-width: 100%; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); position: relative; left: 0; } .section-featured-work .section-body-inner { margin: 0; padding: 20px 0; } } /* Mobile */ @media (max-width: 767px) { .section-featured-work { background-color: #eceff3; } .section-featured-work .section-body-inner { background-color: #fff; clear: both; text-align: center; padding: 0; } .section-featured-work .section-body-inner a { display: block; padding: 20px; } .section-featured-work .section-group { margin-bottom: 20px; } .section-featured-work .section-body h2 { font-size: 33px; } .section-featured-work .section-body p { display: none; } } /* ------------------------------------------------------------ *\ Section Archived Work \* ------------------------------------------------------------ */ .section-archived-work { padding: 60px 0 210px; border-bottom: 1px solid #e8e9eb; } .section-archived-work .col-sm-6 { padding-right: 20px; } .section-archived-work .col-sm-6:nth-child(even) { padding-right: 15px; padding-left: 20px; } .section-archived-work .archived-work { height: 356px; position: relative; border-radius: 5px; overflow: hidden; margin-bottom: 40px; z-index: 10; } .section-archived-work .archived-work .archived-work-image { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .section-archived-work .archived-work .archived-work-image img { position: relative; z-index: 1; width: 100%; height: auto; } .section-archived-work .archived-work .archived-work-image:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #212a3e; z-index: 2; transition: background-color .3s, opacity .3s; opacity: 1; } .section-archived-work .archived-work .archived-work-content { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 10; color: #fff; padding: 32px 40px; } .section-archived-work .archived-work .archived-work-content a:hover { text-decoration: none; color: #fff; } .section-archived-work .archived-work .archived-work-content h2, .section-archived-work .archived-work .archived-work-content p { transition: font-size .3s; } .section-archived-work .archived-work .archived-work-content h2 { font-size: 46px; line-height: 1.25; margin: 0 0 18px; } .section-archived-work .archived-work .archived-work-content h2 span { display: block; } .section-archived-work .archived-work .archived-work-content p { font-size: 18px; line-height: 2; letter-spacing: -0.01em; } .section-archived-work .archived-work .archived-work-content p span { display: block; } .section-archived-work .archived-work .archived-work-content .btn-pink { position: absolute; left: 50%; bottom: 40px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); border-color: #fff; color: #fff !important; margin-bottom: 0; opacity: 0; transition: all .3s; font-size: 18px; padding: 18px 31px !important; } .section-archived-work .archived-work .archived-work-content .btn-pink:hover { border-color: #ff2e64; } .section-archived-work .archived-work:hover .archived-work-image:before { opacity: .8; background-color: #3e54ae; } .section-archived-work .archived-work:hover .archived-work-content h2 { font-size: 32px; } .section-archived-work .archived-work:hover .archived-work-content p { font-size: 14px; } .section-archived-work .archived-work:hover .archived-work-content .btn-pink { opacity: 1; transition: opacity .3s .3s; } .section-archived-work .filter { display: none; } /* Small Desktop */ @media (max-width: 1299px) { .section-archived-work .archived-work .archived-work-content h2 { font-size: 36px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-archived-work { padding: 40px 0 100px; } .section-archived-work .archived-work .archived-work-content { padding: 25px; } .section-archived-work .archived-work .archived-work-content h2 { font-size: 30px; } .section-archived-work .archived-work:hover .archived-work-content h2 { font-size: 26px; } .section-archived-work .archived-work .archived-work-content p { font-size: 14px; } } /* Mobile */ @media (max-width: 767px) { .section-archived-work { padding: 20px 0 100px; } .section-archived-work .archived-work { border-radius: 0; margin-bottom: 20px; } .section-archived-work .archived-work .archived-work-content { text-align: center; } .section-archived-work .archived-work .archived-work-content h2, .section-archived-work .archived-work:hover .archived-work-content h2 { font-size: 40px; } .section-archived-work .archived-work .archived-work-content p { display: none; } .section-archived-work .archived-work .archived-work-content .btn-pink { opacity: 1; } .section-archived-work .col-sm-6 { padding-right: 15px; } .section-archived-work .col-sm-6:nth-child(even) { padding-left: 15px; } .section-archived-work + .section-logos { display: none; } .section-archived-work .filter { display: block; width: 100%; position: fixed; right: 0; bottom: 0; z-index: 999; text-align: right; } .section-archived-work .filter .toggle-filter { display: inline-block; width: 58px; height: 58px; border-radius: 50%; background-color: #ff2e64; box-shadow: 0 2px 3px rgba(0,0,0, .4); position: relative; margin-bottom: 15px; margin-right: 10px; } .section-archived-work .filter .toggle-filter span { display: none; } .section-archived-work .filter .toggle-filter i { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 30px; transition: opacity .3s; } .section-archived-work .filter .toggle-filter .mdi-navigation-close { opacity: 0; } .section-archived-work .filter .filter-options { opacity: 1; visibility: visible; height: 0 !important; overflow: hidden; transition: height .3s; position: relative; width: auto; top: 0; padding: 0; } .section-archived-work .filter .filter-options h6 { padding: 20px 30px 0; text-align: left; font-weight: 400; font-size: 18px; color: #6d6d6d; } .section-archived-work .filter .filter-options.opened { height: 350px !important; overflow-y: auto; } .section-archived-work .filter .filter-options.opened .filter-options-inner { height: auto; } .section-archived-work .filter .toggle-filter.opened .mdi-content-filter-list { opacity: 0; } .section-archived-work .filter .toggle-filter.opened .mdi-navigation-close { opacity: 1; } .section-archived-work .filter .filter-options ul { text-align: left; padding: 0 16px; } .section-archived-work .filter .filter-options ul li ~ li { margin-top: 5px !important; } .section-archived-work .filter .filter-options ul a { padding: 6px 17px; font-size: 18px; } .section-archived-work .filter .filter-options ul .selected a { background-color: #ffeaef; } .section-archived-work .filter .filter-options ul .selected a:after { right: 15px; font-size: 21px; } } /* Mobile */ @media (max-width: 413px) { .section-archived-work .archived-work .archived-work-content h2, .section-archived-work .archived-work:hover .archived-work-content h2 { font-size: 26px; } .section-archived-work .filter .filter-options.opened { height: 240px; } } @media (max-width: 374px) { .section-archived-work .filter .filter-options.opened { height: 240px !important; } } /* ------------------------------------------------------------ *\ Section Case Details \* ------------------------------------------------------------ */ .section-case-details { padding: 91px 0 73px; } .section-case-details aside { border: 1px solid #eceff3; width: 84%; margin-top: 9px; } .section-case-details .aside-head { text-align: center; border-bottom: 1px solid #eceff3; padding: 41px 0; } .section-case-details .aside-head img ~ img { margin-top: 20px; } .section-case-details .aside-body ul { list-style: none; padding: 30px 20px 30px 30px; color: #212a3e; } .section-case-details .aside-body li ~ li { margin-top: 15px; } .section-case-details .aside-body h6 { margin: 0; font-weight: 500; font-size: 14px; line-height: 1.43; letter-spacing: 0.01em; } .section-case-details .aside-body p { font-size: 14px; } .section-case-details .section-body { color: #212a3e; margin-left: -5px; } .section-case-details .section-body p { font-size: 18px; line-height: 1.94; letter-spacing: -0.01em; margin-bottom: 20px; } .section-case-details .section-body h5 { font-weight: 500; margin: 50px 0 30px; } .section-case-details .section-body ul { list-style: none; } .section-case-details .section-body ul li { font-weight: 400; font-size: 18px; line-height: 2.22; letter-spacing: -0.01em; padding-left: 30px; position: relative; } .section-case-details .section-body ul li:before { content: ''; width: 10px; height: 10px; background-color: #212a3e; border-radius: 50%; position: absolute; left: 0; top: 15px; } /* Small Desktop */ @media (max-width: 1299px) { .section-case-details aside { width: 100%; } .section-case-details .aside-body ul { padding: 20px; } } /* Mobile */ @media (max-width: 767px) { .section-case-details { padding: 60px 0 80px; } .section-case-details aside { border: 0; border-bottom: 1px solid #eceff3; margin: 0 -15px 40px; padding: 0 15px; } .section-case-details .aside-head { border: 0; padding: 0 0 40px; } .section-case-details .section-body { margin: 0; padding: 0 15px; } .section-case-details .aside-body ul { padding: 20px 15px 40px; } } /* ------------------------------------------------------------ *\ Section Case \* ------------------------------------------------------------ */ .section-case { font-size: 0; border-top: 1px solid #eceff3; } .section-case .section-body { display: inline-block; vertical-align: middle; width: 41.66667%; color: #212a3e; position: relative; padding-left: 110px; padding-right: 0; margin-bottom: 10px; } .section-case .section-body h1 { font-weight: 300; margin: 0 0 30px; } .section-case .section-body p { font-size: 18px; line-height: 1.95; opacity: .6; } .section-case .section-image { display: inline-block; vertical-align: middle; width: 58.33333%; position: relative; padding: 0 7px 0 14px; } .section-case .section-image img { width: 100%; height: auto; display: none; } .section-case .section-image img.loaded { display: block; } .section-case.image-right .section-image { left: 41.66667%; padding: 0 14px 0 6px; } .section-case.image-right .section-body { right: 58.3333%; padding-left: 10px; padding-right: 50px; } /* Small Desktop */ @media (max-width: 1299px) { .section-case .section-body { padding-left: 40px; } .section-case .section-body h1 { font-size: 36px; } } /* Mobile */ @media (max-width: 767px) { .section-case { position: relative; } .section-case .section-image, .section-case.image-right .section-image { float: none; width: 100%; left: 0; display: block; padding: 0; margin-top: 150px; position: static; } .section-case .section-body, .section-case.image-right .section-body { float: none; width: 100%; right: 0; padding: 30px 20px; text-align: center; position: static; } .section-case .section-body h1 { width: 100%; position: absolute; left: 0; top: 55px; text-align: center; font-weight: 200; font-size: 46px; } } /* Mobile */ @media (max-width: 413px) { .section-case .section-body h1 { font-size: 36px; } } /* ------------------------------------------------------------ *\ Section Testimonial Single \* ------------------------------------------------------------ */ .section-testimonial-single { background-color: #212a3e; padding: 90px 0 60px; text-align: center; } .section-testimonial-single blockquote { padding: 0; border: 0; color: #fff; } .section-testimonial-single blockquote p { font-weight: 300; font-size: 28px; line-height: 1.8; margin: 0 0 30px; letter-spacing: -0.01em; } .section-testimonial-single blockquote span { display: inline; } .section-testimonial-single blockquote cite { display: block; font-weight: 400; font-size: 18px; opacity: .5; font-style: normal; margin-bottom: 20px; } .section-testimonial-single blockquote img { border-radius: 50%; border: 2px solid #fff; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-testimonial-single { padding: 40px 0; } .section-testimonial-single blockquote p { font-size: 24px; } .section-testimonial-single blockquote p span { display: inline; } } /* Mobile */ @media (max-width: 767px) { .section-testimonial-single { background-color: #3e54ae; padding: 70px 0; } .section-testimonial-single blockquote p { font-size: 28px; line-height: 1.75; } .section-testimonial-single blockquote span { display: block; } .section-testimonial-single blockquote cite span { display: block; } } /* ------------------------------------------------------------ *\ Section Product Feature \* ------------------------------------------------------------ */ .section-product-feature { position: relative; overflow: hidden; } .section-product-feature .section-image { position: relative; z-index: 1; } .section-product-feature .section-image:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #3e54ae; z-index: 2; opacity: .9; } .section-product-feature .section-image img { width: 100%; height: auto; } .section-product-feature .section-body { width: 100%; position: absolute; left: 0; top: 53%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; color: #fff; z-index: 10; } .section-product-feature .section-body h1 { font-weight: 200; font-size: 52px; margin: 0 0 40px; } .section-product-feature .section-body h6 { font-weight: 400; line-height: 1.94; letter-spacing: -0.01em; margin: 0; } .section-product-feature .section-body h6 span { display: block; } /* Small Desktop */ @media (max-width: 1299px) { .section-product-feature .section-body h1 { font-size: 42px; } } /* Mobile */ @media (max-width: 767px) { .section-product-feature { display: none; } } /* ------------------------------------------------------------ *\ Section More Studies \* ------------------------------------------------------------ */ .section-more-studies { padding: 70px 0 180px; background-color: #eceff3; } .section-more-studies .section-head { margin-bottom: 30px; text-align: center; } .section-more-studies .section-head h6 { margin: 0; color: #212a3e; letter-spacing: 0.075em; } .section-more-studies .case-study { position: relative; overflow: hidden; } .section-more-studies .case-study a { display: block; text-decoration: none; } .section-more-studies .case-study img { width: 100%; height: auto; position: relative; z-index: 1; } .section-more-studies .case-study .case-study-overlay { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(33, 42, 62, .9); z-index: 2; padding: 50px 30px 50px 60px; color: #fff; opacity: 0; transition: opacity .3s; } .section-more-studies .case-study .case-study-overlay h3 { font-weight: 300; font-size: 30px; color: #fff; line-height: 1.33; margin: 0; } .section-more-studies .case-study .case-study-overlay h3 span { display: block; } .section-more-studies .case-study .case-study-overlay .btn { position: absolute; left: 50%; bottom: 50px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 18px; } .section-more-studies .case-study a:hover { text-decoration: none; color: #fff; } .section-more-studies .case-study a:hover .case-study-overlay { opacity: 1; } /* Small Desktop */ @media (max-width: 1299px) { .section-more-studies .case-study .case-study-overlay { padding: 30px; } .section-more-studies .case-study .case-study-overlay h3 { font-size: 24px; } .section-more-studies .case-study .case-study-overlay .btn { bottom: 30px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-more-studies .case-study .case-study-overlay { padding: 20px; } .section-more-studies .case-study .case-study-overlay h3 { font-size: 20px; } .section-more-studies .case-study .case-study-overlay .btn { font-size: 14px; bottom: 15px; } } /* Mobile */ @media (max-width: 767px) { .section-more-studies { background-color: #fff; padding: 20px 0 140px; } .section-more-studies .case-study { margin: 0 -15px 20px; } .section-more-studies .case-study .case-study-overlay { opacity: 1; } .section-more-studies .case-study .case-study-overlay h3 { font-size: 36px; text-align: center; } } /* ------------------------------------------------------------ *\ Section Posts \* ------------------------------------------------------------ */ .section-posts { padding: 60px 0 200px; } .section-posts-secondary { padding: 0 0 60px; } .section-posts-teritary { padding: 30px 0 189px; } .section-posts .col-sm-4 { padding: 0 10px; } .section-posts .post { background-color: #eceff3; height: 483px; margin-bottom: 20px; } .section-posts .post-secondary, .section-posts .contact-primary { margin-top: 40px; } .section-posts .post-teritary, .section-posts .contact-secondary { margin-top: 90px; } .section-posts .post .post-image { height: 260px; overflow: hidden; position: relative; z-index: 1; } .section-posts .post .post-image img { width: auto; min-width: 100%; max-width: 0; height: 100%; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .section-posts .post .post-header { text-align: center; position: relative; z-index: 2; } .section-posts .post .post-meta { margin-top: -33px; } .section-posts .post .author-avatar img { display: inline-block; border: 2px solid #fff; border-radius: 50%; } .section-posts .post .author-name { margin-top: 10px; font-weight: 400; font-size: 16px; color: #212a3e; opacity: .7; margin-bottom: 17px; } .section-posts .post .post-date { display: none; } .section-posts .post .post-header h5 { margin: 0; text-align: center; font-weight: 400; font-size: 22px; color: #212a3e; line-height: 1.6; letter-spacing: -0.025em; padding: 0 40px; height: 107px; overflow: hidden; } .section-posts .post .post-header h5 a { display: block; display: -webkit-box; transition: color .3s; height: 107px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .section-posts .post .post-header h5 a:hover { color: #ff2e64; } /* Blue Post */ .section-posts .post-blue { background-color: #3e54ae; } .section-posts .post-blue h3 { font-weight: 300; font-size: 30px; line-height: 1.3; margin: 20px 0; color: #fff; } .section-posts .post-blue h3 a:hover { text-decoration: none; color: #fff; } .section-posts .post-blue .btn { font-size: 18px; } .section-posts .contact { height: 483px; background-color: #3e54ae; color: #fff; text-align: center; margin-bottom: 20px; } .section-posts .contact h2 { font-weight: 200; font-size: 46px; margin: 0 0 70px; } .section-posts .contact .icon { display: inline-block; width: 106px; height: 118px; background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: 0 0; text-align: center; } .section-posts .contact .icon i { color: #3e54ae; font-size: 64px; line-height: 116px; } .section-posts .contact p { margin-bottom: 29px; } .section-posts .contact p.phone { font-weight: 200; font-size: 46px; margin-bottom: 0; } .section-posts .contact p.phone a { color: #fff; } .section-posts .contact-primary { padding: 59px 40px; } .section-posts .contact-secondary { padding: 44px 20px 30px; } .section-posts .contact-secondary h1 { line-height: 1.4; margin-bottom: 50px; } /* Small Desktop */ @media (max-width: 1299px) { .section-posts .contact h2, .section-posts .contact p.phone { font-size: 36px; } .section-posts .post-blue h3 { font-size: 24px; } } /* Tablet Portrait */ @media (max-width: 1023px) { .section-posts .post-secondary, .section-posts .contact-primary, .section-posts .post-teritary, .section-posts .contact-secondary { margin-top: 0; } .section-posts .contact-primary { padding: 59px 30px; } .section-posts .contact-primary h1 { margin: 0 0 50px; } } /* Mobile */ @media (max-width: 767px) { .section-posts { padding: 20px 0 70px; background-color: #eceff3; } .section-posts .post { background-color: #fff; } .section-posts .post .author-name { font-size: 21px; } .section-posts .post .post-header h5 { font-size: 29px; padding: 0; height: 100px; } .section-posts .contact .icon { width: 53px; height: 59px; background-image: url(https://www.webigence.com/css/images/sprite.png); background-position: -167px 0; } .section-posts .contact .icon i { line-height: 57px; font-size: 32px; } .section-posts .col-sm-6 { float: left; width: 50%; } } @media (max-width: 639px) { .section-posts .col-sm-6 { float: none; width: 100%; } } /* Mobile */ @media (max-width: 767px) { .section-posts .post .post-header h5 { font-size: 26px; height: 88px; padding: 0 10px; color: #4d5565; line-height: 1.6; letter-spacing: -0.025em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .section-posts .post .post-header h5 a { color: #212a3e; height: 88px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } /* ------------------------------------------------------------ *\ Section 404 \* ------------------------------------------------------------ */ .section-404 { padding: 199px 0 100px; } .section-404 .section-body h2 { color: #212a3e; line-height: 1.4; margin: 0 0 16px; } .section-404 .section-body h4 { color: #212a3e; line-height: 1.43; opacity: .7; letter-spacing: -0.01em; margin: 0 0 80px; padding-right: 40px; } .section-404 .section-body p { font-size: 16px; color: #212a3e; line-height: 1.9; margin: 0 0 9px; letter-spacing: 0.01em; opacity: .8; } .section-404 .section-body ul { list-style: none; margin: 0; } .section-404 .section-body ul a { display: block; color: #ff2e64; font-size: 16px; line-height: 2.1; letter-spacing: -0.01em; } .section-404 .section-body ul a:hover { font-weight: 500; } .section-404 .section-image { text-align: center; padding-top: 26px; } .section-404 .section-image img { display: inline-block; max-width: 100%; height: auto; } /* Tablet Portrait */ @media (max-width: 1023px) { .section-404 { padding: 140px 0 40px; } .section-404 .section-body h2 { font-size: 32px; } .section-404 .section-body h4 { font-size: 24px; padding: 0; margin: 0 0 40px; } } /* Mobile */ @media (max-width: 767px) { .section-404 { padding: 140px 0; } .section-404 .section-image img { width: 60%; height: auto; } } /* Mobile */ @media (max-width: 413px) { .section-404 { padding: 120px 0; } .section-404 .section-body h2 { font-size: 24px; } .section-404 .section-body h4 { font-size: 18px; } } /* ------------------------------------------------------------ *\ Section SEO \* ------------------------------------------------------------ */ .section-seo { text-align: center; margin-bottom: 46px; } .section-seo .section-body, .section-seo .section-actions { background-color: #f2f2f2; } .section-seo .section-body { padding: 40px 20px 20px; position: relative; } .section-seo .section-body p { font-weight: 400; font-size: 14px; color: #000; opacity: .8; line-height: 1.6; margin-bottom: 10px; letter-spacing: 0.005em; } .section-seo .expandable { display: none; } .section-seo .section-actions { padding-bottom: 50px; } .section-seo .section-actions .btn { margin: 0; display: inline-block; font-weight: 700; font-size: 16px; text-transform: none; color: #5f6674; border: 2px solid #898e98; border-radius: 3px; padding: 5px 16px; transition: background-color .3s, border-color .3s, color .3s; } .section-seo .section-actions .btn:hover { background-color: #ff2e64 !important; border-color: #ff2e64 !important; color: #fff; } .section-seo .section-actions .btn i, .section-seo .section-actions .btn span { display: inline-block; vertical-align: middle; } .section-seo .section-actions .btn i { position: relative; top: 1px; transition: transform .3s; -webkit-transition: transform .3s; -ms-transition: transform .3s; transition: transform .3s;} .section-seo .section-actions .btn.active { box-shadow: none; } .section-seo .section-actions .btn.active i { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .section-seo .section-body .go-top { width: 56px; height: 56px; border: 3px solid #212a3e; border-radius: 50%; text-align: center; position: absolute; right: 0; bottom: 100%; margin-bottom: 50px; z-index: 99; transition: border-color .3s; } .section-seo .section-body:hover, .section-seo .section-body:focus, .section-seo .section-body:active { outline: none; } .section-seo .section-body:hover { text-decoration: none; border-color: #ff2e64; } .section-seo .section-body:hover i { color: #ff2e64; } .section-seo .section-body i { font-size: 40px; color: #212a3e; line-height: 50px; transition: color .3s; } /* ------------------------------------------------------------ *\ Slider \* ------------------------------------------------------------ */ .slider {} .slider .slides { list-style: none outside none; } /* ------------------------------------------------------------ *\ Slider Case Studies \* ------------------------------------------------------------ */ .slider-case-studies { position: relative; } .slider-case-studies .slide-image { position: relative; left: -10px; } .slider-case-studies .slide-content { padding-top: 60px; } .slider-case-studies .slide-content h6 { font-weight: 700; text-transform: uppercase; margin: 0; letter-spacing: 0.075em; color: #646a78; } .slider-case-studies .slide-content h2 { color: #fff; margin: 55px 0 50px; font-weight: 300; line-height: 1.26; padding-right: 50px; font-size: 46px; font-weight: 300; } .slider-case-studies .slide-content .btn { font-size: 18px; } .slider-case-studies .flex-control-nav { width: auto; bottom: 50%; right: -13px; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .slider-case-studies .flex-control-nav li { display: block; margin: 10px 0; } .slider-case-studies .flex-control-nav a { width: 14px; height: 14px; border-radius: 50%; box-shadow: none; background-color: #fff; opacity: .1; transition: opacity .3s; } .slider-case-studies .flex-control-nav a:hover, .slider-case-studies .flex-control-nav a.flex-active { opacity: 1; background-color: #fff; } /* Small Desktop */ @media (max-width: 1299px) { .slider-case-studies .slide-content h2 { font-size: 36px; padding: 0; } } /* Tablet Portrait */ @media (max-width: 991px) { .slider-case-studies { margin: 0 -15px; } .slider-case-studies .slide-image { left: 0; margin: 0; position: relative; } .slider-case-studies .slide-image img { width: 100%; height: auto; } .slider-case-studies .pull-right { float: none !important; } .slider-case-studies .slide-content { padding: 30px 15px; } .slider-case-studies .slide-content h2 { margin: 30px 0; } .slider-case-studies .flex-direction-nav { display: none; } } /* Mobile */ @media (max-width: 767px) { .slider-case-studies .slide-content { text-align: center; padding-bottom: 70px; } .slider-case-studies .slide-content h2 { font-weight: 300; font-size: 33px; line-height: 1.3; padding: 0 20px; margin: 0 0 20px; } .slider-case-studies .slide-content h6 { display: none; } .slider-case-studies .flex-control-nav { width: 100%; bottom: 20px; right: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .slider-case-studies .flex-control-nav li { display: inline-block; vertical-align: middle; margin: 0 5px; } } /* Mobile */ @media (max-width: 413px) { .slider-case-studies .slide-content h2 { font-size: 26px; } } /* ------------------------------------------------------------ *\ Slider Testimonials \* ------------------------------------------------------------ */ .slider-testimonials { position: relative; } .slider-testimonials blockquote { text-align: center; margin: 0 0 30px; padding: 0 40px; border: 0; } .slider-testimonials blockquote p { font-weight: 300; font-size: 28px; line-height: 1.8; margin: 0 0 23px; color: #212a3e; letter-spacing: -0.01em; } .slider-testimonials blockquote cite { font-style: normal; font-weight: 500; font-size: 18px; color: #212a3e; opacity: .5; } .slider-testimonials .flex-control-thumbs { text-align: center; font-size: 0; overflow: visible; } .slider-testimonials .flex-control-thumbs li { float: none; display: inline-block; vertical-align: middle; width: 60px; height: auto; margin: 0 15px; } .slider-testimonials .flex-control-thumbs img { width: 100%; height: auto; border-radius: 50%; opacity: .5; transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, transform .3s; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } .slider-testimonials .flex-control-thumbs li:hover img, .slider-testimonials .flex-control-thumbs li img.flex-active { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); opacity: 1; } /* Tablet Portrait */ @media (max-width: 1023px) { .slider-testimonials blockquote { padding: 0; } .slider-testimonials blockquote p { font-size: 24px; } .slider-testimonials .flex-direction-nav { display: none; } } /* Mobile */ @media (max-width: 767px) { .slider-testimonials blockquote p { font-size: 28px; line-height: 1.75; } .slider-testimonials blockquote cite span { display: block; opacity: .5; } .slider-testimonials .flex-control-thumbs li:hover img, .slider-testimonials .flex-control-thumbs li img.flex-active { box-shadow: 0 0 0 3px #d5d6d7; } } /* Mobile */ @media (max-width: 413px) { .slider-testimonials blockquote p { font-size: 24px; } .slider-testimonials .flex-control-thumbs li { margin: 0 10px; width: 50px; } } /* ------------------------------------------------------------ *\ Tab \* ------------------------------------------------------------ */ .tab { display: none; } .tab.current { display: block; } .tabs-nav li ~ li { margin-left: 37px; } /* Mobile */ @media (max-width: 767px) { .tabs-nav li ~ li .search, .tabs-nav li ~ li .filter { display: none; } } /* ------------------------------------------------------------ *\ Table \* ------------------------------------------------------------ */ .table {} /* ------------------------------------------------------------ *\ Widget \* ------------------------------------------------------------ */ .widgets { list-style: none outside none; }