/** * Theme Defaults */ .ct-main-body { position: relative; .columns, .thumbnail-area { img { max-width: 100%; height: auto; vertical-align: bottom; } > img { max-width: 100%; } } } .fa-gradient::before { background: -webkit-linear-gradient(left,#f6f163 0%, #4eb7a7 70%); background: -moz-linear-gradient(45deg, #f6f163 0%, #4eb7a7 70%); background: -ms-linear-gradient(left,#f6f163 0%, #4eb7a7 70%); background: -o-linear-gradient(left,#f6f163 0%, #4eb7a7 70%); background: linear-gradient(left,#f6f163 0%, #4eb7a7 70%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .text-gradient { background: -webkit-linear-gradient(left,#f6f163 0%, #4eb7a7 70%); background: -moz-linear-gradient(45deg, #f6f163 0%, #4eb7a7 70%); background: -ms-linear-gradient(left,#f6f163 0%, #4eb7a7 70%); background: -o-linear-gradient(left,#f6f163 0%, #4eb7a7 70%); background: linear-gradient(left,#f6f163 0%, #4eb7a7 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .sticky { border: 1px solid @primary-color; padding: @font-size; .post-wrap { border-bottom: unset; } } figure { overflow: hidden; margin: 0; figcaption { box-sizing: border-box; bottom: 1rem !important; } } .link-pages { margin: @font-size 0; } .post-page-numbers { padding: 4px; } ul, ol { li { margin-left: @font-size; list-style-position: inside; } } code br { display: block; margin: -1.5rem 0; } .aligncenter { margin: 0 auto; display: block; } .alignleft { float: left; margin-right: 1rem; } .alignright { float: right; margin-left: 1rem; } .wp-caption { border: 1px solid @primary-color; padding: .6rem; max-width: 100%; box-sizing: border-box; margin-bottom: 1rem; img { max-width: 100%; } } .wp-caption-text { text-align: center; } .gallery-caption { position: relative; font-size: 1.2rem; } iframe { max-width: 100%; } .post-excerpt h1, .next-post-wrap .next, .previous-post-wrap .prev { overflow-wrap: break-word; } .button { background-color: #43c6ac; color: #ffffff; padding: .6rem 1.5rem; border: 1px solid #43c6ac; border-radius: .2rem; cursor: pointer; box-shadow: 0 14px 28px -4px rgba(14, 17, 20, 0.1); transition: .2s all ease; } /** * * #.# TYPOGRAPHY * */ h1 { line-height: 1; margin-bottom: @font-size*2; } h2 { font-size: 3.2rem; font-weight: 700; line-height: 1; margin-bottom: @font-size; } h3 { line-height: 1; } h4 { color: @primary-color; font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; } .page, .single { h1, h2, h3, h4, h5, h6, table, dl, ol, ul { margin-bottom: 2.2rem; } p { margin-bottom: 1rem; } } .title-w-sub h4, .ct-sub, { margin-bottom: .1rem !important; } ul.slick-dots { margin-bottom: 0; } .post-content { ol ol, ol ol ol, ul ul, ul ul ul { margin-bottom: 0; } li { margin-bottom: .5rem; } } /** * Body Contents */ .service-image { max-width: 100%; } .ct-info-box { border-bottom: 1px solid @border-color; padding: 0; } .info-boxes, .member-boxes { display: flex; flex-wrap: wrap; width: 100%; } .info-box { width: 33%; box-sizing: border-box; } .member-box { padding: 0 1.6rem; box-sizing: border-box; } .info-box { position: relative; padding: 0 3rem @theme-margin/1.2; &:after { content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: @border-color; } &:before { content: ''; position: absolute; top: 0; width: 100%; height: 1px; background-color: #e0e0e0; left: 0; } &:nth-of-type( 3n ) { &:after { content: unset; } } &:nth-of-type( -n+3 ) { &:before { content: unset; } } &:nth-child( n+4 ) { padding-top: @theme-margin/1.2; } } .three.info-box { &:nth-child( 4n ) { &:after { content: unset; } } } .four.info-box { &:nth-child( 3n ) { &:after { content: unset; } } } .info-box-flat { .fa { margin-bottom: @font-size; color: @primary-color; font-size: 7.2rem; } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .info-box { width: 100%; &:after { content: unset; } } } .img-wrapper { display: flex; img { width: 100%; border-radius: .3rem; } } .stats-counter { .columns { &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } } } .counter-wrap { display: inline-block; .counter { font-size: 4rem; } span { color: @primary-color; } } .counter-small { display: block; font-size: @font-size; } .video-popup { position: relative; .video-play-button { position: absolute; z-index: 10; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); box-sizing: content-box; display: block; width: 20px; height: 28px; border-radius: 50%; padding: 18px 20px 18px 28px; } .video-play-button:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 70px; height: 70px; // background: @primary-color; border-radius: 50%; animation: pulse-border 1500ms ease-out infinite; } .video-play-button:after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 70px; height: 70px; // background: @primary-color; border-radius: 50%; transition: all 200ms; } .video-play-button:hover:after { background-color: darken(@primary-color, 10%); } .video-play-button img { position: relative; z-index: 3; max-width: 100%; width: auto; height: auto; } .video-play-button span { display: block; position: relative; z-index: 3; width: 0; height: 0; border-left: 20px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; } @keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } .video-overlay { position: fixed; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.80); opacity: 0; transition: all ease 500ms; } .video-overlay.open { position: fixed; z-index: 1000; opacity: 1; } .video-overlay-close { position: absolute; z-index: 1000; top: 15px; right: 20px; font-size: 36px; line-height: 1; font-weight: 400; color: #fff; text-decoration: none; cursor: pointer; transition: all 200ms; } .video-overlay-close:hover { color: @primary-color; } .video-overlay iframe { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); box-shadow: 0 0 15px rgba(0,0,0,0.75); } } /** * Team Members */ .team-member { margin-top: @line-height; position: relative; z-index: 1; .member-info { padding: 1.2rem 1.6rem; >h3 { margin-bottom: .6rem; } } img { display: block; width: 100%; height: auto; } h3 { font-size: 3.4rem; margin-bottom: 0; } p { font-size: 1.4rem; } &:before { background-color: transparent; box-shadow: none; content: ""; margin: 0 auto; position: absolute; top: 20px; right: 0; width: 100%; height: 100%; z-index: -1; transition: all .5s ease; } &:hover { &:before { background-color: @white-color; box-shadow: 0 0 4rem rgba(42, 49, 57, 0.05); top: 0; } } .member-effects { position: relative; .member-social { position: absolute; bottom: 1.2rem; left: 0; opacity: 0; transition: all .5s ease; .fa { color: @white-color; background-color: @primary-color; border-radius: 50%; margin-right: .2rem; width: 3rem; height: 3rem; line-height: 3rem; text-align: center; transform: rotate( -45deg ); transition: all .5s ease; } } } &:hover { .member-social { opacity: 1; left: 1.6rem; .fa { transform: rotate( 0 ); } } } } /** * Long Blurbs */ .long-blurb { margin-top: @line-height*2; .long-blurb-title { color: @primary-color; font-size: 3rem; text-align: right; margin-bottom: 0; } .fa { color: @primary-color; font-size: 4.8rem; text-align: center; width: 100%; } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .long-blurb .long-blurb-title { margin-bottom: @font-size; } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .long-blurb { .long-blurb-title { text-align: center; } } } /** * Testimonial Slider */ .ct-testimonials { color: @white-color; background-color: @primary-color; position: relative; } .ct-testimonial-slider { .slick-dots { top: 0; left: 17.7%; text-align: left; li { margin: 0; } } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .ct-testimonial-slider { .slick-dots { top: unset; left: unset; bottom: -4.5rem; text-align: center; margin-top: -2rem; } } .slick-arrow { display: none !important; } } .slick-next, .slick-prev { z-index: 1; } .slider-rounded-image { img { display: block; margin: 0 auto; border: .5rem solid @white-color; border-radius: 50%; width: 12rem; height: auto; } } .testimonial-contents { margin-top: 4rem; .testimonial-content { font-family: "Lora", serif; font-size: @font-size*1.5; margin-bottom: @line-height; p, span { font-family: "Lora", serif; font-size: @font-size*1.5; margin-bottom: @line-height; } } .testimonial-by { font-size: @font-size*1.5; font-weight: 500; line-height: 1; margin-bottom: 0; } .testimonial-author-title { color: darken( @white-color, 4%); font-family: "Lora", serif; font-size: 1.4rem; } } .ct-color-mask { background-color: @primary-color; opacity: .9; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /** * Footer Section */ .ct-footer { color: @white-color; background-color: @footer-bg-color; border-top: .5rem solid @primary-color; width: 100%; input[type="submit"] { color: @footer-bg-color; } .widget-title { font-size: @font-size*1.4; font-weight: 700; } ul { list-style-position: inside; li { list-style-type: none; margin-bottom: 1.2rem; } } a { color: @white-color; &:hover { color: @primary-color; } } .fa { font-size: @font-size*1.5; margin-right: @font-size; } select { color: @footer-bg-color; } } .ct-footer-credits a { color: @secondary-color; } .ct-bottom-bar { color: darken( @white-color, 10%); background-color: darken( @footer-bg-color, 5%); padding: 1rem 0; span { font-size: 1.4rem; } } .footer-site-info { text-align: center; } .thumbnail-area { position: relative; .post-date { background-color: @primary-color; color: @white-color; display: inline-block; position: absolute; bottom: 0; right: 0; border: 1rem solid #43c6ac; outline: 2px solid #ffffff; outline-offset: -1rem; padding: .2rem .5rem; } img { max-width: 100%; height: auto; } } .post-details { a { color: @dark-color; &:hover { color: @primary-color; } } } .single { .post-details { margin-bottom: 1rem; } } .post-loop { h3 { display: inline-block; margin: 1rem 0; overflow-wrap: break-word; } .post-date { margin-bottom: 1rem; span { &::after { display: inline-block; content: ""; border-top: .3rem solid @primary-color; width: 1rem; margin-top: 1rem; margin-left: .5rem; transform: translateY(-.4rem); } } } } .single .post-date { &::after { display: inline-block; content: ""; border-top: .3rem solid @primary-color; width: 1rem; margin-top: 1rem; margin-left: .5rem; transform: translateY(-.4rem); } } .gallery-item { float: left; margin-right: 1rem; } .post-date, .excerpt-comments, .post-edit { display: inline-block; } .excerpt-author, .excerpt-category{ &::after { display: inline-block; content: ""; border-top: .3rem solid @primary-color; width: 1rem; margin-top: 1rem; transform: translateY(-.4rem); } } .edit-link { &::before { display: inline-block; content: ""; border-top: .3rem solid @primary-color; width: 1rem; margin-top: 1rem; transform: translateY(-.4rem); } } .post-edit-link { margin-left: .4rem; } .single-post { .excerpt-category{ &::after { width: 0; } } } .excerpt-category, .excerpt-author { display: inline-block; } .excerpt-category { a { margin-right: .4rem; } } .excerpt-author * { display: inline-block; img { width: 3rem; height: auto; border-radius: 50%; } } .post-body .excerpt-author { img { margin-bottom: 0; } } .post-wrap { border-bottom: 1px solid @primary-color; padding-bottom: 1.5rem; } .featured-display { padding-bottom: 0; } .loop-container { padding-bottom: 0; .post { margin-bottom: 4.5rem; } } .single-post { h1 { margin-bottom: 1rem; } } .post-details { margin-bottom: .5rem; } .post-body { padding-top: 4rem; padding-bottom: 4rem; img { margin-bottom: 1rem; } } .pagination-single .pagination-nav { .prev, .next { font-weight: 500; } } .pagination-single { margin: @font-size*2.5 0; .pagination-nav { font-size: @font-size*1.2; .previous-post-wrap { width: 50%; display: inline-block; .previous-post { font-size: @font-size/1.1; font-weight: 500; } } .next-post-wrap { width: 50%; text-align: right; float: right; .next-post { font-size: @font-size/1.1; font-weight: 500; } } } } .next-post-wrap, .previous-post-wrap { a { color: @dark-color; &:hover { color: @primary-color; } } position: relative; &:before { color: @primary-color; font-size: 2rem; font-weight: 300; font-family: Fontawesome; line-height: .65; position: absolute; top: -2rem; width: 32px; opacity: 0; visibility: hidden; -webkit-transition: all .2s; transition: all .2s; } &:hover { &:before { opacity: 1; visibility: visible; right: 0; } } } .next-post-wrap { &:before { content: '\f178'; right: 2rem; } } .previous-post-wrap { &:before { content: '\f177'; left: 2rem; } &:hover { &:before { opacity: 1; visibility: visible; left: 0; } } } blockquote { position: relative; font-size: @font-size+.3; margin-bottom: @font-size; p { font-size: @font-size+.3; } &:before { content: "“"; font-size: 7rem; position: absolute; top: -1rem; left: -3rem; line-height: 1; } } .post-content { ul { margin-bottom: @font-size; } } .says, .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .archive-title, .search-title { padding-bottom: 0; h1 { margin-bottom: 0; } } .search-results { .hentry { padding-bottom: 2rem; } } .error-content { .search-form { margin-top: @font-size; } input { box-sizing: border-box; } } .post-pagination { text-align: center; padding: 0 0 @font-size 0; .page-numbers { padding: .2rem; } .pagination .page-numbers.prev::before, .pagination .page-numbers.next::after { font-size: 2rem; font-weight: 300; font-family: Fontawesome; line-height: .65; position: absolute; top: .5rem; width: 32px; -webkit-transition: all .3s; transition: all .3s; } .pagination .next { padding-right: 3.3rem; } .pagination .page-numbers.next::after { content: '\f178'; right: 0; } .pagination .next:hover::after { right: -1rem; } .pagination .prev { padding-left: 3.3rem; } .pagination .page-numbers.prev::before { content: '\f177'; left: 0; } .pagination .prev:hover::before { left: -1rem; } } .gallery { display: flex; flex-flow: row wrap; justify-content: center; } .gallery-columns-3 { .gallery-item { width: 32%; } } .gallery-item { img { display: block; margin: 0 auto; } .gallery-icon { margin-bottom: 2rem; } } .post-password-form { label { display: inline-block; } } .top-bar { ul { margin-bottom: 0; } a, a:hover, a:active, a:focus, a:visited { color: #fff; } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { .top-bar { display: none; } } .top-bar .textwidget { display: inline-block; } /*-------------------------------------------------------------- Social Menu --------------------------------------------------------------*/ #menu-social-items a { color: @white-color; } .menu-social { z-index: 2; display: inline-block; } #menu-social, #menu-social-items { margin-left: 0px; vertical-align: top; } #menu-social-items li { padding: 0; text-align: center; font-size: 0.8em; position: relative; list-style-type: none; display: inline-block; height: 3rem; margin-left: .6rem; } .menu-social li a:before { display: inline-block; padding: 0; vertical-align: top; font-family: 'FontAwesome'; font-size: 1.4em; color: @white-color; -webkit-font-smoothing: antialiased; } .social-media-icons li:hover { background-color: #444; } .social-media-icons li:hover > a { color: #1ED3A4; } /* Menu uses Font Awesome icons */ .menu-social li a[href*="facebook.com"]::before { content: '\f09a'; } .menu-social li a[href*="twitter.com"]::before { content: '\f099'; } .menu-social li a[href*="github.com"]::before { content: '\f09b'; } .menu-social li a[href*="linkedin.com"]::before { content: '\f0e1'; } .menu-social li a[href*="wordpress.com"]::before, .menu-social li a[href*="wordpress.org"]::before { content: '\f19a'; } .menu-social li a[href*="tumblr.com"]::before { content: '\f173'; } .menu-social li a[href*="plus.google.com"]::before { content: '\f0d5'; } .menu-social li a[href*="dribbble.com"]::before { content: '\f17d'; } .menu-social li a[href*="instagram.com"]::before { content: '\f16d'; } .menu-social li a[href*="vimeo.com"]::before { content: '\f194'; } .menu-social li a[href*="youtube.com"]::before { content: '\f167'; } .menu-social li a[href*="pinterest.com"]::before { content: '\f0d2'; } .menu-social li a[href*="flickr.com"]::before { content: '\f16e'; } .menu-social li a[href*="bitbucket.com"]::before { content: '\f171'; } .menu-social li a[href*="digg.com"]::before { content: '\f1a6'; } .menu-social li a[href*="reddit.com"]::before { content: '\f1a1'; } .menu-social li a[href*="codepen.io"]::before { content: '\f1cb'; } .menu-social li a[href*="behance.com"]::before { content: '\f1b4'; } .menu-social li a[href*="slideshare.net"]::before { content: '\f1e7'; } .menu-social li a[href*="/feed"]::before { content: '\f413'; } .menu-social li a[href*="subscribe"]::before { content: '\f410'; } .menu-social li a span::before { width: 20px; height: 20px; color: #999; border-radius: 20px; } /* Skip link */ .skip-link { position: absolute; top: -50px !important; left: 10px; background-color: @white-color; color: @primary-color; border: 2px solid @primary-color; border-radius: 3px; padding: 6px 10px; z-index: 9; &:focus { top: 0 !important; } } .read-more { position: relative; background-color: @primary-color; color: @white-color; font-weight: 500; display: inline-block; border: 2px solid @primary-color; margin-top: @font-size; padding: .8rem @font-size*1.5; border-radius: 50px; box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.16); cursor: pointer; &::after { content: "\f0da"; font-family: 'FontAwesome'; font-size: @font-size; font-weight: 400; opacity: 0; transition: all .1s ease-in; } &:hover { color: @white-color; &::after { opacity: 1; margin-left: 5px; } } } /* Small devices (landscape phones, less than 768px) */ @media (max-width: 767.98px) { h1 { font-size: 3.6rem; } .columns, .column { margin-bottom: 3.2rem; } .columns:last-child { margin-bottom: 0; } } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }