From da5191b0f282f8eb4db64073405d642c67952388 Mon Sep 17 00:00:00 2001 From: umamenda Date: Mon, 23 Oct 2023 15:22:38 +0530 Subject: [PATCH 1/3] card section updated issue fixes --- blocks/showcards/showcards.css | 65 +++++++++++++++++++++++ blocks/showcards/showcards.js | 37 +++++++++++++ head.html | 3 +- scripts/dom-builder.js | 94 ++++++++++++++++++++++++++++++++++ styles/styles_2020.css | 1 + 5 files changed, 199 insertions(+), 1 deletion(-) create mode 100644 blocks/showcards/showcards.css create mode 100644 blocks/showcards/showcards.js create mode 100644 scripts/dom-builder.js create mode 100644 styles/styles_2020.css diff --git a/blocks/showcards/showcards.css b/blocks/showcards/showcards.css new file mode 100644 index 00000000..d06f2609 --- /dev/null +++ b/blocks/showcards/showcards.css @@ -0,0 +1,65 @@ +.custom-bg { + background-image: url('https://www.aldevron.com/hs-fs/hubfs/aldevron-solid-orange-background.png?width=1800&name=aldevron-solid-orange-background.png'); +} + +.lists { + display: flex; + justify-content: center; + grid-gap: 3rem; + flex-wrap: wrap; +} + +.card { + position: relative; + display: flex; + text-align: var(--custom-text-alignment, center); + flex-direction: var(--custom-direction, column); + min-width: var(--custom-min-width); + height: var(--custom-height); + height: var(--custom-min-height); + width: var(--custom-width, 300px); + color: var(--custom-color); + word-wrap: break-word; + background-color: var(--custom-bg, #fff); + background-clip: border-box; + border: var(--custom-width) solid var(--custom-border-color); + border-radius: var(--custom-border-radius, 3px); + transition-property: var(--custom-ts-property, transform); + transition-timing-function: var(--custom-ts-timing, cubic-bezier(0.4, 0, 0.2, 1)); + transition-duration: var(--custom-ts-duration, 150ms); + padding: 1rem 0.25rem; +} + +.module-title{ + text-transform: capitalize; +} + +.card-header, .card-body, .card-footer { + padding: var(--custom-width, 0.75rem 0.5rem); +} + +.card .card-img img { + max-width: 120px; + width: 100%; + max-height: 130px; + height: 100%; +} + +.card .card-header { + background-color: var(--custom-header-color, #fff); +} + +.card .card-header .card-title { + font-size: var(--text-size, 1.5rem); + line-height: var(--text-line-height, 1.5rem); +} + +.card .card-body { + flex: 1 1 auto; + background-color: var(--custom-body-color, #fff); +} + +.card .card-footer { + background-color: var(--custom-footer-color, #fff); +} + diff --git a/blocks/showcards/showcards.js b/blocks/showcards/showcards.js new file mode 100644 index 00000000..d476ad9a --- /dev/null +++ b/blocks/showcards/showcards.js @@ -0,0 +1,37 @@ +import { + div, h2, h3, li, p, ul, +} from '../../scripts/dom-builder.js'; + +export default function decorate(block) { + const checkServiceSection = block.classList.contains('data-block-heading-services'); + block.className += checkServiceSection ? ' module mmg-rich-columns padding-all wide-section center shift-top style-icons' + : 'module mmg-rich-columns padding-all custom-bg wide-section center style-icons'; + const clondBlock = block.cloneNode(true); + const dataHeading = block.className.split(' ').filter((y) => y.includes('data-block-heading-')); + const wrapper = div({ class: 'outer' }); + if (dataHeading.length > 0) wrapper.append(h2({ class: 'module-title align-center' }, dataHeading[0].replace('data-block-heading-', ''))); + const lists = ul({ class: 'content flex cols3' }); + [...clondBlock.children].forEach((element) => { + const picElement = element.querySelector('picture'); + picElement.className = 'media img'; + const ancButton = element.querySelector('p.button-container'); + const showcaseBanner = li({ class: 'col with-cta' }, picElement); + const contentEle = div({ class: 'card-body' }); + if (ancButton.previousElementSibling && ancButton.previousElementSibling.previousElementSibling && ancButton.previousElementSibling.previousElementSibling.textContent !== '') { + const title = h3({ class: 'title' }, ancButton.previousElementSibling.previousElementSibling.textContent); + contentEle.append(title); + } + if (ancButton.previousElementSibling && ancButton.previousElementSibling.textContent !== '') { + const description = p({ class: 'description' }, ancButton.previousElementSibling.textContent); + contentEle.append(description); + } + showcaseBanner.append(contentEle); + if (ancButton.children.length > 0) { + const cardFooter = div({ class: 'actions' }, ancButton.children[0]); + showcaseBanner.append(cardFooter); + } + lists.append(showcaseBanner); + }); + wrapper.append(lists); + block.replaceChildren(wrapper); +} diff --git a/head.html b/head.html index fe735228..8ee4cb8c 100644 --- a/head.html +++ b/head.html @@ -6,4 +6,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/scripts/dom-builder.js b/scripts/dom-builder.js new file mode 100644 index 00000000..b9b79023 --- /dev/null +++ b/scripts/dom-builder.js @@ -0,0 +1,94 @@ +/* eslint-disable no-param-reassign */ + +/** + * Example Usage: + * + * domEl('main', + * div({ class: 'card' }, + * a({ href: item.path }, + * div({ class: 'card-thumb' }, + * createOptimizedPicture(item.image, item.title, 'lazy', [{ width: '800' }]), + * ), + * div({ class: 'card-caption' }, + * h3(item.title), + * p({ class: 'card-description' }, item.description), + * p({ class: 'button-container' }, + * a({ href: item.path, 'aria-label': 'Read More', class: 'button primary' }, 'Read More'), + * ), + * ), + * ), + * ) + */ + +/** + * Helper for more concisely generating DOM Elements with attributes and children + * @param {string} tag HTML tag of the desired element + * @param {[Object?, ...Element]} items: First item can optionally be an object of attributes, + * everything else is a child element + * @returns {Element} The constructred DOM Element + */ +export function domEl(tag, ...items) { + const element = document.createElement(tag); + + if (!items || items.length === 0) return element; + + if (!(items[0] instanceof Element || items[0] instanceof HTMLElement) && typeof items[0] === 'object') { + const [attributes, ...rest] = items; + items = rest; + + Object.entries(attributes).forEach(([key, value]) => { + if (!key.startsWith('on')) { + element.setAttribute(key, Array.isArray(value) ? value.join(' ') : value); + } else { + element.addEventListener(key.substring(2).toLowerCase(), value); + } + }); + } + + items.forEach((item) => { + item = item instanceof Element || item instanceof HTMLElement + ? item + : document.createTextNode(item); + element.appendChild(item); + }); + + return element; + } + + /* + More short hand functions can be added for very common DOM elements below. + domEl function from above can be used for one off DOM element occurrences. + */ + export function div(...items) { return domEl('div', ...items); } + export function p(...items) { return domEl('p', ...items); } + export function a(...items) { return domEl('a', ...items); } + export function h1(...items) { return domEl('h1', ...items); } + export function h2(...items) { return domEl('h2', ...items); } + export function h3(...items) { return domEl('h3', ...items); } + export function h4(...items) { return domEl('h4', ...items); } + export function h5(...items) { return domEl('h5', ...items); } + export function h6(...items) { return domEl('h6', ...items); } + export function ul(...items) { return domEl('ul', ...items); } + export function ol(...items) { return domEl('ol', ...items); } + export function li(...items) { return domEl('li', ...items); } + export function i(...items) { return domEl('i', ...items); } + export function img(...items) { return domEl('img', ...items); } + export function span(...items) { return domEl('span', ...items); } + export function form(...items) { return domEl('form', ...items); } + export function input(...items) { return domEl('input', ...items); } + export function label(...items) { return domEl('label', ...items); } + export function button(...items) { return domEl('button', ...items); } + export function iframe(...items) { return domEl('iframe', ...items); } + export function nav(...items) { return domEl('nav', ...items); } + export function fieldset(...items) { return domEl('fieldset', ...items); } + export function article(...items) { return domEl('article', ...items); } + export function strong(...items) { return domEl('strong', ...items); } + export function select(...items) { return domEl('select', ...items); } + export function option(...items) { return domEl('option', ...items); } + export function table(...items) { return domEl('table', ...items); } + export function tbody(...items) { return domEl('tbody', ...items); } + export function thead(...items) { return domEl('thead', ...items); } + export function tr(...items) { return domEl('tr', ...items); } + export function td(...items) { return domEl('td', ...items); } + export function th(...items) { return domEl('th', ...items); } + export function time(...items) { return domEl('time', ...items); } \ No newline at end of file diff --git a/styles/styles_2020.css b/styles/styles_2020.css new file mode 100644 index 00000000..a75c7660 --- /dev/null +++ b/styles/styles_2020.css @@ -0,0 +1 @@ +.module.custom-bg{background:50% 50% no-repeat;background-size:cover}.module.wide-section .outer{width:980px}.center,.center>.outer,.module.center,.outer.center{text-align:center}.wide-section{padding-bottom:80px;padding-top:80px}.wide-section.padding-half{padding-bottom:48px;padding-top:48px}.wide-section.padding-btm{padding-top:0!important}.wide-section.padding-top{padding-bottom:0!important}.wide-section.padding-none{padding:0!important}.flex,ul.flex-list,ul.ulflex{display:flex;flex-wrap:wrap}.flex .col{box-sizing:border-box;margin-top:4%}.flex.cols2>.col,ul.flex-list.cols2>li,ul.ulflex.cols2>li{margin-left:4%;width:48%}.flex.cols2>.col:nth-child(odd),ul.flex-list.cols2>li:nth-child(odd),ul.ulflex.cols2>li:nth-child(odd){margin-left:0}.flex.cols3>.col,ul.flex-list.cols3>li,ul.ulflex.cols3>li{margin-left:3.5%;width:31%}.flex.cols3>.col:nth-child(3n+1),ul.flex-list.cols3>li:nth-child(3n+1),ul.ulflex.cols3>li:nth-child(3n+1){margin-left:0}.flex.cols4>.col,ul.ulflex.cols4>li{margin-left:2.66%;width:23%}.flex.cols4>.col:nth-child(4n+1),ul.ulflex.cols4>li:nth-child(4n+1){margin-left:0}.flex.cols2>.col:nth-child(2),.flex.cols3>.col:nth-child(2),.flex.cols3>.col:nth-child(3),.flex.cols4>.col:nth-child(2),.flex.cols4>.col:nth-child(3),.flex.cols4>.col:nth-child(4),.flex>.col:first-child{margin-top:0}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.mmg-rich-columns .col .title{padding-top:0}.mmg-rich-columns.custom-bg h2.module-title,.mmg-rich-columns.style-icons h2.module-title{font-size:37px;line-height:1.2;padding-bottom:1em}.mmg-rich-columns.custom-bg .module-title{color:#fff}.mmg-rich-columns.custom-bg .col{background:#fff;padding:30px 20px;}.mmg-rich-columns.style-icons .col{font-size:14px;padding-bottom:90px;position:relative;}.mmg-rich-columns.style-icons .title{color:#ec8f2d;font-size:17px}.mmg-rich-columns.style-icons.custom-bg .title{color:#000}.mmg-rich-columns.style-icons .media{padding-bottom:30px;}.mmg-rich-columns.style-icons .media img,.mmg-rich-columns.style-icons .media svg{height:auto;width:120px;}.mmg-rich-columns.style-icons .actions{bottom:30px;left:0;padding:0;position:absolute;width:100%}.mmg-rich-columns.style-icons .button{background:#fff;border:2px solid #000;color:#000}.mmg-rich-columns.style-icons .button:hover{background:#000;color:#fff}.mmg-rich-columns .recent-posts .post{padding-bottom:30px}.mmg-rich-columns .recent-posts .post:after{clear:both;content:"";display:block;font-size:0}.mmg-rich-columns .recent-posts .image{background:50% 50% no-repeat;background-size:cover;display:block;float:left;position:relative;width:40%}.mmg-rich-columns .recent-posts .text{font-size:14px;padding-left:44%}.mmg-rich-columns .recent-posts .image:after{content:"";display:block;padding-bottom:56%}.mmg-rich-columns .recent-posts .post .entry-title{color:#ec8f2d;font-size:14px;padding:0}.mmg-rich-columns .recent-posts .post .entry-title a{color:inherit;text-decoration:none}.mmg-rich-columns .recent-posts .post .entry-title a:hover{color:#000}.mmg-rich-columns .recent-posts .post p{padding:.5em 0 0}.mmg-rich-columns .recent-posts .post .tags a{color:#ec8f2d}.mmg-rich-columns .recent-posts .post:first-child .image{display:block;float:none;width:100%}.mmg-rich-columns .recent-posts .post:first-child .text{font-size:1em;padding-left:0}.mmg-rich-columns .recent-posts .post:first-child .entry-title{font-size:18px;padding-top:20px}.module.shift-top{padding-top:0!important}.module.shift-top .outer{background-color:#fff;margin-top:-40px;padding-left:20px;padding-right:20px;padding-top:40px}.module.split-bg{color:#fff;position:relative}.module.split-bg .outer{position:relative;text-align:right;z-index:3}.module.split-bg:before{background:url(//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/about-pattern.png) 0 50% no-repeat;background-size:auto 100%;content:"";height:100%;position:absolute;right:0;top:0;width:50%;z-index:2}.module.split-bg .content{display:inline-block;text-align:left;width:50%;width:calc(50% - 140px)}.module.split-bg .col{background:transparent!important;padding:0}.module.split-bg .col .title{color:inherit!important}.module.split-bg .col .button{background:transparent;border:1px solid #fff;color:#fff}.module.split-bg .col .button:hover{background-color:#fff;color:#ec8f2d}.module.custom-bg.split-bg:after{background-position:0 50%;background-repeat:no-repeat;background-size:cover;content:"";height:100%;left:0;position:absolute;top:0;width:50%;width:calc(50% + 200px);z-index:1}.mmg-documents .module-title+.content{padding-top:1em}.mmg-documents .col{text-align:center}.mmg-documents .media{padding-bottom:129%;position:relative;width:100%}.mmg-documents .ratio-1 .media{padding-bottom:100%}.mmg-documents .ratio-10-15 .media{padding-bottom:150%}.mmg-documents .col .media img{height:100%;left:0;object-fit:cover;object-position:50% 0;position:absolute;top:0;width:100%}.mmg-documents .col .title{border:0!important;margin:0!important;padding:0!important;text-decoration:none}.mmg-documents .col .text{padding:15px 0}.blog.anniversary-25 .listing-hero-mobitext{display:none}.blog.anniversary-25 .listing-hero{background-color:#1f2f68;overflow:hidden;position:relative}.blog.anniversary-25 .listing-hero #bgvideo{height:100%;height:calc(100% + 2px);left:0;object-fit:cover;position:absolute;top:0;width:100%;z-index:1}.blog.anniversary-25 .listing-hero .outer{position:relative;z-index:2}.blog.anniversary-25 .listing-hero .logo-25{float:left;margin-top:30px;width:150px}.blog.anniversary-25 .listing-hero .figure{background:url(//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/raw_assets/public/Coded%20files/Custom/page/img/hero-hexagon.svg) no-repeat 50% 100%;background-size:100% auto;box-sizing:border-box;float:right;width:78%}.blog.anniversary-25 .listing-hero .figure .text{color:#fff;font-weight:700;line-height:1.8;padding:50px 17% 270px}.blog.anniversary-25 .listing-hero h1{color:#fff;font-size:40px;padding-bottom:15px}.blog.anniversary-25 .post-listing{grid-column-gap:55px;grid-row-gap:70px;column-gap:55px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));row-gap:70px}.blog.anniversary-25 .post-listing:after{content:none}.blog.anniversary-25 .post-listing .post-item{color:inherit;display:block;font-size:14px;line-height:1.6;padding:0;text-decoration:none}.blog.anniversary-25 .post-listing .post-item:hover{text-decoration:none}.blog.anniversary-25 .post-listing .post-image{display:block;float:none;max-width:none;overflow:hidden;padding-bottom:56%;position:relative;width:100%}.blog.anniversary-25 .post-listing .post-image img{height:100%;left:0;object-fit:cover;position:absolute;top:0;transition:all .3s;width:100%}.blog.anniversary-25 .post-listing .post-item:hover .post-image img{transform:scale(1.1)}.blog.anniversary-25 .post-listing .post-title{border:none!important;font-size:18px;line-height:1.4;margin:0!important;padding:18px 0!important}.blog.anniversary-25 .post-listing .post-body p:first-child{padding-top:0}.blog.anniversary-25 .post-listing .post-body h4{display:none}.blog.anniversary-25 .post-listing .post-item .more{color:#f49600;display:inline-block;font-size:16px;font-weight:700}.blog.anniversary-25 .post-listing .post-item:hover .more{text-decoration:underline}.blog.anniversary-25 #sidebar{position:sticky;top:120px;width:24%}.blog.anniversary-25 #sidebar .logo{display:block;margin:0 auto 50px;max-width:150px;width:70%}.blog.anniversary-25 #sidebar .logo img{display:block;width:100%}.blog.anniversary-25 #sidebar .recent-posts{border:2px solid #f49600;border-radius:13px;padding:10%}.blog.anniversary-25 #sidebar h3{margin:0;padding:0 0 25px}.blog.hs-blog-post.anniversary-25 #sidebar h3{text-align:center}.blog.anniversary-25 .recent-posts a{color:#000;display:block;font-weight:700;line-height:1.5;text-decoration:none}.blog.anniversary-25 .recent-posts a:hover span{text-decoration:underline}.blog.anniversary-25 .recent-posts a+a{border-top:1px solid #e0e0e0;padding-top:20px}.blog.anniversary-25 .recent-posts a:not(:last-child){padding-bottom:20px}.blog.anniversary-25 .recent-posts a .more{color:#f49600;display:block;padding-top:.5em}.blog.anniversary-25 .post-hero .outer{font-size:0;position:relative}.blog.anniversary-25 .post-hero img{display:block;height:auto;width:100%}.blog.anniversary-25 #main h1,.blog.anniversary-25 #main h2,.blog.anniversary-25 #main h3{border:none;line-height:1.4;padding-left:0}.blog.anniversary-25 .full-post .post-meta{padding:0 0 30px}.blog.anniversary-25 #main .full-post h1.post-title{font-size:40px}.blog.anniversary-25 #main .full-post h2{color:#e46b29;font-size:28px;font-weight:300}.blog.anniversary-25 .post-form{background:#f3f3f3;border-radius:13px;box-sizing:border-box;display:block;padding:50px}.blog.anniversary-25 .post-form h3{border:none;margin:0;padding:0 0 1em}.blog.anniversary-25 .post-popular .post-listing{grid-column-gap:50px;grid-row-gap:50px;column-gap:50px;row-gap:50px}.blog.anniversary-25 .post-popular h2.module-title{font-size:14px;font-weight:700;padding-bottom:30px;text-transform:uppercase}.blog.anniversary-25 .blog-bottom{background:url(https://www.aldevron.com/hubfs/aldevron_template/anniversary-btm-bg.webp) 50% 50% no-repeat;background-size:cover}.blog.anniversary-25 .blog-bottom h3{color:#fff;font-size:44px;font-weight:700;max-width:664px;text-transform:uppercase}.linkedin-bottom a{background:#35578b;border-radius:10px;color:#fff;display:block;overflow:hidden;padding:90px calc(9% + 160px) 90px calc(9% + 100px);position:relative}.linkedin-bottom a,.linkedin-bottom a:hover{text-decoration:none}.linkedin-bottom a:before{background:url(https://www.aldevron.com/hubfs/aldevron_template/blog-linkedin-bg.webp) no-repeat 50% 50%;background-size:cover;content:"";height:100%;left:0;position:absolute;top:0;transition:all .3s;width:100%;z-index:0}.linkedin-bottom a:hover:before{transform:scale(1.1)}.linkedin-bottom a img{height:70px;left:9%;margin-top:-35px;position:absolute;top:50%;width:auto;z-index:1}.linkedin-bottom a .text{font-family:Brown-Ald,Helvetica,Arial,sans-serif;font-size:40px;font-weight:700;letter-spacing:-.02em;position:relative;z-index:3}.linkedin-bottom a .btn{border:1px solid #fff;border-radius:4px;font-size:20px;line-height:46px;margin-top:-24px;padding:0 30px;position:absolute;right:9%;text-transform:uppercase;top:50%;transition:all .3s;z-index:2}.linkedin-bottom a:hover .btn{background:#f49600;border-color:#f49600}.mmg-timeline .swiper-timeline{color:#dbdbdb;font-size:40px;font-weight:700;padding-bottom:20px}.mmg-timeline .swiper-timeline:before{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0));content:"";height:100%;left:0;position:absolute;top:0;width:50px;z-index:10}.mmg-timeline .swiper-timeline:after{background:linear-gradient(270deg,#fff,hsla(0,0%,100%,0));content:"";height:100%;position:absolute;right:0;top:0;width:50px;z-index:10}.mmg-timeline .swiper-timeline .swiper-slide{cursor:pointer;text-align:center;width:160px}.mmg-timeline .swiper-timeline .swiper-slide-active{color:#f49600}.mmg-timeline .content{position:relative;text-align:center}.mmg-timeline .swiper-content{margin:0 auto;text-align:left;width:600px}.mmg-timeline .swiper-content .swiper-wrapper{align-items:center}.mmg-timeline .swiper-button-prev{left:0}.mmg-timeline .swiper-button-next{right:0}.mmg-timeline .swiper-button-next,.mmg-timeline .swiper-button-prev{border:2px solid #f49600;border-radius:50%;color:#f49600;cursor:pointer;height:50px;text-align:center;transition:all .3s;user-select:none;width:50px}.mmg-timeline .swiper-button-next:hover,.mmg-timeline .swiper-button-prev:hover{background-color:#f49600;color:#fff}.mmg-timeline .swiper-button-next:after,.mmg-timeline .swiper-button-prev:after{font-size:30px;line-height:50px}@media (max-width:1024px){.split-bg.wide-section{padding-bottom:20px;padding-top:20px}.module.wide-section .outer{padding-left:20px;padding-right:20px;width:100%}.module.shift-top .outer{margin-top:0;padding-top:80px}.module.split-bg .content{line-height:1.3;width:53%;width:calc(53% - 130px)}.module.split-bg .col .title{padding-bottom:0}.module.split-bg .col .button{font-size:16px}}@media (max-width:860px){.mmg-rich-columns.style-icons .flex.cols4 .col{margin-bottom:4%;margin-left:4%!important;width:48%}.mmg-rich-columns.style-icons .flex.cols4 .col:nth-child(odd){margin-left:0!important}.blog.anniversary-25 .listing-hero-mobitext{background:#1f2f68;color:#fff;display:block;padding:25px 20px}.blog.anniversary-25 .listing-hero .desktop-text{display:none}.blog.anniversary-25 .listing-hero .outer{padding:0}.blog.anniversary-25 .listing-hero .logo-25{float:none;left:50%;margin-left:-75px;position:absolute;top:0;width:150px}.blog.anniversary-25 .listing-hero .figure{background-size:118% auto;box-sizing:border-box;float:none;padding:220px 20px 30%;text-align:center;width:100%}.blog.anniversary-25 .listing-hero .figure .text{margin:0 auto;max-width:340px;padding:0;text-align:center}.blog.anniversary-25 #sidebar .recent-posts,.blog.anniversary-25 .post-form{padding:25px 30px}.blog.anniversary-25 #sidebar .logo{margin-bottom:30px}.blog.anniversary-25 .post-listing,.blog.anniversary-25 .post-popular .post-listing{grid-column-gap:40px;grid-row-gap:40px;column-gap:40px;row-gap:40px}.mmg-timeline .content{padding:0 80px}.mmg-timeline .swiper-content{width:100%}.linkedin-bottom a{padding:60px 180px 60px 120px}.linkedin-bottom a img{left:30px}.linkedin-bottom a .btn{right:30px}}@media (max-width:767px){.wide-section.padding-half{padding-bottom:36px;padding-top:36px}.wide-section{padding-bottom:60px}.module.shift-top .outer,.wide-section{padding-top:60px}.mmg-rich-columns.style-standard .flex{display:block}.mmg-rich-columns.style-standard .flex .col{margin-left:0!important;margin-right:0!important;margin-top:30px!important;width:100%!important}.mmg-rich-columns.style-standard .flex .col:first-child{margin-top:0!important}.split-bg.wide-section{padding:0}.module.split-bg:before{content:none}.module.split-bg .outer{background:url(//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/about-pattern.png) 100% 50% no-repeat;background-size:auto 130%}.module.custom-bg.split-bg:after{display:block;height:auto;padding-bottom:45%;position:static;width:100%}.module.split-bg .content{padding:30px 0;width:100%}.blog.anniversary-25 .blog-bottom h3{font-size:30px}.mmg-timeline .swiper-timeline .swiper-slide{width:150px}.mmg-timeline .content{padding:0 0 80px}.mmg-timeline .swiper-content .swiper-slide{box-sizing:border-box;padding:0 10px}.mmg-timeline .swiper-button-next{bottom:0;left:50%;margin:0 0 0 10px;right:auto;top:auto}.mmg-timeline .swiper-button-prev{bottom:0;left:auto;margin:0 10px 0 0;right:50%;top:auto}.linkedin-bottom a{padding:45px 35px}.linkedin-bottom a img{display:inline-block;left:auto;margin:0;position:relative;top:auto}.linkedin-bottom a .text{display:block;padding:20px 0 35px}.linkedin-bottom a .btn{display:inline-block;margin:0;position:relative;right:auto;top:auto}}@media (max-width:570px){.mmg-rich-columns.style-icons .col,.mmg-rich-columns.style-icons .flex.cols4 .col{margin-bottom:30px;margin-left:0!important;width:100%!important}.mmg-rich-columns.style-icons .col:last-child{margin-bottom:0!important}}@media (max-width:479px){.mmg-rich-columns .recent-posts .image{float:none;margin:0;width:100%}.mmg-rich-columns .recent-posts .text{padding-left:0}.mmg-rich-columns .recent-posts .post .entry-title{font-size:18px;padding-top:20px}} \ No newline at end of file From 2364bc22cc734e0ccafbce980c54291b89a5d093 Mon Sep 17 00:00:00 2001 From: umamenda Date: Mon, 23 Oct 2023 16:16:31 +0530 Subject: [PATCH 2/3] ESlint issue fixed for dom and card js pages --- blocks/showcards/showcards.js | 60 ++++++++--------- scripts/dom-builder.js | 118 ++++++++++++++++------------------ 2 files changed, 86 insertions(+), 92 deletions(-) diff --git a/blocks/showcards/showcards.js b/blocks/showcards/showcards.js index d476ad9a..4d143966 100644 --- a/blocks/showcards/showcards.js +++ b/blocks/showcards/showcards.js @@ -3,35 +3,35 @@ import { } from '../../scripts/dom-builder.js'; export default function decorate(block) { - const checkServiceSection = block.classList.contains('data-block-heading-services'); - block.className += checkServiceSection ? ' module mmg-rich-columns padding-all wide-section center shift-top style-icons' + const checkServiceSection = block.classList.contains('data-block-heading-services'); + block.className += checkServiceSection ? ' module mmg-rich-columns padding-all wide-section center shift-top style-icons' : 'module mmg-rich-columns padding-all custom-bg wide-section center style-icons'; - const clondBlock = block.cloneNode(true); - const dataHeading = block.className.split(' ').filter((y) => y.includes('data-block-heading-')); - const wrapper = div({ class: 'outer' }); - if (dataHeading.length > 0) wrapper.append(h2({ class: 'module-title align-center' }, dataHeading[0].replace('data-block-heading-', ''))); - const lists = ul({ class: 'content flex cols3' }); - [...clondBlock.children].forEach((element) => { - const picElement = element.querySelector('picture'); - picElement.className = 'media img'; - const ancButton = element.querySelector('p.button-container'); - const showcaseBanner = li({ class: 'col with-cta' }, picElement); - const contentEle = div({ class: 'card-body' }); - if (ancButton.previousElementSibling && ancButton.previousElementSibling.previousElementSibling && ancButton.previousElementSibling.previousElementSibling.textContent !== '') { - const title = h3({ class: 'title' }, ancButton.previousElementSibling.previousElementSibling.textContent); - contentEle.append(title); - } - if (ancButton.previousElementSibling && ancButton.previousElementSibling.textContent !== '') { - const description = p({ class: 'description' }, ancButton.previousElementSibling.textContent); - contentEle.append(description); - } - showcaseBanner.append(contentEle); - if (ancButton.children.length > 0) { - const cardFooter = div({ class: 'actions' }, ancButton.children[0]); - showcaseBanner.append(cardFooter); - } - lists.append(showcaseBanner); - }); - wrapper.append(lists); - block.replaceChildren(wrapper); + const clondBlock = block.cloneNode(true); + const dataHeading = block.className.split(' ').filter((y) => y.includes('data-block-heading-')); + const wrapper = div({ class: 'outer' }); + if (dataHeading.length > 0) wrapper.append(h2({ class: 'module-title align-center' }, dataHeading[0].replace('data-block-heading-', ''))); + const lists = ul({ class: 'content flex cols3' }); + [...clondBlock.children].forEach((element) => { + const picElement = element.querySelector('picture'); + picElement.className = 'media img'; + const ancButton = element.querySelector('p.button-container'); + const showcaseBanner = li({ class: 'col with-cta' }, picElement); + const contentEle = div({ class: 'card-body' }); + if (ancButton.previousElementSibling && ancButton.previousElementSibling.previousElementSibling && ancButton.previousElementSibling.previousElementSibling.textContent !== '') { + const title = h3({ class: 'title' }, ancButton.previousElementSibling.previousElementSibling.textContent); + contentEle.append(title); + } + if (ancButton.previousElementSibling && ancButton.previousElementSibling.textContent !== '') { + const description = p({ class: 'description' }, ancButton.previousElementSibling.textContent); + contentEle.append(description); + } + showcaseBanner.append(contentEle); + if (ancButton.children.length > 0) { + const cardFooter = div({ class: 'actions' }, ancButton.children[0]); + showcaseBanner.append(cardFooter); + } + lists.append(showcaseBanner); + }); + wrapper.append(lists); + block.replaceChildren(wrapper); } diff --git a/scripts/dom-builder.js b/scripts/dom-builder.js index b9b79023..4253cef0 100644 --- a/scripts/dom-builder.js +++ b/scripts/dom-builder.js @@ -28,67 +28,61 @@ * @returns {Element} The constructred DOM Element */ export function domEl(tag, ...items) { - const element = document.createElement(tag); - - if (!items || items.length === 0) return element; - - if (!(items[0] instanceof Element || items[0] instanceof HTMLElement) && typeof items[0] === 'object') { - const [attributes, ...rest] = items; - items = rest; - - Object.entries(attributes).forEach(([key, value]) => { - if (!key.startsWith('on')) { - element.setAttribute(key, Array.isArray(value) ? value.join(' ') : value); - } else { - element.addEventListener(key.substring(2).toLowerCase(), value); - } - }); - } - - items.forEach((item) => { - item = item instanceof Element || item instanceof HTMLElement - ? item - : document.createTextNode(item); - element.appendChild(item); + const element = document.createElement(tag); + if (!items || items.length === 0) return element; + if (!(items[0] instanceof Element || items[0] instanceof HTMLElement) && typeof items[0] === 'object') { + const [attributes, ...rest] = items; + items = rest; + Object.entries(attributes).forEach(([key, value]) => { + if (!key.startsWith('on')) { + element.setAttribute(key, Array.isArray(value) ? value.join(' ') : value); + } else { + element.addEventListener(key.substring(2).toLowerCase(), value); + } }); - - return element; } - - /* - More short hand functions can be added for very common DOM elements below. - domEl function from above can be used for one off DOM element occurrences. - */ - export function div(...items) { return domEl('div', ...items); } - export function p(...items) { return domEl('p', ...items); } - export function a(...items) { return domEl('a', ...items); } - export function h1(...items) { return domEl('h1', ...items); } - export function h2(...items) { return domEl('h2', ...items); } - export function h3(...items) { return domEl('h3', ...items); } - export function h4(...items) { return domEl('h4', ...items); } - export function h5(...items) { return domEl('h5', ...items); } - export function h6(...items) { return domEl('h6', ...items); } - export function ul(...items) { return domEl('ul', ...items); } - export function ol(...items) { return domEl('ol', ...items); } - export function li(...items) { return domEl('li', ...items); } - export function i(...items) { return domEl('i', ...items); } - export function img(...items) { return domEl('img', ...items); } - export function span(...items) { return domEl('span', ...items); } - export function form(...items) { return domEl('form', ...items); } - export function input(...items) { return domEl('input', ...items); } - export function label(...items) { return domEl('label', ...items); } - export function button(...items) { return domEl('button', ...items); } - export function iframe(...items) { return domEl('iframe', ...items); } - export function nav(...items) { return domEl('nav', ...items); } - export function fieldset(...items) { return domEl('fieldset', ...items); } - export function article(...items) { return domEl('article', ...items); } - export function strong(...items) { return domEl('strong', ...items); } - export function select(...items) { return domEl('select', ...items); } - export function option(...items) { return domEl('option', ...items); } - export function table(...items) { return domEl('table', ...items); } - export function tbody(...items) { return domEl('tbody', ...items); } - export function thead(...items) { return domEl('thead', ...items); } - export function tr(...items) { return domEl('tr', ...items); } - export function td(...items) { return domEl('td', ...items); } - export function th(...items) { return domEl('th', ...items); } - export function time(...items) { return domEl('time', ...items); } \ No newline at end of file + items.forEach((item) => { + item = item instanceof Element || item instanceof HTMLElement + ? item + : document.createTextNode(item); + element.appendChild(item); + }); + return element; +} +/* + More short hand functions can be added for very common DOM elements below. + domEl function from above can be used for one off DOM element occurrences. +*/ +export function div(...items) { return domEl('div', ...items); } +export function p(...items) { return domEl('p', ...items); } +export function a(...items) { return domEl('a', ...items); } +export function h1(...items) { return domEl('h1', ...items); } +export function h2(...items) { return domEl('h2', ...items); } +export function h3(...items) { return domEl('h3', ...items); } +export function h4(...items) { return domEl('h4', ...items); } +export function h5(...items) { return domEl('h5', ...items); } +export function h6(...items) { return domEl('h6', ...items); } +export function ul(...items) { return domEl('ul', ...items); } +export function ol(...items) { return domEl('ol', ...items); } +export function li(...items) { return domEl('li', ...items); } +export function i(...items) { return domEl('i', ...items); } +export function img(...items) { return domEl('img', ...items); } +export function span(...items) { return domEl('span', ...items); } +export function form(...items) { return domEl('form', ...items); } +export function input(...items) { return domEl('input', ...items); } +export function label(...items) { return domEl('label', ...items); } +export function button(...items) { return domEl('button', ...items); } +export function iframe(...items) { return domEl('iframe', ...items); } +export function nav(...items) { return domEl('nav', ...items); } +export function fieldset(...items) { return domEl('fieldset', ...items); } +export function article(...items) { return domEl('article', ...items); } +export function strong(...items) { return domEl('strong', ...items); } +export function select(...items) { return domEl('select', ...items); } +export function option(...items) { return domEl('option', ...items); } +export function table(...items) { return domEl('table', ...items); } +export function tbody(...items) { return domEl('tbody', ...items); } +export function thead(...items) { return domEl('thead', ...items); } +export function tr(...items) { return domEl('tr', ...items); } +export function td(...items) { return domEl('td', ...items); } +export function th(...items) { return domEl('th', ...items); } +export function time(...items) { return domEl('time', ...items); } From 823f0280e0c5486a973f4c5f7c96ab980383b63e Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Mon, 23 Oct 2023 17:07:32 +0530 Subject: [PATCH 3/3] fixed lint issues --- styles/styles_2020.css | 1047 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 1046 insertions(+), 1 deletion(-) diff --git a/styles/styles_2020.css b/styles/styles_2020.css index a75c7660..9f84535f 100644 --- a/styles/styles_2020.css +++ b/styles/styles_2020.css @@ -1 +1,1046 @@ -.module.custom-bg{background:50% 50% no-repeat;background-size:cover}.module.wide-section .outer{width:980px}.center,.center>.outer,.module.center,.outer.center{text-align:center}.wide-section{padding-bottom:80px;padding-top:80px}.wide-section.padding-half{padding-bottom:48px;padding-top:48px}.wide-section.padding-btm{padding-top:0!important}.wide-section.padding-top{padding-bottom:0!important}.wide-section.padding-none{padding:0!important}.flex,ul.flex-list,ul.ulflex{display:flex;flex-wrap:wrap}.flex .col{box-sizing:border-box;margin-top:4%}.flex.cols2>.col,ul.flex-list.cols2>li,ul.ulflex.cols2>li{margin-left:4%;width:48%}.flex.cols2>.col:nth-child(odd),ul.flex-list.cols2>li:nth-child(odd),ul.ulflex.cols2>li:nth-child(odd){margin-left:0}.flex.cols3>.col,ul.flex-list.cols3>li,ul.ulflex.cols3>li{margin-left:3.5%;width:31%}.flex.cols3>.col:nth-child(3n+1),ul.flex-list.cols3>li:nth-child(3n+1),ul.ulflex.cols3>li:nth-child(3n+1){margin-left:0}.flex.cols4>.col,ul.ulflex.cols4>li{margin-left:2.66%;width:23%}.flex.cols4>.col:nth-child(4n+1),ul.ulflex.cols4>li:nth-child(4n+1){margin-left:0}.flex.cols2>.col:nth-child(2),.flex.cols3>.col:nth-child(2),.flex.cols3>.col:nth-child(3),.flex.cols4>.col:nth-child(2),.flex.cols4>.col:nth-child(3),.flex.cols4>.col:nth-child(4),.flex>.col:first-child{margin-top:0}.align-left{text-align:left}.align-center{text-align:center}.align-right{text-align:right}.mmg-rich-columns .col .title{padding-top:0}.mmg-rich-columns.custom-bg h2.module-title,.mmg-rich-columns.style-icons h2.module-title{font-size:37px;line-height:1.2;padding-bottom:1em}.mmg-rich-columns.custom-bg .module-title{color:#fff}.mmg-rich-columns.custom-bg .col{background:#fff;padding:30px 20px;}.mmg-rich-columns.style-icons .col{font-size:14px;padding-bottom:90px;position:relative;}.mmg-rich-columns.style-icons .title{color:#ec8f2d;font-size:17px}.mmg-rich-columns.style-icons.custom-bg .title{color:#000}.mmg-rich-columns.style-icons .media{padding-bottom:30px;}.mmg-rich-columns.style-icons .media img,.mmg-rich-columns.style-icons .media svg{height:auto;width:120px;}.mmg-rich-columns.style-icons .actions{bottom:30px;left:0;padding:0;position:absolute;width:100%}.mmg-rich-columns.style-icons .button{background:#fff;border:2px solid #000;color:#000}.mmg-rich-columns.style-icons .button:hover{background:#000;color:#fff}.mmg-rich-columns .recent-posts .post{padding-bottom:30px}.mmg-rich-columns .recent-posts .post:after{clear:both;content:"";display:block;font-size:0}.mmg-rich-columns .recent-posts .image{background:50% 50% no-repeat;background-size:cover;display:block;float:left;position:relative;width:40%}.mmg-rich-columns .recent-posts .text{font-size:14px;padding-left:44%}.mmg-rich-columns .recent-posts .image:after{content:"";display:block;padding-bottom:56%}.mmg-rich-columns .recent-posts .post .entry-title{color:#ec8f2d;font-size:14px;padding:0}.mmg-rich-columns .recent-posts .post .entry-title a{color:inherit;text-decoration:none}.mmg-rich-columns .recent-posts .post .entry-title a:hover{color:#000}.mmg-rich-columns .recent-posts .post p{padding:.5em 0 0}.mmg-rich-columns .recent-posts .post .tags a{color:#ec8f2d}.mmg-rich-columns .recent-posts .post:first-child .image{display:block;float:none;width:100%}.mmg-rich-columns .recent-posts .post:first-child .text{font-size:1em;padding-left:0}.mmg-rich-columns .recent-posts .post:first-child .entry-title{font-size:18px;padding-top:20px}.module.shift-top{padding-top:0!important}.module.shift-top .outer{background-color:#fff;margin-top:-40px;padding-left:20px;padding-right:20px;padding-top:40px}.module.split-bg{color:#fff;position:relative}.module.split-bg .outer{position:relative;text-align:right;z-index:3}.module.split-bg:before{background:url(//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/about-pattern.png) 0 50% no-repeat;background-size:auto 100%;content:"";height:100%;position:absolute;right:0;top:0;width:50%;z-index:2}.module.split-bg .content{display:inline-block;text-align:left;width:50%;width:calc(50% - 140px)}.module.split-bg .col{background:transparent!important;padding:0}.module.split-bg .col .title{color:inherit!important}.module.split-bg .col .button{background:transparent;border:1px solid #fff;color:#fff}.module.split-bg .col .button:hover{background-color:#fff;color:#ec8f2d}.module.custom-bg.split-bg:after{background-position:0 50%;background-repeat:no-repeat;background-size:cover;content:"";height:100%;left:0;position:absolute;top:0;width:50%;width:calc(50% + 200px);z-index:1}.mmg-documents .module-title+.content{padding-top:1em}.mmg-documents .col{text-align:center}.mmg-documents .media{padding-bottom:129%;position:relative;width:100%}.mmg-documents .ratio-1 .media{padding-bottom:100%}.mmg-documents .ratio-10-15 .media{padding-bottom:150%}.mmg-documents .col .media img{height:100%;left:0;object-fit:cover;object-position:50% 0;position:absolute;top:0;width:100%}.mmg-documents .col .title{border:0!important;margin:0!important;padding:0!important;text-decoration:none}.mmg-documents .col .text{padding:15px 0}.blog.anniversary-25 .listing-hero-mobitext{display:none}.blog.anniversary-25 .listing-hero{background-color:#1f2f68;overflow:hidden;position:relative}.blog.anniversary-25 .listing-hero #bgvideo{height:100%;height:calc(100% + 2px);left:0;object-fit:cover;position:absolute;top:0;width:100%;z-index:1}.blog.anniversary-25 .listing-hero .outer{position:relative;z-index:2}.blog.anniversary-25 .listing-hero .logo-25{float:left;margin-top:30px;width:150px}.blog.anniversary-25 .listing-hero .figure{background:url(//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/raw_assets/public/Coded%20files/Custom/page/img/hero-hexagon.svg) no-repeat 50% 100%;background-size:100% auto;box-sizing:border-box;float:right;width:78%}.blog.anniversary-25 .listing-hero .figure .text{color:#fff;font-weight:700;line-height:1.8;padding:50px 17% 270px}.blog.anniversary-25 .listing-hero h1{color:#fff;font-size:40px;padding-bottom:15px}.blog.anniversary-25 .post-listing{grid-column-gap:55px;grid-row-gap:70px;column-gap:55px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));row-gap:70px}.blog.anniversary-25 .post-listing:after{content:none}.blog.anniversary-25 .post-listing .post-item{color:inherit;display:block;font-size:14px;line-height:1.6;padding:0;text-decoration:none}.blog.anniversary-25 .post-listing .post-item:hover{text-decoration:none}.blog.anniversary-25 .post-listing .post-image{display:block;float:none;max-width:none;overflow:hidden;padding-bottom:56%;position:relative;width:100%}.blog.anniversary-25 .post-listing .post-image img{height:100%;left:0;object-fit:cover;position:absolute;top:0;transition:all .3s;width:100%}.blog.anniversary-25 .post-listing .post-item:hover .post-image img{transform:scale(1.1)}.blog.anniversary-25 .post-listing .post-title{border:none!important;font-size:18px;line-height:1.4;margin:0!important;padding:18px 0!important}.blog.anniversary-25 .post-listing .post-body p:first-child{padding-top:0}.blog.anniversary-25 .post-listing .post-body h4{display:none}.blog.anniversary-25 .post-listing .post-item .more{color:#f49600;display:inline-block;font-size:16px;font-weight:700}.blog.anniversary-25 .post-listing .post-item:hover .more{text-decoration:underline}.blog.anniversary-25 #sidebar{position:sticky;top:120px;width:24%}.blog.anniversary-25 #sidebar .logo{display:block;margin:0 auto 50px;max-width:150px;width:70%}.blog.anniversary-25 #sidebar .logo img{display:block;width:100%}.blog.anniversary-25 #sidebar .recent-posts{border:2px solid #f49600;border-radius:13px;padding:10%}.blog.anniversary-25 #sidebar h3{margin:0;padding:0 0 25px}.blog.hs-blog-post.anniversary-25 #sidebar h3{text-align:center}.blog.anniversary-25 .recent-posts a{color:#000;display:block;font-weight:700;line-height:1.5;text-decoration:none}.blog.anniversary-25 .recent-posts a:hover span{text-decoration:underline}.blog.anniversary-25 .recent-posts a+a{border-top:1px solid #e0e0e0;padding-top:20px}.blog.anniversary-25 .recent-posts a:not(:last-child){padding-bottom:20px}.blog.anniversary-25 .recent-posts a .more{color:#f49600;display:block;padding-top:.5em}.blog.anniversary-25 .post-hero .outer{font-size:0;position:relative}.blog.anniversary-25 .post-hero img{display:block;height:auto;width:100%}.blog.anniversary-25 #main h1,.blog.anniversary-25 #main h2,.blog.anniversary-25 #main h3{border:none;line-height:1.4;padding-left:0}.blog.anniversary-25 .full-post .post-meta{padding:0 0 30px}.blog.anniversary-25 #main .full-post h1.post-title{font-size:40px}.blog.anniversary-25 #main .full-post h2{color:#e46b29;font-size:28px;font-weight:300}.blog.anniversary-25 .post-form{background:#f3f3f3;border-radius:13px;box-sizing:border-box;display:block;padding:50px}.blog.anniversary-25 .post-form h3{border:none;margin:0;padding:0 0 1em}.blog.anniversary-25 .post-popular .post-listing{grid-column-gap:50px;grid-row-gap:50px;column-gap:50px;row-gap:50px}.blog.anniversary-25 .post-popular h2.module-title{font-size:14px;font-weight:700;padding-bottom:30px;text-transform:uppercase}.blog.anniversary-25 .blog-bottom{background:url(https://www.aldevron.com/hubfs/aldevron_template/anniversary-btm-bg.webp) 50% 50% no-repeat;background-size:cover}.blog.anniversary-25 .blog-bottom h3{color:#fff;font-size:44px;font-weight:700;max-width:664px;text-transform:uppercase}.linkedin-bottom a{background:#35578b;border-radius:10px;color:#fff;display:block;overflow:hidden;padding:90px calc(9% + 160px) 90px calc(9% + 100px);position:relative}.linkedin-bottom a,.linkedin-bottom a:hover{text-decoration:none}.linkedin-bottom a:before{background:url(https://www.aldevron.com/hubfs/aldevron_template/blog-linkedin-bg.webp) no-repeat 50% 50%;background-size:cover;content:"";height:100%;left:0;position:absolute;top:0;transition:all .3s;width:100%;z-index:0}.linkedin-bottom a:hover:before{transform:scale(1.1)}.linkedin-bottom a img{height:70px;left:9%;margin-top:-35px;position:absolute;top:50%;width:auto;z-index:1}.linkedin-bottom a .text{font-family:Brown-Ald,Helvetica,Arial,sans-serif;font-size:40px;font-weight:700;letter-spacing:-.02em;position:relative;z-index:3}.linkedin-bottom a .btn{border:1px solid #fff;border-radius:4px;font-size:20px;line-height:46px;margin-top:-24px;padding:0 30px;position:absolute;right:9%;text-transform:uppercase;top:50%;transition:all .3s;z-index:2}.linkedin-bottom a:hover .btn{background:#f49600;border-color:#f49600}.mmg-timeline .swiper-timeline{color:#dbdbdb;font-size:40px;font-weight:700;padding-bottom:20px}.mmg-timeline .swiper-timeline:before{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0));content:"";height:100%;left:0;position:absolute;top:0;width:50px;z-index:10}.mmg-timeline .swiper-timeline:after{background:linear-gradient(270deg,#fff,hsla(0,0%,100%,0));content:"";height:100%;position:absolute;right:0;top:0;width:50px;z-index:10}.mmg-timeline .swiper-timeline .swiper-slide{cursor:pointer;text-align:center;width:160px}.mmg-timeline .swiper-timeline .swiper-slide-active{color:#f49600}.mmg-timeline .content{position:relative;text-align:center}.mmg-timeline .swiper-content{margin:0 auto;text-align:left;width:600px}.mmg-timeline .swiper-content .swiper-wrapper{align-items:center}.mmg-timeline .swiper-button-prev{left:0}.mmg-timeline .swiper-button-next{right:0}.mmg-timeline .swiper-button-next,.mmg-timeline .swiper-button-prev{border:2px solid #f49600;border-radius:50%;color:#f49600;cursor:pointer;height:50px;text-align:center;transition:all .3s;user-select:none;width:50px}.mmg-timeline .swiper-button-next:hover,.mmg-timeline .swiper-button-prev:hover{background-color:#f49600;color:#fff}.mmg-timeline .swiper-button-next:after,.mmg-timeline .swiper-button-prev:after{font-size:30px;line-height:50px}@media (max-width:1024px){.split-bg.wide-section{padding-bottom:20px;padding-top:20px}.module.wide-section .outer{padding-left:20px;padding-right:20px;width:100%}.module.shift-top .outer{margin-top:0;padding-top:80px}.module.split-bg .content{line-height:1.3;width:53%;width:calc(53% - 130px)}.module.split-bg .col .title{padding-bottom:0}.module.split-bg .col .button{font-size:16px}}@media (max-width:860px){.mmg-rich-columns.style-icons .flex.cols4 .col{margin-bottom:4%;margin-left:4%!important;width:48%}.mmg-rich-columns.style-icons .flex.cols4 .col:nth-child(odd){margin-left:0!important}.blog.anniversary-25 .listing-hero-mobitext{background:#1f2f68;color:#fff;display:block;padding:25px 20px}.blog.anniversary-25 .listing-hero .desktop-text{display:none}.blog.anniversary-25 .listing-hero .outer{padding:0}.blog.anniversary-25 .listing-hero .logo-25{float:none;left:50%;margin-left:-75px;position:absolute;top:0;width:150px}.blog.anniversary-25 .listing-hero .figure{background-size:118% auto;box-sizing:border-box;float:none;padding:220px 20px 30%;text-align:center;width:100%}.blog.anniversary-25 .listing-hero .figure .text{margin:0 auto;max-width:340px;padding:0;text-align:center}.blog.anniversary-25 #sidebar .recent-posts,.blog.anniversary-25 .post-form{padding:25px 30px}.blog.anniversary-25 #sidebar .logo{margin-bottom:30px}.blog.anniversary-25 .post-listing,.blog.anniversary-25 .post-popular .post-listing{grid-column-gap:40px;grid-row-gap:40px;column-gap:40px;row-gap:40px}.mmg-timeline .content{padding:0 80px}.mmg-timeline .swiper-content{width:100%}.linkedin-bottom a{padding:60px 180px 60px 120px}.linkedin-bottom a img{left:30px}.linkedin-bottom a .btn{right:30px}}@media (max-width:767px){.wide-section.padding-half{padding-bottom:36px;padding-top:36px}.wide-section{padding-bottom:60px}.module.shift-top .outer,.wide-section{padding-top:60px}.mmg-rich-columns.style-standard .flex{display:block}.mmg-rich-columns.style-standard .flex .col{margin-left:0!important;margin-right:0!important;margin-top:30px!important;width:100%!important}.mmg-rich-columns.style-standard .flex .col:first-child{margin-top:0!important}.split-bg.wide-section{padding:0}.module.split-bg:before{content:none}.module.split-bg .outer{background:url(//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/about-pattern.png) 100% 50% no-repeat;background-size:auto 130%}.module.custom-bg.split-bg:after{display:block;height:auto;padding-bottom:45%;position:static;width:100%}.module.split-bg .content{padding:30px 0;width:100%}.blog.anniversary-25 .blog-bottom h3{font-size:30px}.mmg-timeline .swiper-timeline .swiper-slide{width:150px}.mmg-timeline .content{padding:0 0 80px}.mmg-timeline .swiper-content .swiper-slide{box-sizing:border-box;padding:0 10px}.mmg-timeline .swiper-button-next{bottom:0;left:50%;margin:0 0 0 10px;right:auto;top:auto}.mmg-timeline .swiper-button-prev{bottom:0;left:auto;margin:0 10px 0 0;right:50%;top:auto}.linkedin-bottom a{padding:45px 35px}.linkedin-bottom a img{display:inline-block;left:auto;margin:0;position:relative;top:auto}.linkedin-bottom a .text{display:block;padding:20px 0 35px}.linkedin-bottom a .btn{display:inline-block;margin:0;position:relative;right:auto;top:auto}}@media (max-width:570px){.mmg-rich-columns.style-icons .col,.mmg-rich-columns.style-icons .flex.cols4 .col{margin-bottom:30px;margin-left:0!important;width:100%!important}.mmg-rich-columns.style-icons .col:last-child{margin-bottom:0!important}}@media (max-width:479px){.mmg-rich-columns .recent-posts .image{float:none;margin:0;width:100%}.mmg-rich-columns .recent-posts .text{padding-left:0}.mmg-rich-columns .recent-posts .post .entry-title{font-size:18px;padding-top:20px}} \ No newline at end of file +.module.custom-bg { + background: 50% 50% no-repeat; + background-size: cover +} + +.module.wide-section .outer { + width: 980px +} + +.center, +.center>.outer, +.module.center, +.outer.center { + text-align: center +} + +.wide-section { + padding-bottom: 80px; + padding-top: 80px +} + +.wide-section.padding-half { + padding-bottom: 48px; + padding-top: 48px +} + +.wide-section.padding-btm { + padding-top: 0 !important +} + +.wide-section.padding-top { + padding-bottom: 0 !important +} + +.wide-section.padding-none { + padding: 0 !important +} + +.flex, +ul.flex-list, +ul.ulflex { + display: flex; + flex-wrap: wrap +} + +.flex .col { + box-sizing: border-box; + margin-top: 4% +} + +.flex.cols2>.col, +ul.flex-list.cols2>li, +ul.ulflex.cols2>li { + margin-left: 4%; + width: 48% +} + +.flex.cols2>.col:nth-child(odd), +ul.flex-list.cols2>li:nth-child(odd), +ul.ulflex.cols2>li:nth-child(odd) { + margin-left: 0 +} + +.flex.cols3>.col, +ul.flex-list.cols3>li, +ul.ulflex.cols3>li { + margin-left: 3.5%; + width: 31% +} + +.flex.cols3>.col:nth-child(3n+1), +ul.flex-list.cols3>li:nth-child(3n+1), +ul.ulflex.cols3>li:nth-child(3n+1) { + margin-left: 0 +} + +.flex.cols4>.col, +ul.ulflex.cols4>li { + margin-left: 2.66%; + width: 23% +} + +.flex.cols4>.col:nth-child(4n+1), +ul.ulflex.cols4>li:nth-child(4n+1) { + margin-left: 0 +} + +.flex.cols2>.col:nth-child(2), +.flex.cols3>.col:nth-child(2), +.flex.cols3>.col:nth-child(3), +.flex.cols4>.col:nth-child(2), +.flex.cols4>.col:nth-child(3), +.flex.cols4>.col:nth-child(4), +.flex>.col:first-child { + margin-top: 0 +} + +.align-left { + text-align: left +} + +.align-center { + text-align: center +} + +.align-right { + text-align: right +} + +.mmg-rich-columns .col .title { + padding-top: 0 +} + +.mmg-rich-columns.custom-bg h2.module-title, +.mmg-rich-columns.style-icons h2.module-title { + font-size: 37px; + line-height: 1.2; + padding-bottom: 1em +} + +.mmg-rich-columns.custom-bg .module-title { + color: #fff +} + +.mmg-rich-columns.custom-bg .col { + background: #fff; + padding: 30px 20px; +} + +.mmg-rich-columns.style-icons .col { + font-size: 14px; + padding-bottom: 90px; + position: relative; +} + +.mmg-rich-columns.style-icons .title { + color: #ec8f2d; + font-size: 17px +} + +.mmg-rich-columns.style-icons.custom-bg .title { + color: #000 +} + +.mmg-rich-columns.style-icons .media { + padding-bottom: 30px; +} + +.mmg-rich-columns.style-icons .media img, +.mmg-rich-columns.style-icons .media svg { + height: auto; + width: 120px; +} + +.mmg-rich-columns.style-icons .actions { + bottom: 30px; + left: 0; + padding: 0; + position: absolute; + width: 100% +} + +.mmg-rich-columns.style-icons .button { + background: #fff; + border: 2px solid #000; + color: #000 +} + +.mmg-rich-columns.style-icons .button:hover { + background: #000; + color: #fff +} + +.mmg-rich-columns .recent-posts .post { + padding-bottom: 30px +} + +.mmg-rich-columns .recent-posts .post::after { + clear: both; + content: ""; + display: block; + font-size: 0 +} + +.mmg-rich-columns .recent-posts .image { + background: 50% 50% no-repeat; + background-size: cover; + display: block; + float: left; + position: relative; + width: 40% +} + +.mmg-rich-columns .recent-posts .text { + font-size: 14px; + padding-left: 44% +} + +.mmg-rich-columns .recent-posts .image::after { + content: ""; + display: block; + padding-bottom: 56% +} + +.mmg-rich-columns .recent-posts .post .entry-title { + color: #ec8f2d; + font-size: 14px; + padding: 0 +} + +.mmg-rich-columns .recent-posts .post .entry-title a { + color: inherit; + text-decoration: none +} + +.mmg-rich-columns .recent-posts .post .entry-title a:hover { + color: #000 +} + +.mmg-rich-columns .recent-posts .post p { + padding: .5em 0 0 +} + +.mmg-rich-columns .recent-posts .post .tags a { + color: #ec8f2d +} + +.mmg-rich-columns .recent-posts .post:first-child .image { + display: block; + float: none; + width: 100% +} + +.mmg-rich-columns .recent-posts .post:first-child .text { + font-size: 1em; + padding-left: 0 +} + +.mmg-rich-columns .recent-posts .post:first-child .entry-title { + font-size: 18px; + padding-top: 20px +} + +.module.shift-top { + padding-top: 0 !important +} + +.module.shift-top .outer { + background-color: #fff; + margin-top: -40px; + padding-left: 20px; + padding-right: 20px; + padding-top: 40px +} + +.module.split-bg { + color: #fff; + position: relative +} + +.module.split-bg .outer { + position: relative; + text-align: right; + z-index: 3 +} + +.module.split-bg::before { + background: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/about-pattern.png") 0 50% no-repeat; + background-size: auto 100%; + content: ""; + height: 100%; + position: absolute; + right: 0; + top: 0; + width: 50%; + z-index: 2 +} + +.module.split-bg .content { + display: inline-block; + text-align: left; + width: 50%; + width: calc(50% - 140px) +} + +.module.split-bg .col { + background: transparent !important; + padding: 0 +} + +.module.split-bg .col .title { + color: inherit !important +} + +.module.split-bg .col .button { + background: transparent; + border: 1px solid #fff; + color: #fff +} + +.module.split-bg .col .button:hover { + background-color: #fff; + color: #ec8f2d +} + +.module.custom-bg.split-bg::after { + background-position: 0 50%; + background-repeat: no-repeat; + background-size: cover; + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 50%; + width: calc(50% + 200px); + z-index: 1 +} + +.mmg-documents .module-title+.content { + padding-top: 1em +} + +.mmg-documents .col { + text-align: center +} + +.mmg-documents .media { + padding-bottom: 129%; + position: relative; + width: 100% +} + +.mmg-documents .ratio-1 .media { + padding-bottom: 100% +} + +.mmg-documents .ratio-10-15 .media { + padding-bottom: 150% +} + +.mmg-documents .col .media img { + height: 100%; + left: 0; + object-fit: cover; + object-position: 50% 0; + position: absolute; + top: 0; + width: 100% +} + +.mmg-documents .col .title { + border: 0 !important; + margin: 0 !important; + padding: 0 !important; + text-decoration: none +} + +.mmg-documents .col .text { + padding: 15px 0 +} + +.blog.anniversary-25 .listing-hero-mobitext { + display: none +} + +.blog.anniversary-25 .listing-hero { + background-color: #1f2f68; + overflow: hidden; + position: relative +} + +.blog.anniversary-25 .listing-hero #bgvideo { + height: 100%; + height: calc(100% + 2px); + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; + z-index: 1 +} + +.blog.anniversary-25 .listing-hero .outer { + position: relative; + z-index: 2 +} + +.blog.anniversary-25 .listing-hero .logo-25 { + float: left; + margin-top: 30px; + width: 150px +} + +.blog.anniversary-25 .listing-hero .figure { + background: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/raw_assets/public/Coded%20files/Custom/page/img/hero-hexagon.svg") no-repeat 50% 100%; + background-size: 100% auto; + box-sizing: border-box; + float: right; + width: 78% +} + +.blog.anniversary-25 .listing-hero .figure .text { + color: #fff; + font-weight: 700; + line-height: 1.8; + padding: 50px 17% 270px +} + +.blog.anniversary-25 .listing-hero h1 { + color: #fff; + font-size: 40px; + padding-bottom: 15px +} + +.blog.anniversary-25 .post-listing { + grid-gap: 55px 70px; + column-gap: 55px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + row-gap: 70px +} + +.blog.anniversary-25 .post-listing::after { + content: none +} + +.blog.anniversary-25 .post-listing .post-item { + color: inherit; + display: block; + font-size: 14px; + line-height: 1.6; + padding: 0; + text-decoration: none +} + +.blog.anniversary-25 .post-listing .post-item:hover { + text-decoration: none +} + +.blog.anniversary-25 .post-listing .post-image { + display: block; + float: none; + max-width: none; + overflow: hidden; + padding-bottom: 56%; + position: relative; + width: 100% +} + +.blog.anniversary-25 .post-listing .post-image img { + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + transition: all .3s; + width: 100% +} + +.blog.anniversary-25 .post-listing .post-item:hover .post-image img { + transform: scale(1.1) +} + +.blog.anniversary-25 .post-listing .post-title { + border: none !important; + font-size: 18px; + line-height: 1.4; + margin: 0 !important; + padding: 18px 0 !important +} + +.blog.anniversary-25 .post-listing .post-body p:first-child { + padding-top: 0 +} + +.blog.anniversary-25 .post-listing .post-body h4 { + display: none +} + +.blog.anniversary-25 .post-listing .post-item .more { + color: #f49600; + display: inline-block; + font-size: 16px; + font-weight: 700 +} + +.blog.anniversary-25 .post-listing .post-item:hover .more { + text-decoration: underline +} + +.blog.anniversary-25 #sidebar { + position: sticky; + top: 120px; + width: 24% +} + +.blog.anniversary-25 #sidebar .logo { + display: block; + margin: 0 auto 50px; + max-width: 150px; + width: 70% +} + +.blog.anniversary-25 #sidebar .logo img { + display: block; + width: 100% +} + +.blog.anniversary-25 #sidebar .recent-posts { + border: 2px solid #f49600; + border-radius: 13px; + padding: 10% +} + +.blog.anniversary-25 #sidebar h3 { + margin: 0; + padding: 0 0 25px +} + +.blog.hs-blog-post.anniversary-25 #sidebar h3 { + text-align: center +} + +.blog.anniversary-25 .recent-posts a { + color: #000; + display: block; + font-weight: 700; + line-height: 1.5; + text-decoration: none +} + +.blog.anniversary-25 .recent-posts a:hover span { + text-decoration: underline +} + +.blog.anniversary-25 .recent-posts a+a { + border-top: 1px solid #e0e0e0; + padding-top: 20px +} + +.blog.anniversary-25 .recent-posts a:not(:last-child) { + padding-bottom: 20px +} + +.blog.anniversary-25 .recent-posts a .more { + color: #f49600; + display: block; + padding-top: .5em +} + +.blog.anniversary-25 .post-hero .outer { + font-size: 0; + position: relative +} + +.blog.anniversary-25 .post-hero img { + display: block; + height: auto; + width: 100% +} + +.blog.anniversary-25 #main h1, +.blog.anniversary-25 #main h2, +.blog.anniversary-25 #main h3 { + border: none; + line-height: 1.4; + padding-left: 0 +} + +.blog.anniversary-25 .full-post .post-meta { + padding: 0 0 30px +} + +.blog.anniversary-25 #main .full-post h1.post-title { + font-size: 40px +} + +.blog.anniversary-25 #main .full-post h2 { + color: #e46b29; + font-size: 28px; + font-weight: 300 +} + +.blog.anniversary-25 .post-form { + background: #f3f3f3; + border-radius: 13px; + box-sizing: border-box; + display: block; + padding: 50px +} + +.blog.anniversary-25 .post-form h3 { + border: none; + margin: 0; + padding: 0 0 1em +} + +.blog.anniversary-25 .post-popular .post-listing { + grid-gap: 50px; + column-gap: 50px; + row-gap: 50px +} + +.blog.anniversary-25 .post-popular h2.module-title { + font-size: 14px; + font-weight: 700; + padding-bottom: 30px; + text-transform: uppercase +} + +.blog.anniversary-25 .blog-bottom { + background: url("https://www.aldevron.com/hubfs/aldevron_template/anniversary-btm-bg.webp") 50% 50% no-repeat; + background-size: cover +} + +.blog.anniversary-25 .blog-bottom h3 { + color: #fff; + font-size: 44px; + font-weight: 700; + max-width: 664px; + text-transform: uppercase +} + +.linkedin-bottom a { + background: #35578b; + border-radius: 10px; + color: #fff; + display: block; + overflow: hidden; + padding: 90px calc(9% + 160px) 90px calc(9% + 100px); + position: relative +} + +.linkedin-bottom a, +.linkedin-bottom a:hover { + text-decoration: none +} + +.linkedin-bottom a::before { + background: url("https://www.aldevron.com/hubfs/aldevron_template/blog-linkedin-bg.webp") no-repeat 50% 50%; + background-size: cover; + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + transition: all .3s; + width: 100%; + z-index: 0 +} + +.linkedin-bottom a:hover::before { + transform: scale(1.1) +} + +.linkedin-bottom a img { + height: 70px; + left: 9%; + margin-top: -35px; + position: absolute; + top: 50%; + width: auto; + z-index: 1 +} + +.linkedin-bottom a .text { + font-family: Brown-Ald, Helvetica, Arial, sans-serif; + font-size: 40px; + font-weight: 700; + letter-spacing: -.02em; + position: relative; + z-index: 3 +} + +.linkedin-bottom a .btn { + border: 1px solid #fff; + border-radius: 4px; + font-size: 20px; + line-height: 46px; + margin-top: -24px; + padding: 0 30px; + position: absolute; + right: 9%; + text-transform: uppercase; + top: 50%; + transition: all .3s; + z-index: 2 +} + +.linkedin-bottom a:hover .btn { + background: #f49600; + border-color: #f49600 +} + +.mmg-timeline .swiper-timeline { + color: #dbdbdb; + font-size: 40px; + font-weight: 700; + padding-bottom: 20px +} + +.mmg-timeline .swiper-timeline::before { + background: linear-gradient(90deg, #fff, rgba(255 255 255 / 0%)); + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 50px; + z-index: 10 +} + +.mmg-timeline .swiper-timeline::after { + background: linear-gradient(270deg, #fff, rgba(255 255 255 / 0%)); + content: ""; + height: 100%; + position: absolute; + right: 0; + top: 0; + width: 50px; + z-index: 10 +} + +.mmg-timeline .swiper-timeline .swiper-slide { + cursor: pointer; + text-align: center; + width: 160px +} + +.mmg-timeline .swiper-timeline .swiper-slide-active { + color: #f49600 +} + +.mmg-timeline .content { + position: relative; + text-align: center +} + +.mmg-timeline .swiper-content { + margin: 0 auto; + text-align: left; + width: 600px +} + +.mmg-timeline .swiper-content .swiper-wrapper { + align-items: center +} + +.mmg-timeline .swiper-button-prev { + left: 0 +} + +.mmg-timeline .swiper-button-next { + right: 0 +} + +.mmg-timeline .swiper-button-next, +.mmg-timeline .swiper-button-prev { + border: 2px solid #f49600; + border-radius: 50%; + color: #f49600; + cursor: pointer; + height: 50px; + text-align: center; + transition: all .3s; + user-select: none; + width: 50px +} + +.mmg-timeline .swiper-button-next:hover, +.mmg-timeline .swiper-button-prev:hover { + background-color: #f49600; + color: #fff +} + +.mmg-timeline .swiper-button-next::after, +.mmg-timeline .swiper-button-prev::after { + font-size: 30px; + line-height: 50px +} + +@media (max-width:1024px) { + .split-bg.wide-section { + padding-bottom: 20px; + padding-top: 20px + } + + .module.wide-section .outer { + padding-left: 20px; + padding-right: 20px; + width: 100% + } + + .module.shift-top .outer { + margin-top: 0; + padding-top: 80px + } + + .module.split-bg .content { + line-height: 1.3; + width: 53%; + width: calc(53% - 130px) + } + + .module.split-bg .col .title { + padding-bottom: 0 + } + + .module.split-bg .col .button { + font-size: 16px + } +} + +@media (max-width:860px) { + .mmg-rich-columns.style-icons .flex.cols4 .col { + margin-bottom: 4%; + margin-left: 4% !important; + width: 48% + } + + .mmg-rich-columns.style-icons .flex.cols4 .col:nth-child(odd) { + margin-left: 0 !important + } + + .blog.anniversary-25 .listing-hero-mobitext { + background: #1f2f68; + color: #fff; + display: block; + padding: 25px 20px + } + + .blog.anniversary-25 .listing-hero .desktop-text { + display: none + } + + .blog.anniversary-25 .listing-hero .outer { + padding: 0 + } + + .blog.anniversary-25 .listing-hero .logo-25 { + float: none; + left: 50%; + margin-left: -75px; + position: absolute; + top: 0; + width: 150px + } + + .blog.anniversary-25 .listing-hero .figure { + background-size: 118% auto; + box-sizing: border-box; + float: none; + padding: 220px 20px 30%; + text-align: center; + width: 100% + } + + .blog.anniversary-25 .listing-hero .figure .text { + margin: 0 auto; + max-width: 340px; + padding: 0; + text-align: center + } + + .blog.anniversary-25 #sidebar .recent-posts, + .blog.anniversary-25 .post-form { + padding: 25px 30px + } + + .blog.anniversary-25 #sidebar .logo { + margin-bottom: 30px + } + + .blog.anniversary-25 .post-listing, + .blog.anniversary-25 .post-popular .post-listing { + grid-gap: 40px; + column-gap: 40px; + row-gap: 40px + } + + .mmg-timeline .content { + padding: 0 80px + } + + .mmg-timeline .swiper-content { + width: 100% + } + + .linkedin-bottom a { + padding: 60px 180px 60px 120px + } + + .linkedin-bottom a img { + left: 30px + } + + .linkedin-bottom a .btn { + right: 30px + } +} + +@media (max-width:767px) { + .wide-section.padding-half { + padding-bottom: 36px; + padding-top: 36px + } + + .wide-section { + padding-bottom: 60px + } + + .module.shift-top .outer, + .wide-section { + padding-top: 60px + } + + .mmg-rich-columns.style-standard .flex { + display: block + } + + .mmg-rich-columns.style-standard .flex .col { + margin-left: 0 !important; + margin-right: 0 !important; + margin-top: 30px !important; + width: 100% !important + } + + .mmg-rich-columns.style-standard .flex .col:first-child { + margin-top: 0 !important + } + + .split-bg.wide-section { + padding: 0 + } + + .module.split-bg::before { + content: none + } + + .module.split-bg .outer { + background: url("//1769030.fs1.hubspotusercontent-na1.net/hubfs/1769030/aldevron_template/about-pattern.png") 100% 50% no-repeat; + background-size: auto 130% + } + + .module.custom-bg.split-bg::after { + display: block; + height: auto; + padding-bottom: 45%; + position: static; + width: 100% + } + + .module.split-bg .content { + padding: 30px 0; + width: 100% + } + + .blog.anniversary-25 .blog-bottom h3 { + font-size: 30px + } + + .mmg-timeline .swiper-timeline .swiper-slide { + width: 150px + } + + .mmg-timeline .content { + padding: 0 0 80px + } + + .mmg-timeline .swiper-content .swiper-slide { + box-sizing: border-box; + padding: 0 10px + } + + .mmg-timeline .swiper-button-next { + bottom: 0; + left: 50%; + margin: 0 0 0 10px; + right: auto; + top: auto + } + + .mmg-timeline .swiper-button-prev { + bottom: 0; + left: auto; + margin: 0 10px 0 0; + right: 50%; + top: auto + } + + .linkedin-bottom a { + padding: 45px 35px + } + + .linkedin-bottom a img { + display: inline-block; + left: auto; + margin: 0; + position: relative; + top: auto + } + + .linkedin-bottom a .text { + display: block; + padding: 20px 0 35px + } + + .linkedin-bottom a .btn { + display: inline-block; + margin: 0; + position: relative; + right: auto; + top: auto + } +} + +@media (max-width:570px) { + .mmg-rich-columns.style-icons .col, + .mmg-rich-columns.style-icons .flex.cols4 .col { + margin-bottom: 30px; + margin-left: 0 !important; + width: 100% !important + } + + .mmg-rich-columns.style-icons .col:last-child { + margin-bottom: 0 !important + } +} + +@media (max-width:479px) { + .mmg-rich-columns .recent-posts .image { + float: none; + margin: 0; + width: 100% + } + + .mmg-rich-columns .recent-posts .text { + padding-left: 0 + } + + .mmg-rich-columns .recent-posts .post .entry-title { + font-size: 18px; + padding-top: 20px + } +} \ No newline at end of file