@import "lae-lib"; $theme_color: #f94213; /* --------------------------------- Team Members --------------------------------------- */ .lae-team-members { clear: both; .lae-team-member { .lae-social-list { margin-top: 20px; .lae-social-list-item { display: inline; margin: 0 15px 0 0; } } .lae-team-member-details { @include lae-body-font(); } .lae-team-member-text { .lae-title { @include lae-heading-style(); } .lae-team-member-position { font-size: 15px; line-height: 24px; font-style: italic; color: #888; margin-bottom: 10px; } } } } /*-------- Style 1 ----------------*/ .lae-team-members-style1 { .lae-team-member-wrapper { float: left; padding: 10px; } .lae-team-member { max-width: 320px; margin: 0 auto 40px; .lae-image-wrapper { text-align: center; position: relative; img { max-width: 100%; margin: 0 auto 30px; border-radius: 50%; transition: all .3s ease-in-out 0s; } .lae-social-list { position: absolute; height: 100%; width: 100%; top: 40%; z-index: 2; @include respond-to-max(767) { position: relative; top: 0; } i { font-size: 26px; color: #fff; opacity: 0; transition: all .3s ease-in-out 0s; &:hover { color: #ccc; } @include respond-to-max(767) { color: inherit; opacity: 1; &:hover { color: inherit; } } } } } &:hover { .lae-image-wrapper { img { filter: brightness(50%); @include respond-to-max(767) { filter: brightness(80%); } } .lae-social-list i { opacity: 1; } } } .lae-team-member-text { text-align: center; max-width: 650px; .lae-title { margin-bottom: 10px; } } .lae-social-list { margin: 10px auto; } } } /*-------- Style 2 ----------------*/ .lae-team-members-style2 { position: relative; max-width: 960px; .lae-team-member-wrapper { clear: both; margin-top: 100px; &:first-child { margin-top: 0; } /* Make that flip-flop possible */ .lae-image-wrapper { float: left; position: relative; img { max-width: 320px; border-radius: 50%; transition: all .3s ease-in-out 0s; } } .lae-team-member-text { margin: 10px 0 0; vertical-align: middle; padding-top: 20px; .lae-title { margin-bottom: 5px; } .lae-team-member-details { margin: 10px 0 10px; } .lae-social-list { i { font-size: 24px; } } } &:hover { .lae-image-wrapper img { filter: brightness(80%); } } } .lae-team-member-wrapper:nth-child(odd) { .lae-image-wrapper { margin-right: 50px; } } .lae-team-member-wrapper:nth-child(even) { .lae-image-wrapper { float: right; margin-left: 50px; } .lae-team-member-text { .lae-title, .lae-team-member-position, .lae-team-member-details, .lae-social-list { text-align: right; } } } } @include respond-to-max(767) { .lae-team-members-style2 { .lae-team-member-wrapper { margin-top: 75px; } .lae-team-member { .lae-image-wrapper, .lae-team-member-text { width: 100%; float: none; } .lae-image-wrapper { text-align: center; img { margin: 0 auto 20px; } } .lae-team-member-text { max-width: 400px; margin: 0 auto; padding-top: 0; .lae-title, .lae-team-member-position, .lae-team-member-details, .lae-social-list { text-align: center !important; } } } } } .lae-dark-bg .lae-team-members { .lae-team-member { .lae-team-member-details { color: #909090; } .lae-team-member-text { .lae-title { color: #e5e5e5; } .lae-team-member-position { color: #505050; } } } } /* ---------------------------------------- Testimonials --------------------------------------- */ .lae-testimonials { clear: both; .lae-testimonial { margin-bottom: 50px; } .lae-testimonial-text { background: #ffffff; border: 1px solid #dbdbdb; border-radius: 30px; text-align: center; position: relative; padding: 20px 20px 0; margin-bottom: 40px; font-style: italic; font-size: 15px; line-height: 24px; color: #888; .lae-dark-bg & { color: #666; background: #eee; } &:after { content: ''; display: block; background: #fff; border-left: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; background: #ffffff; transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: skew(0deg, -44deg); width: 24px; height: 24px; position: absolute; bottom: -12px; left: 40px; margin: auto; .lae-dark-bg & { background: #eee; } } text-align: center; max-width: 450px; } .lae-testimonial-user { display: table; .lae-image-wrapper { display: table-cell; img { max-width: 64px; border-radius: 50%; margin-right: 20px; } } .lae-text { display: table-cell; vertical-align: middle; color: #888; .lae-dark-bg & { color: #909090; } .lae-author-name { @include lae-heading-style(); font-size: 15px; line-height: 24px; margin-bottom: 5px; color: #333; .lae-dark-bg & { color: #e5e5e5; } } } } } /* ------------------------------ Testimonials Slider ------------------------------------- */ .lae-testimonials-slider { clear: both; position: relative; &.lae-container { max-width: 900px; margin: 0 auto; } .lae-testimonial-text { text-align: center; max-width: 750px; margin: 0 auto 40px; font-size: 18px; line-height: 32px; font-style: italic; color: #666; .lae-dark-bg & { color: #ccc; } i { color: #ccc; font-size: 32px; display: block; margin-bottom: 35px; background: none; width: auto; height: auto; .lae-dark-bg & { color: #ddd; } } } .lae-testimonial-user { display: table; margin: 0 auto; .lae-image-wrapper { display: table-cell; img { max-width: 64px; border-radius: 50%; margin-right: 15px; } } .lae-text { display: table-cell; vertical-align: middle; color: #888; .lae-dark-bg & { color: #909090; } .lae-author-name { @include lae-heading-style(); font-size: 15px; line-height: 24px; margin-bottom: 5px; .lae-dark-bg & { color: #e5e5e5; } } } } } /* ------------------------------------- Stats Bar --------------------------------------------- */ .lae-stats-bars { clear: both; .lae-stats-bar { width: 100%; display: block; margin: 0 0 18px; overflow: hidden; .lae-stats-title { margin: 0; display: block; color: #888; font-style: normal; font-size: 15px; text-transform: none; color: #333; font-size: 16px; line-height: 28px; span { margin-left: 5px; } .lae-dark-bg & { color: #ddd; } } .lae-stats-bar-wrap { position: relative; } .lae-stats-bar-content { background: #e55a54; display: block; height: 10px; width: 0; position: relative; z-index: 1; border-radius: 5px; } .lae-stats-bar-bg { width: 100%; background: rgba(0, 0, 0, 0.1); height: 10px; display: block; margin-top: -10px; border-radius: 5px; .lae-dark-bg & { background: rgba(255, 255, 255, 0.1); } } } } /*--------------------------------- Pie Charts -------------------------------------- */ .lae-piecharts { clear: both; } .lae-piechart { position: relative; text-align: center; float: left; overflow: hidden; float: left; padding: 10px; canvas { position: relative; top: 0; left: 0; max-width: 100%; margin: 0 auto; } .lae-label { text-align: center; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 55%; max-width: 65%; color: #888; .lae-dark-bg & { color: #909090; } } .lae-percentage { span { position: absolute; top: 25%; left: 0; right: 0; margin-left: auto; margin-right: auto; font-size: 60px; line-height: 60px; font-weight: 300; text-align: center; color: #333; font-weight: bolder; .lae-dark-bg & { color: #e5e5e5; } } sup { font-size: 18px; vertical-align: middle; } } &.dark-bg { .lae-label { color: #fff; } .lae-percentage span { color: #eee; } } } @media only screen and (max-width: 479px) { .lae-piechart canvas { margin-bottom: 15px; } } /* ---------------------------------- Odometers/Counters ---------------------------------- */ .odometer.odometer-auto-theme, .odometer.odometer-theme-default { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; position: relative; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer { display: inline-block; vertical-align: middle; *vertical-align: auto; *zoom: 1; *display: inline; visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner { text-align: left; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon { display: block; } .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner { display: block; -webkit-backface-visibility: hidden; } .odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value { display: block; -webkit-transform: translateZ(0); } .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value { position: absolute; } .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner { -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; transition: transform 2s; } .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner { -webkit-transition: -webkit-transform 2s; -moz-transition: -moz-transform 2s; -ms-transition: -ms-transform 2s; -o-transition: -o-transform 2s; transition: transform 2s; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .odometer.odometer-auto-theme, .odometer.odometer-theme-default { font-family: "Helvetica Neue", sans-serif; line-height: 1.1em; } .odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value { text-align: center; } /* --- Animate Numbers ---- */ .lae-odometers { clear: both; font-size: 0; /* inline-block hack */ .lae-odometer { display: inline-block; vertical-align: top; text-align: left; position: relative; margin-bottom: 50px; &:last-child:after { border: none; } .lae-prefix, .lae-suffix { display: inline; font-size: 36px; line-height: 48px; color: #333; vertical-align: middle; .lae-dark-bg & { color: #e5e5e5; } } .lae-prefix { margin-right: 5px; margin-left: 5px; } .lae-suffix { margin-left: 5px; } .lae-number { font-size: 60px; line-height: 72px; font-style: normal; text-transform: none; letter-spacing: 2px; font-weight: 900; color: #333; margin-bottom: 10px; span { font-size: 60px; } .lae-dark-bg & { color: #e5e5e5; } } .lae-stats-title { font-size: 18px; line-height: 28px; display: inline-block; color: #888; .lae-dark-bg & { color: #909090; } span { float: left; margin-right: 15px; } .lae-icon-wrapper { font-size: 32px; margin-right: 10px; vertical-align: middle; color: #ccc; } } } } @media only screen and (max-width: 960px) { .lae-odometers .lae-odometer { .lae-number { font-size: 48px; line-height: 56px; margin-bottom: 0; span { font-size: 48px; } } .lae-stats-title { font-size: 15px; line-height: 26px; } } } @include respond-to-max(479) { .lae-odometers { .lae-odometer { text-align: center; } } } /* ---------------------------------- Pricing table ------------------------------------ */ .lae-pricing-table { clear: both; } .lae-pricing-table .lae-pricing-plan { float: left; padding: 10px; } .lae-center { text-align: center; } .lae-pricing-table { padding: 0; .lae-top-header { padding: 15px 0; background-color: #494949; border-bottom: 1px solid #2c2b2b; .lae-plan-name { @include lae-heading-style(); font-size: 20px; line-height: 32px; color: #fefefe; margin: 0; } img { margin-top: 15px; } .lae-tagline { display: block; font-size: 15px; line-height: 24px; color: #EDEDED; text-transform: none; text-align: center; margin-bottom: 5px; } } .lae-pricing-plan { background: #fff; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.1s ease-in-out 0s; -moz-transition: all 0.1s ease-in-out 0s; -ms-transition: all 0.1s ease-in-out 0s; transition: all 0.1s ease-in-out 0s; margin-bottom: 30px; &:hover { .lae-purchase { background: #e5e5e5; } } .lae-plan-price { color: #fff; font-size: 22px; line-height: 28px; font-weight: 700; margin: 0; span { font-size: 22px; line-height: 32px; } } } .lae-plan-header { padding: 30px 0 30px; background-color: #494949; } .lae-plan-price { .lae-text { display: inline-block; padding: 6px 25px; border-radius: 25px; background: #2C2B2B; } sup { font-size: 18px; line-height: 32px; vertical-align: top; margin-right: 2px; position: static; } } .lae-plan-details { padding: 15px 0; margin: 0; border: 1px solid #eee; .lae-pricing-item { list-style: none; display: block; padding: 6px; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; text-align: center; i { color: #777; font-size: 18px; display: inline; margin-right: 8px; } .lae-title { color: #838383; margin-bottom: 10px; } .lae-value-wrap { display: block; &:after { position: relative; content: ""; background: #ddd; width: 120px; height: 1px; display: block; margin: 12px auto 0; } } .lae-value { color: #444; font-size: 24px; line-height: 32px; display: inline; } s { color: #b4c9d3; } &:last-child .lae-value-wrap:after { display: none; } } } .lae-purchase { text-align: center; text-transform: uppercase; padding: 15px; margin: 0 auto; background: #f1f1f1; -webkit-transition: all 0.1s ease-in-out 0s; -moz-transition: all 0.1s ease-in-out 0s; -ms-transition: all 0.1s ease-in-out 0s; transition: all 0.1s ease-in-out 0s; border-left: 1px solid #eee; border-right: 1px solid #eee; border-bottom: 1px solid #eee; a { padding: 12px 25px; border-radius: 5px; letter-spacing: 0; font-size: 16px; line-height: 24px; letter-spacing: 6px; font-weight: bold; } } .lae-pricing-plan.lae-highlight { background: #f5f5f5; margin-top: -10px; .lae-plan-details { border-color: #e5e5e5; } .lae-top-header { padding: 20px 0; } .lae-pricing-table .lae-top-header .lae-plan-name { color: #28c2ba; } .lae-purchase { padding: 20px 0; background-color: #e5e5e5; border-color: #ddd; } } } /* ------------------------------------ Services ------------------------------------------- */ /* Style 1 */ .lae-services-style1 { .lae-service { .lae-icon-wrapper span { display: block; text-align: center; font-size: 96px; line-height: 1; margin-bottom: 20px; transition: color .4s ease-in-out 0s; } .lae-image-wrapper img { display: block; max-width: 100%; text-align: center; margin: 0 auto 25px; transition: all .4s ease-in-out 0s; } .lae-service-text { text-align: center; max-width: 300px; margin: 0 auto; .lae-title { @include lae-heading-style(); margin-bottom: 20px; } } &:hover { .lae-image-wrapper img { transform: scale(0.9, 0.9); } } } } /* Style 2 */ .lae-services-style2 { .lae-service { .lae-image-wrapper img, .lae-icon-wrapper span { float: left; margin-right: 18px; } .lae-icon-wrapper span { font-size: 24px; line-height: 32px; } .lae-service-text .lae-title { @include lae-heading-style(); margin-bottom: 20px; } } } /* Style 3 */ .lae-services-style3 { .lae-service { .lae-icon-wrapper span { display: block; text-align: left; font-size: 80px; line-height: 1; margin-bottom: 25px; color: #555; .lae-dark-bg & { color: #c5c5c5; } } .lae-image-wrapper img { display: block; max-width: 100%; text-align: left; margin-bottom: 25px; } .lae-service-text { text-align: left; max-width: 300px; margin: 0; font-size: 14px; line-height: 32px; color: #888; ul.lae-services-list { padding: 0; margin: 0; border: none; } ul.lae-services-list li { border-bottom: 1px solid #eee; position: relative; padding: 0; margin: 0; list-style: none; line-height: 42px; &:hover { padding: 0; } .lae-dark-bg & { border-color: #333; } } ul.lae-services-list li:before { @include lae-icon-font(); position: relative; display: inline-block; height: auto; width: auto; background: none; float: none; vertical-align: middle; margin: 0 15px 0 0; content: "\e913"; color: #BBBBBB; font-size: 12px; line-height: 1; .lae-dark-bg & { color: #606060; } } .lae-title { @include lae-heading-style(); margin-bottom: 20px; } } } } /* -------- General services -------- */ .lae-services { clear: both; .lae-service { margin-bottom: 50px; .lae-icon-wrapper span { transition: color .4s ease-in-out 0s; } .lae-service-text { font-size: 15px; line-height: 24px; .lae-dark-bg & { color: #909090; .lae-title { color: #e5e5e5; } } } } } /* ---------------------------------- Posts Carousel ---------------------------------- */ .lae-posts-carousel { clear: both; max-width: none; @include respond-to-min(1024) { max-width: 96%; } .lae-posts-carousel-item { .hentry { background: #fff; border-radius: 6px; border: none; padding: 0; margin: 0; transition: box-shadow .25s ease 0s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); overflow: hidden; &:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } } .lae-project-image { position: relative; overflow: hidden; img { width: 100%; display: block; transition: all .4s ease-in-out 0s; max-width: 100%; } &:hover { img { filter: brightness(50%); } } .lae-image-info { display: block; text-align: center; .lae-entry-info { text-align: center; display: block; position: absolute; top: 50%; left: 0; right: 0; margin: auto; max-width: 100%; transform: translateY(-50%); } .lae-post-title { padding: 10px; margin: 0; font-size: 22px; line-height: 34px; font-weight: 400; color: #fff; opacity: 0; transition: opacity .4s ease-in-out 0s; @include respond-to-max(1024) { font-size: 18px; line-height: 26px; } a { display: inline; color: #fff; transition: all .3s ease-in-out 0s; border-bottom: 1px solid transparent; &:hover { border-bottom: 2px solid #ccc; } } } .lae-terms { display: block; color: #f9f9f9; font-size: 14px; line-height: 22px; opacity: 0; transition: opacity .4s ease-in-out 0s; a { color: #ddd; position: relative; display: inline; zoom: 1; font-size: 14px; line-height: 22px; font-style: italic; transition: all .4s ease-in-out 0s; &:hover { color: #fff; } } } } &:hover { .lae-image-info { .lae-post-title, .lae-terms { opacity: 1; } } } } .lae-entry-text-wrap { text-align: center; max-width: 650px; margin: 0 auto; padding: 25px 15px; .entry-title { @include lae-heading-style(); font-size: 16px; line-height: 24px; margin-bottom: 10px; &:after, &:before { display: none; } a { color: #333333; transition: all .4s ease-in-out 0s; &:hover { color: #888; } } } .lae-entry-meta { span { display: inline-block; padding: 0; margin: 0; font-style: italic; color: #999; a { @include transition(all 0.3s ease-in-out 0s); font-style: normal; } &:after { content: '//'; padding-left: 6px; padding-right: 6px; } &:first-child { border: none; padding-left: 0; } &:last-child:after{ display: none; } } } .entry-summary { padding: 0; margin: 10px auto 0; &:before { width: 35px; height: 1px; background: #aaa; display: block; content: ""; text-align: center; margin: 0 auto 15px; } } .lae-category-list { @include bottom-line(35, 1, #aaa); transition: all .4s ease-in-out 0s; &:after { text-align: center; margin: 10px auto 10px; } } .lae-category-list a { font-style: italic; transition: all .4s ease-in-out 0s; } } .type-post .lae-entry-text-wrap .entry-summary:before { display: none; } } } /* ---------------------------------- Clients Widget ---------------------------------- */ .lae-clients { clear: both; overflow: hidden; margin: 0 auto; @include grid-media($lae-mobile-only-grid) { .lae-grid-mobile-1 { .lae-grid-item:nth-child(1n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 1) { border-top: 1px solid #ddd; } } .lae-grid-mobile-2 { .lae-grid-item:nth-child(2n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 2) { border-top: 1px solid #ddd; } } .lae-grid-mobile-3 { .lae-grid-item:nth-child(3n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 3) { border-top: 1px solid #ddd; } } .lae-grid-mobile-4 { .lae-grid-item:nth-child(4n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 4) { border-top: 1px solid #ddd; } } .lae-grid-mobile-5 { .lae-grid-item:nth-child(5n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 5) { border-top: 1px solid #ddd; } } .lae-grid-mobile-6 { .lae-grid-item:nth-child(6n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 6) { border-top: 1px solid #ddd; } } } @include grid-media($lae-tablet-only-grid) { .lae-grid-tablet-1 { .lae-grid-item:nth-child(1n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 1) { border-top: 1px solid #ddd; } } .lae-grid-tablet-2 { .lae-grid-item:nth-child(2n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 2) { border-top: 1px solid #ddd; } } .lae-grid-tablet-3 { .lae-grid-item:nth-child(3n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 3) { border-top: 1px solid #ddd; } } .lae-grid-tablet-4 { .lae-grid-item:nth-child(4n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 4) { border-top: 1px solid #ddd; } } .lae-grid-tablet-5 { .lae-grid-item:nth-child(5n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 5) { border-top: 1px solid #ddd; } } .lae-grid-tablet-6 { .lae-grid-item:nth-child(6n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 6) { border-top: 1px solid #ddd; } } } @include grid-media($lae-desktop-grid) { .lae-grid-desktop-1 { .lae-grid-item:nth-child(1n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 1) { border-top: 1px solid #ddd; } } .lae-grid-desktop-2 { .lae-grid-item:nth-child(2n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 2) { border-top: 1px solid #ddd; } } .lae-grid-desktop-3 { .lae-grid-item:nth-child(3n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 3) { border-top: 1px solid #ddd; } } .lae-grid-desktop-4 { .lae-grid-item:nth-child(4n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 4) { border-top: 1px solid #ddd; } } .lae-grid-desktop-5 { .lae-grid-item:nth-child(5n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 5) { border-top: 1px solid #ddd; } } .lae-grid-desktop-6 { .lae-grid-item:nth-child(6n + 1) { border-left: 1px solid #ddd; } .lae-grid-item:nth-child(-n + 6) { border-top: 1px solid #ddd; } } } .lae-client { position: relative; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; overflow: hidden; .lae-dark-bg & { border-color: #505050 !important; } img { -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; width: 100%; margin: 0; display: block; } .lae-client-name { position: absolute; z-index: 2; top: 50%; left: 0; text-align: center; width: 100%; height: 100%; margin-top: -12px; color: #fff; font-size: 18px; line-height: 26px; transition: opacity .4s ease-in-out 0s; opacity: 0; a { color: #fff; text-decoration: none; } } .lae-image-overlay { position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; height: 100%; background: #000; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; transition: opacity .4s ease-in-out 0s; } &:hover { .lae-image-overlay { opacity: 0.7; .lae-dark-bg & { opacity: 0.8; } } .lae-client-name { opacity: 1; } } } } /* ---------------------------------- Generic Carousel Widget ---------------------------------- */ .lae-carousel .lae-carousel-item { position: relative; } .lae-carousel.lae-container { max-width: none; } /* ---------------------------------- Button Widget ---------------------------------- */ input.lae-button.lae-with-icon, button.lae-button.lae-with-icon, a.lae-button.lae-with-icon, .lae-button.lae-with-icon:active, .lae-button.lae-with-icon:visited { span, img.lae-thumbnail { margin-right: 15px; } span { color: #fff; font-size: 24px; vertical-align: middle; line-height: 1; } img.lae-thumbnail { display: inline !important; vertical-align: middle; max-width: 50px; } } /* ---------------------------------- Heading ---------------------------------- */ .lae-heading { text-align: center; margin: 0 auto 60px; max-width: 640px; @include respond-to-max(767) { margin-bottom: 40px; } .lae-text { font-size: 18px; line-height: 28px; margin: 0 auto; @include respond-to-max(767) { font-size: 15px; line-height: 26px; } } &.lae-alignleft, &.lae-alignright { margin: 0; .lae-text { margin: 0; } } &.lae-alignleft { text-align: left; } &.lae-alignright { text-align: right; max-width: none; } } .lae-heading { .lae-title { font-weight: 700; font-size: 32px; line-height: 42px; margin: 0 auto 20px; color: #333; font-weight: bold; @include respond-to-max(767) { font-size: 24px; line-height: 32px; } } .lae-dark-bg & { .lae-title { color: #e5e5e5; } .lae-subtitle { color: #B0B0B0; } .lae-text { color: #909090; } } &.lae-alignleft, &.lae-alignright { .lae-title { margin: 0 0 20px; } } } .lae-heading { .lae-subtitle { margin: 0 auto 5px; color: #888; font-size: 12px; line-height: 20px; text-transform: uppercase; font-weight: 600; letter-spacing: 2px; position: relative; display: inline-block; padding: 0 10px; @include respond-to-max(767) { font-size: 11px; line-height: 18px; } } &.lae-alignleft, &.lae-alignright { .lae-subtitle { margin: 0 0 5px; padding: 0; &:before, &:after { display: none; } } } } .lae-heading.lae-style3 { margin: 0 auto 30px; .lae-title { font-size: 22px; line-height: 32px; text-transform: uppercase; letter-spacing: 1px; @include bottom-line(35, 1, #aaa); &:after { margin: 10px auto 20px; .lae-dark-bg & { background: #909090; } } @include respond-to-max(767) { font-size: 16px; line-height: 24px; } } &.lae-alignleft, &.lae-alignright { margin: 0 0 30px; .lae-title:after { margin: 10px 0 20px; } } } /* ---------------------------------- Portfolio/Posts Grid Free Version ---------------------------------- */ .lae-portfolio-wrap { clear: both; overflow: hidden; .lae-portfolio-header { position: relative; max-width: 1140px; margin: 0 auto 30px; overflow: hidden; clear: both; display: flex; flex-flow: row nowrap; justify-content: space-between; &.lae-no-heading { justify-content: center; } @include respond-to-max(800) { flex-flow: column wrap; justify-content: flex-start; } } .lae-heading { display: inline-block; text-align: left; max-width: none; font-size: 32px; line-height: 44px; text-transform: uppercase; letter-spacing: 1px; color: #333; margin: 0 100px 0 0; .lae-dark-bg & { color: #e5e5e5; } @include respond-to-max(800) { margin-bottom: 30px; } } .lae-taxonomy-filter { display: block; margin: 0; padding: 0; @include align-self(center); @include respond-to-max(800) { @include align-self(flex-start); } .lae-filter-item { position: relative; display: inline-block; margin: 0 0 15px 0; padding: 0; font-style: normal; border-bottom: 1px solid #ddd; .lae-dark-bg & { border-color: #444; } a { font-size: 15px; line-height: 24px; transition: all .4s ease-in-out 0s; display: block; color: #777; padding: 0 15px 15px; .lae-dark-bg & { color: #999; } &:hover { color: #222; .lae-dark-bg & { color: #fff; } } @include respond-to-max(479) { padding: 0 10px 8px; } } &.lae-active { a { color: #222; .lae-dark-bg & { color: #fff; } } &:after { content: ''; position: absolute; left: 0; bottom: 0; border-bottom: 3px solid #f94213; width: 100%; } } &:last-child { margin-right: 0; } } } .lae-portfolio { .lae-portfolio-item { .hentry { margin: 0; padding: 0; border: none; background: none; box-shadow: none; } .lae-project-image { position: relative; overflow: hidden; img { display: block; width: 100%; transition: all .4s ease-in-out 0s; } &:hover { img { filter: brightness(50%); } } .lae-image-info { display: block; text-align: center; .lae-entry-info { text-align: center; display: block; position: absolute; top: 50%; left: 0; right: 0; margin: auto; max-width: 100%; transform: translateY(-50%); } .lae-post-title { padding: 10px; margin: 0; font-size: 18px; line-height: 28px; font-weight: 400; color: #fff; opacity: 0; transition: opacity .4s ease-in-out 0s; @include respond-to-max(1024) { font-size: 18px; line-height: 26px; } a { display: inline; color: #fff; transition: all .3s ease-in-out 0s; border-bottom: 1px solid transparent; &:hover { border-bottom: 1px solid #ccc; } } } .lae-terms { display: block; color: #f9f9f9; font-size: 14px; line-height: 22px; opacity: 0; transition: opacity .4s ease-in-out 0s; a { color: #ddd; position: relative; display: inline; zoom: 1; font-size: 14px; line-height: 22px; font-style: italic; transition: all .4s ease-in-out 0s; &:hover { color: #fff; } } } } &:hover { .lae-image-info { .lae-post-title, .lae-terms { opacity: 1; } } } } .lae-entry-text-wrap { text-align: center; max-width: 650px; margin: 20px auto 0; } .entry-title { font-size: 18px; line-height: 26px; font-weight: normal; margin-bottom: 10px; &:after, &:before { display: none; } a { transition: all .4s ease-in-out 0s; color: #333; &:hover { color: #888; } } .lae-dark-bg & { a { color: #e0e0e0; &:hover { color: #fff; } } } } .lae-entry-meta { span { display: inline-block; padding: 0; margin: 0; font-style: italic; color: #999; &:after { content: '//'; padding-left: 6px; padding-right: 6px; } &:first-child { border: none; padding-left: 0; } &:last-child:after { display: none; } a { @include transition(all 0.3s ease-in-out 0s); font-style: normal; } .lae-dark-bg & { color: #707070; } } } .entry-summary { margin: 15px auto 0; padding: 0; &:before { width: 35px; height: 1px; background: #aaa; display: block; content: ""; text-align: center; margin: 0 auto 15px; } .lae-dark-bg & { color: #999; &:before { background: #505050; } } } } } }