// Footer .ari-section.footer{ @media (max-width: 991px){ padding: 0; } .ari-layout.internal &, .ari-layout.contact-pg &{ margin-top: 50px; } } .footer{ &-top{ font-size: _res-m(36); text-align: center; @include screen-sm-min{ font-size: _res(16); text-align: left; padding: _res(88) 0; @include _flex($halign: space-between, $valign: flex-start); &::before, &::after{ display: none; } } @include section-padding; a{ color: #fff; transition: all .3s ease-in-out; &:hover{ color: $brand-primary; text-decoration: none; } } >div{ @include screen-xs{ padding: _res-m(130) 0; &:not(:last-child){ border-bottom: 2px solid #9B9DA0; } } @include screen-sm-min{ width: auto; } } } &-title{ @include screen-sm-min{} } &-logo{ width: _res-m(382); margin: 0 auto; @include screen-sm-min{ width: _res(254); } img{ width: 100%; } } &-phone{ @include screen-sm-min{} } &-address{ @include screen-sm-min{} } &-phone, &-address{ @include screen-sm-min{} } &-quick-links{ ul{ margin: 0; padding: 0; list-style: none; li{ padding-bottom: _res-m(20); @include screen-sm-min{ padding-bottom: _res(20); } } } } &-smedia{ .social-media{ .fa-circle{ display: none; } .fa-stack{ width: 1em; height: 1em; line-height: 1em; font-size: _res-m(50); @include screen-sm-min{ font-size: _res(30); } } @include screen-sm-min{ &:hover{} } } } &-hours{ .hours{ display: inline-block; text-align: left; >div{ padding-bottom: _res-m(20); @include screen-sm-min{ padding-bottom: _res(10); } } } .day{ display: inline-block; width: _res-m(300); @include screen-sm-min{ width: _res(90,168); } } } &-map{ iframe{ width: _res-m(923); height: _res-m(609); @include screen-sm-min{ width: _res(180,250); height: _res(110,165); } } .map{ display: flex; } } &-cta{ display: inline-block; .btn-cta{ font-size: _res-m(36); @include screen-sm-min{ font-size: _res(16); } } } &-bottom{ background: #000; border-top: _res-m(5,10) solid $brand-primary; padding: _res-m(15,30) 0; @include screen-sm-min{ padding: 15px 0; border-top-width: _res(2,5); .bottom-row{ display: flex; align-items: center; justify-content: space-between; } } @include section-padding; a, a:hover{ color: #fff; } .footer-nav{ ul{ margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; li{ list-style: none; a{ font-size: _res-m(10,25); display: inline-block; padding: 0 10px; line-height: 1; border-right: 1px solid #fff; @include screen-sm-min{ font-size: _res(11,14); } } &:first-child a{ padding-left: 0; } &:last-child a{ padding-right: 0; border-right: none; } } } } .footer-copyright{ text-align: center; padding: _res-m(8,15) 0; font-size: _res-m(10,25); @include screen-sm-min{ padding: 0; font-size: _res(11,14); } small{ font-size: 100%; } } .footer-ds-logo{ text-align: center; img{ width: _res-m(174,284); @include screen-sm-min{ width: _res(150,284); } } } } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter