/* * Theme Name: Waverly-php82 * Theme URI: https://themeforest.net/user/simplepixel/portfolio * Author: SimplePixel * Author URI: https://themeforest.net/user/simplepixel * Description: Elegant WordPress Blog Theme. This theme have many features such as page-builder, highly customizable, shortcodes, various post list layout, and many more. * Version: 1.0 * License: GNU General Public License v2 or later * License URI: http://www.gnu.org/licenses/gpl-2.0.html * Tags: custom-colors, custom-header, custom-menu, post-formats, left-sidebar, right-sidebar * Text Domain: waverly * Domain Path: /languages */ /** * TABLE OF CONTENTS * 0.0 CSS Reset * 1.0 Basic Styling * 2.0 Typography * 3.0 Transition Effect * 4.0 Link & Button Style * 5.0 Preloaders * 6.0 Menu * 7.0 Forms * 8.0 Carousel * 9.0 Popover * 10.0 Gallery * 11.0 Notification Block * 12.0 Posts Block * 13.0 Authors Block * 14.0 Category Block * 15.0 Icon Block * 16.0 Testimonials Block * 17.0 Call To Action Block * 18.0 Instagram Feed * 19.0 Subscribe Block * 20.0 Header * 21.0 Footer * 22.0 Widgets & Sidebars * 23.0 Featured Content * 24.0 Advertising * 25.0 Preloader * 26.0 Color Scheme * 27.0 Styling Helpers **/ /** * --------------------------------------------------------------------------- * 0.0 CSS Reset * * Resetting and rebuilding styles have been helped along thanks to the fine * work of Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html * along with Nicolas Gallagher and Jonathan Neal * http://necolas.github.com/normalize.css/ and Blueprint * http://www.blueprintcss.org/ * ---------------------------------------------------------------------------- **/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; z-index: 1; vertical-align: baseline; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } input[type=submit] { -webkit-appearance: none; border: none; outline: none; } img { max-width: 100%; } /** * ------------------------------------------------- * 1.0 Basic Styling * ------------------------------------------------- **/ #main, .content-area, .site-content, .main-content { position: relative; float: left; display: block; width: 100%; height: auto; background: #ffffff; } .site-content { overflow: hidden; } .site-main.footer-1 { z-index: 2; } /* Adjust Unyson container & column */ .fw-col-sm-12 { position: relative; float: left; } @media (min-width: 768px) { .fw-container { width: 750px; } } @media (min-width: 992px) { .fw-container { width: 970px; } } @media (min-width: 1200px) { .fw-container { width: 1170px; } } @media (max-width: 767px) { .main-row { margin: 0; } } /* hide photoswipe element on load */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 100000; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; outline: none; } /** * ------------------------------------------------- * 2.0 Typography * ------------------------------------------------- **/ *, p, html, body { font-family: 'Muli', sans-serif; font-weight: 400; font-size: 14px; } body { color: #777777; } address { line-height: 24px; } strong { font-weight: 800; } em { font-style: italic; } h1, h2, h3, h4, h5, h6, .font-title, .widget_calendar caption, .widget_calendar thead th, .widget_calendar #prev a, .widget_calendar #next a, .selectize-input > input, .widget_archive ul li, .widget_archive ul li span, .widget_categories ul li, .widget_categories ul li span, .widget_meta ul li, .widget_pages ul li, .widget_tag_cloud a, .widget_rss ul li a, .widget_rss cite, .selectize-input > *, .single-page .content-wrapper .content-container > blockquote p, .single-page .content-wrapper .content-container > p a, #comments .no-comments, .wrap-forms label, .wrap-forms .custom-checkbox label, .wrap-forms .custom-radio label, .blog-navigation-container .page-numbers, .single-page .content-wrapper .content-container > dl dt, .comment-text-container blockquote p, .comment-text-container dl dt, .comment-text-container p a, .type-page .entry-content > blockquote p, .type-page .entry-content > dl dt, .type-page .entry-content > p a { font-family: 'Muli', sans-serif; font-weight: 800; text-transform: capitalize; letter-spacing: 0; color: #262626; } /* placeholder style must be declared individually ( separated ) */ .selectize-input > input::-webkit-input-placeholder { font-family: 'Muli', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: #262626; } .selectize-input > input:-moz-placeholder { font-family: 'Muli', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: #262626; } .selectize-input > input::-moz-placeholder { font-family: 'Muli', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: #262626; } .selectize-input > input:-ms-input-placeholder { font-family: 'Muli', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: #262626; } h1 { font-size: 44px; line-height: 58px; letter-spacing: 0; } h2 { font-size: 40px; line-height: 54px; letter-spacing: 0; } h3 { font-size: 32px; line-height: 46px; } h4, h4 i, h4 b { font-size: 24px; line-height: 36px; } h5 { font-size: 18px; line-height: 30px; } h6 { font-size: 14px; line-height: 26px; } p { font-size: 14px; line-height: 26px; color: #777777; } h1.clearing { height: 0px; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #262626; } /* 2.1 Typography on mobile devices */ @media all and (max-width: 767px) { h1 { font-size: 34px; line-height: 48px; letter-spacing: -1px; } h2 { font-size: 30px; line-height: 44px; letter-spacing: -1px; } h3 { font-size: 22px; line-height: 36px; } h4 { font-size: 18px; line-height: 30px; } h5 { font-size: 16px; line-height: 28px; } h6 { font-size: 14px; line-height: 26px; } } /** * ------------------------------------------------- * 3.0 Transition Effect * ------------------------------------------------- **/ .sticky-header, .social-media-1, .custom-search-form .animated-border, .subscribe-form .animated-border, .comment-form .animated-border, .custom-search-form .custom-search-button .icon, .subscribe-form .custom-submit-button .icon, .menu-dropdown .menu > li a, .menu-dropdown .menu > .menu-item-has-children::after, .menu-dropdown .menu > li > ul .menu-item-has-children::after, .widget_nav_menu .menu > li a, .widget_nav_menu .menu > .menu-item-has-children::after, .widget_nav_menu .menu > li > ul .menu-item-has-children::after, .social-media-2, .social-media-3, .social-media-3::before, .menu-dropdown .menu ul, .widget_nav_menu .menu ul, .button-1, .button-1::before, .button-play, .main-color-link, .post-content .date .month, .post-content .date .day, .post-content .date .year, .custom-popover, .inline-text-link, .pagination-button-container .pagination-button, .preloader-container-pagination, .preloader-container-pagination-full, .pagination-button-container .load-more-container, .pagination-button-container .pagination-button .icon, .pagination-button-container, .smpixel-accordion .smpixel-accordion-title, .smpixel-accordion .smpixel-accordion-title .accordion-icon, .btn-group button[data-calendar-nav], .icon-block .icon i, .icon-block h6 a, .icon-block h6::before, .icon-block p, .subscribe-block .form-notif-container, .custom-search-form .custom-search-field, .subscribe-form .custom-field, .widget_calendar tbody a, .widget_calendar #prev a, .widget_calendar #next a, .widget_archive ul li span, .widget_archive ul li a, .widget_meta ul li a, .widget_pages ul li a, .widget_recent_entries ul li a, .widget_recent_comments ul li a, .widget_categories ul li span, .widget_categories ul li a, .widget_tag_cloud a, .widget_tag_cloud a::before, .widget_rss ul li a, .widget_text a, .widget_archive ul li a::before, .widget_categories ul li a::before, .widget_recent_comments ul li::before, .widget_recent_entries ul li::before, .widget_meta ul li a::before, .widget_pages ul li a::before, .widget-about-author .author-name h5, .widget_rss ul li::before, .twitter-feed-container ul li a, .widget_simplepixel_recent_comments .post-title .icon, .single-page .title-container .post-info a, .single-page .content-container a, .single-page .content-container a::before, .single-page .post-footer .share-container .post-footer-title a, #comments .comment-content-container .comment-edit-link, #comments .comment-content-container .reply a, #comments .comment-navigation a, #comments .comment-content-container .comment-edit-link, #comments .comment-content-container .reply a, #comments .comment-navigation .nav-next a::after, #comments .comment-navigation .nav-previous a::before, #comments .comment-respond .cancel-reply-button .icon, .attachment-image-nav .comment-navigation a, .attachment-image-nav .comment-navigation .nav-next a::after, .attachment-image-nav .comment-navigation .nav-previous a::before, .single-page .content-wrapper .post-pagination a, .single-page .content-wrapper .post-pagination a .icon, .type-page .type-page-content .post-pagination a, .type-page .type-page-content .post-pagination a .icon, .blog-navigation-container .page-numbers, .archive-empty-result .main-color-link::before, .archive-main-title-container.page-404-title .home-button, .comment-text-container p a, .comment-text-container p a::before, .widget_text p a::before, .type-page .entry-content > p a, .type-page .entry-content > p a::before, .single-page .post-password-form p input, .menu-dropdown .menu ul li, header .offcanvas-button .line, header .offcanvas-button .line::before, header .offcanvas-button .line::after, .menu-offcanvas .menu a, .menu-offcanvas .menu ul li, .menu-offcanvas .menu .menu-item-has-children > .sub-menu, .menu-offcanvas .menu .menu-item-has-children::after, .post-content .post-author a, .post-content .post-author a .name, .post-content .img-container .post-info-container .info-wrapper, .post-content .post-portrait-title .quote::before, .post-content .post-portrait-title .quote::after, .post-content .post-portrait-title .link span, .post-content .text-container .post-author .line, .post-portrait .post-share .icon, .post-portrait .post-share .text, .post-portrait-small .post-share .icon, .post-portrait-small .post-share .text, .post-landscape .post-share .icon, .post-landscape .post-share .text, .post-landscape-small .post-share .icon, .post-landscape-small .post-share .text, .post-content .post-label, .category-widget .post-label, .instagram-feed .username-link-container .line, .wrap-forms label, .subscribe-form .subscribe-field-container::after, .subscribe-block .form-label, .notification-block .notification-close .icon, .single-page > .title-container .bg-overlay, .single-page > .title-container.single-post-1 .title-text-container, .single-page .share-box .share-button-single, .single-page .share-box .share-button-single::before, .single-page .content-wrapper .content-container > dl a::before, .comment-text-container dl a::before, .type-page .entry-content > dl a::before, .single-page .content-wrapper .content-container > dl a, .comment-text-container dl a, .type-page .entry-content > dl a, .single-page .tags-container a, .single-page .article-navigation .text-container .post-title { -webkit-transition: all 0.3s ease 0ms; -moz-transition: all 0.3s ease 0ms; -ms-transition: all 0.3s ease 0ms; -o-transition: all 0.3s ease 0ms; transition: all 0.3s ease 0ms; } .post-content .img-container .link-overlay::after, .post-content, .button-default, .instagram-feed .feed .feed-overlay, .popup-search-container, .popup-search-container::before, .page-overlay, .instagram-feed .feed-info .info .feed-like, .instagram-feed .feed-info .info .feed-comment { -webkit-transition: all 0.5s ease 0ms; -moz-transition: all 0.5s ease 0ms; -ms-transition: all 0.5s ease 0ms; -o-transition: all 0.5s ease 0ms; transition: all 0.5s ease 0ms; } header, .post-portrait-small .post-label-icon, .post-landscape-small .post-label-icon, .post-portrait .img-container .img-overlay, .post-portrait-small .img-container .img-overlay, .post-landscape .img-container .img-overlay, .post-landscape-small .img-container .img-overlay, .post-image-bg .img-container .img-overlay, .post-portrait .featured-content-gallery .owl-item::before, .post-landscape .featured-content-gallery .owl-item::before, .post-image-bg .img-container .link-overlay::before, .carousel-container-outer .owl-slider-nav, .carousel-container-outer .owl-slider-nav .icon, .gallery-container .gallery-block .img-overlay, .gallery-container .gallery-block .text-container h6, .gallery-container .gallery-block .text-container::before, .instagram-feed .feed .feed-info::before, .widget_simplepixel_instagram .feed .feed-info .overlay, .single-page .article-navigation .text-container .post-title-container::before { -webkit-transition: all 0.5s cubic-bezier( 0.5, 1, 0.2, 1 ) 0s; -moz-transition: all 0.5s cubic-bezier( 0.5, 1, 0.2, 1 ) 0s; -ms-transition: all 0.5s cubic-bezier( 0.5, 1, 0.2, 1 ) 0s; -o-transition: all 0.5s cubic-bezier( 0.5, 1, 0.2, 1 ) 0s; transition: all 0.5s cubic-bezier( 0.5, 1, 0.2, 1 ) 0s; } .subscribe-block .form-notif.is-visible, .offcanvas-container, .custom-popover .popover-content .share-button-container li { -webkit-transition: all 0.5s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ); /* ease out back */ -moz-transition: all 0.5s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ); -ms-transition: all 0.5s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ); -o-transition: all 0.5s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ); transition: all 0.5s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ); } .subscribe-block .form-notif { -webkit-transition: all 0.5s cubic-bezier( 0.6, -0.28, 0.735, 0.045 ); /* ease in back */ -moz-transition: all 0.5s cubic-bezier( 0.6, -0.28, 0.735, 0.045 ); -ms-transition: all 0.5s cubic-bezier( 0.6, -0.28, 0.735, 0.045 ); -o-transition: all 0.5s cubic-bezier( 0.6, -0.28, 0.735, 0.045 ); transition: all 0.5s cubic-bezier( 0.6, -0.28, 0.735, 0.045 ); } .preloader-main { -webkit-transition: all 1s cubic-bezier( 0.6, -0.28, 0.735, 0.045 ); /* 1s ease in back */ -moz-transition: all 1s cubic-bezier( 0.6, -0.28, 0.735, 0.045 ); -ms-transition: all 1s cubic-bezier( 0.6, -0.28, 0.735, 0.045 ); -o-transition: all 1s cubic-bezier( 0.6, -0.28, 0.735, 0.045 ); transition: all 1s cubic-bezier( 0.6, -0.28, 0.735, 0.045 ); } .top-nav-bar .button-search::before, header .search-button-header::before, .menu-dropdown .menu ul li::before, .menu-dropdown .menu > li > a::before, .menu-offcanvas .menu > li > a::before, .popup-search-container .close-popup-search-button::before, .offcanvas-container .close-offcanvas-button::before, .post-content .category-container::before, .post-content .text-container .post-read-more-button::before, .icon-block h6::after, .icon-block h6::before, .icon-block h6 a::before, .social-media-1::before, .counter-block .number::before, .smpixel-accordion .smpixel-accordion-title .title-container::before, .smpixel-tabs-title h6 .text-container::before, .smpixel-tabs ul li::before, .author-list-wrapper .author-block .read-more-container a::before, .blog-navigation-container .page-numbers::before, .widget_nav_menu .menu > li a::before, .widget_nav_menu .menu ul li a::before, .widget_recent_comments .comment-author-link a::before { -webkit-transition: -webkit-transform 0.7s cubic-bezier( 0.19, 1, 0.22, 1 ); -moz-transition: -moz-transform 0.7s cubic-bezier( 0.19, 1, 0.22, 1 ); -ms-transition: -ms-transform 0.7s cubic-bezier( 0.19, 1, 0.22, 1 ); -o-transition: -o-transform 0.7s cubic-bezier( 0.19, 1, 0.22, 1 ); transition: transform 0.7s cubic-bezier( 0.19, 1, 0.22, 1 ); } .custom-search-form .search-field-container .line, .pagination-button-container .pagination-button::after { -webkit-transition: -webkit-transform 1.2s cubic-bezier( 0.19, 1, 0.22, 1 ); -moz-transition: -moz-transform 1.2s cubic-bezier( 0.19, 1, 0.22, 1 ); -ms-transition: -ms-transform 1.2s cubic-bezier( 0.19, 1, 0.22, 1 ); -o-transition: -o-transform 1.2s cubic-bezier( 0.19, 1, 0.22, 1 ); transition: transform 1.2s cubic-bezier( 0.19, 1, 0.22, 1 ); } .top-nav-bar .button-search, header .search-button-header, .post-content .post-author .line::before { -webkit-transition: all 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ); -moz-transition: all 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ); -ms-transition: all 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ); -o-transition: all 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ); transition: all 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ); } .category-widget .image-container img, .category-widget .overlay, .gallery-container .gallery-block img, .instagram-feed .feed img { -webkit-transition: all 10s cubic-bezier( 0.5, 1, 0.2, 1 ); -moz-transition: all 10s cubic-bezier( 0.5, 1, 0.2, 1 ); -ms-transition: all 10s cubic-bezier( 0.5, 1, 0.2, 1 ); -o-transition: all 10s cubic-bezier( 0.5, 1, 0.2, 1 ); transition: all 10s cubic-bezier( 0.5, 1, 0.2, 1 ); } /* transition effect in button-2 */ .button-2 { -webkit-transition: color 0.5s ease 0s; -moz-transition: color 0.5s ease 0s; -ms-transition: color 0.5s ease 0s; -o-transition: color 0.5s ease 0s; transition: color 0.5s ease 0s; } .button-2:hover { -webkit-transition: color 0.5s ease 0.15s; -moz-transition: color 0.5s ease 0.15s; -ms-transition: color 0.5s ease 0.15s; -o-transition: color 0.5s ease 0.15s; transition: color 0.5s ease 0.15s; } .button-2::before { -webkit-transition: border 0.5s ease 0s, background-color 0.5s ease 0s; -moz-transition: border 0.5s ease 0s, background-color 0.5s ease 0s; -ms-transition: border 0.5s ease 0s, background-color 0.5s ease 0s; -o-transition: border 0.5s ease 0s, background-color 0.5s ease 0s; transition: border 0.5s ease 0s, background-color 0.5s ease 0s; } .button-2:hover::before { -webkit-transition: border 0.5s ease 0s, background-color 0.5s ease 0.15s; -moz-transition: border 0.5s ease 0s, background-color 0.5s ease 0.15s; -ms-transition: border 0.5s ease 0s, background-color 0.5s ease 0.15s; -o-transition: border 0.5s ease 0s, background-color 0.5s ease 0.15s; transition: border 0.5s ease 0s, background-color 0.5s ease 0.15s; } /* end transition effect in button-2 */ /* transition effect in popup search form */ .popup-search-container .close-popup-search-button { -webkit-transition: -webkit-transform 0.5s ease 0.4s, opacity 0.5s ease 0.4s, visibility 0.5s ease 0.4s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -moz-transition: -moz-transform 0.5s ease 0.4s, opacity 0.5s ease 0.4s, visibility 0.5s ease 0.4s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -ms-transition: -ms-transform 0.5s ease 0.4s, opacity 0.5s ease 0.4s, visibility 0.5s ease 0.4s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -o-transition: -o-transform 0.5s ease 0.4s, opacity 0.5s ease 0.4s, visibility 0.5s ease 0.4s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; transition: transform 0.5s ease 0.4s, opacity 0.5s ease 0.4s, visibility 0.5s ease 0.4s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; } .custom-search-form .search-field-container { -webkit-transition: -webkit-transform 0.5s ease 0.7s, opacity 0.5s ease 0.7s, visibility 0.5s ease 0.7s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -moz-transition: -moz-transform 0.5s ease 0.7s, opacity 0.5s ease 0.7s, visibility 0.5s ease 0.7s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -ms-transition: -ms-transform 0.5s ease 0.7s, opacity 0.5s ease 0.7s, visibility 0.5s ease 0.7s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -o-transition: -o-transform 0.5s ease 0.7s, opacity 0.5s ease 0.7s, visibility 0.5s ease 0.7s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; transition: transform 0.5s ease 0.7s, opacity 0.5s ease 0.7s, visibility 0.5s ease 0.7s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; } .popup-search-container .popup-search-form-label { -webkit-transition: -webkit-transform 0.5s ease 1.2s, opacity 0.5s ease 1.2s, visibility 0.5s ease 1.2s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -moz-transition: -moz-transform 0.5s ease 1.2s, opacity 0.5s ease 1.2s, visibility 0.5s ease 1.2s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -ms-transition: -ms-transform 0.5s ease 1.2s, opacity 0.5s ease 1.2s, visibility 0.5s ease 1.2s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -o-transition: -o-transform 0.5s ease 1.2s, opacity 0.5s ease 1.2s, visibility 0.5s ease 1.2s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; transition: transform 0.5s ease 1.2s, opacity 0.5s ease 1.2s, visibility 0.5s ease 1.2s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; } /* end transition effect in popup search form */ /* transition effect in off canvas menu */ .offcanvas-container .close-offcanvas-button { -webkit-transition: -webkit-transform 0.5s ease 0.6s, opacity 0.5s ease 0.6s, visibility 0.5s ease 0.6s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -moz-transition: -moz-transform 0.5s ease 0.6s, opacity 0.5s ease 0.6s, visibility 0.5s ease 0.6s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -ms-transition: -ms-transform 0.5s ease 0.6s, opacity 0.5s ease 0.6s, visibility 0.5s ease 0.6s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; -o-transition: -o-transform 0.5s ease 0.6s, opacity 0.5s ease 0.6s, visibility 0.5s ease 0.6s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; transition: transform 0.5s ease 0.6s, opacity 0.5s ease 0.6s, visibility 0.5s ease 0.6s, color 0.5s cubic-bezier( 0.19, 1, 0.22, 1 ) 0ms; } .offcanvas-logo { -webkit-transition: -webkit-transform 0.5s ease 0.9s, opacity 0.5s ease 0.9s, visibility 0.5s ease 0.9s; -moz-transition: -moz-transform 0.5s ease 0.9s, opacity 0.5s ease 0.9s, visibility 0.5s ease 0.9s; -ms-transition: -ms-transform 0.5s ease 0.9s, opacity 0.5s ease 0.9s, visibility 0.5s ease 0.9s; -o-transition: -o-transform 0.5s ease 0.9s, opacity 0.5s ease 0.9s, visibility 0.5s ease 0.9s; transition: transform 0.5s ease 0.9s, opacity 0.5s ease 0.9s, visibility 0.5s ease 0.9s; } .main-menu-mobile .menu-dropdown-mobile, .offcanvas-menu-wrapper .menu-offcanvas { -webkit-transition: -webkit-transform 0.5s ease 1.2s, opacity 0.5s ease 1.2s, visibility 0.5s ease 1.2s; -moz-transition: -moz-transform 0.5s ease 1.2s, opacity 0.5s ease 1.2s, visibility 0.5s ease 1.2s; -ms-transition: -ms-transform 0.5s ease 1.2s, opacity 0.5s ease 1.2s, visibility 0.5s ease 1.2s; -o-transition: -o-transform 0.5s ease 1.2s, opacity 0.5s ease 1.2s, visibility 0.5s ease 1.2s; transition: transform 0.5s ease 1.2s, opacity 0.5s ease 1.2s, visibility 0.5s ease 1.2s; } .offcanvas-menu-wrapper .offcanvas-sidebar { -webkit-transition: -webkit-transform 0.5s ease 1.5s, opacity 0.5s ease 1.5s, visibility 0.5s ease 1.5s; -moz-transition: -moz-transform 0.5s ease 1.5s, opacity 0.5s ease 1.5s, visibility 0.5s ease 1.5s; -ms-transition: -ms-transform 0.5s ease 1.5s, opacity 0.5s ease 1.5s, visibility 0.5s ease 1.5s; -o-transition: -o-transform 0.5s ease 1.5s, opacity 0.5s ease 1.5s, visibility 0.5s ease 1.5s; transition: transform 0.5s ease 1.5s, opacity 0.5s ease 1.5s, visibility 0.5s ease 1.5s; } /* end transition effect in off canvas menu */ /* transition effect in share popover */ .custom-popover .popover-content .share-button-container li, .custom-popover.is-visible .popover-content .share-button-container li:nth-child( 1 ) { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .custom-popover.is-visible .popover-content .share-button-container li:nth-child( 2 ) { -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .custom-popover.is-visible .popover-content .share-button-container li:nth-child( 3 ) { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .custom-popover.is-visible .popover-content .share-button-container li:nth-child( 4 ) { -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -ms-transition-delay: 0.9s; -o-transition-delay: 0.9s; transition-delay: 0.9s; } .custom-popover.is-visible .popover-content .share-button-container li:nth-child( 5 ) { -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -ms-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } /* end transition effect in share popover */ /* transition effect in post info above featured image */ .post-content:hover .img-container .post-info-container .info-wrapper:nth-child( 1 ) { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .post-content:hover .img-container .post-info-container .info-wrapper:nth-child( 2 ) { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -ms-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .post-content:hover .img-container .post-info-container .info-wrapper:nth-child( 3 ) { -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } /* end transition effect in post info above featured image */ /* transition effect in instagram feed */ .instagram-feed .feed:hover .info .feed-like, .instagram-feed .feed:hover .info .feed-comment { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .instagram-feed .feed:hover .info .feed-comment { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } /* end transition effect in instagram feed */ /* transition effect in image gallery shortcode */ .gallery-container .gallery-block .text-container h6 { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .gallery-container .gallery-block .text-container::before { -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -ms-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } /* end transition effect in image gallery shortcode */ /* transition effect in form */ .subscribe-form .subscribe-field-container.is-focus::after, .wrap-forms .form-label, .subscribe-block .form-label { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .wrap-forms .form-label.is-focus, .subscribe-block .form-label.is-focus, .subscribe-form .subscribe-field-container::after { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -ms-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } /* end transition effect in form */ /** * ------------------------------------------------- * 4.0 Link & Button Style * ------------------------------------------------- **/ /* 4.1 social media - text uppercase style */ .social-media-1 { position: relative; display: inline-block; font-size: 11px; color: #868686; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; line-height: normal; } .social-media-1::before { content: ''; position: absolute; display: block; bottom: 5px; left: -2px; height: 4px; width: 100%; z-index: -1; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .social-media-1:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } /* 4.2 social media - small icon style */ .social-media-2 { position: relative; display: inline-block; font-size: 16px; color: #262626; margin: 0 7px; } /* 4.3 social media - icon with background style */ .social-media-3 { position: relative; display: inline-block; width: 40px; height: 40px; font-size: 14px; line-height: 41px; text-align: center; color: #262626; -webkit-box-shadow: inset 0 0 0 2px #262626; -moz-box-shadow: inset 0 0 0 2px #262626; box-shadow: inset 0 0 0 2px #262626; margin: 0 2px; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .social-media-3:hover { color: #ffffff; } .social-media-3::before { content: ''; position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; -webkit-backface-visibility: hidden; -webkit-transform: translateY( 100% ); -moz-transform: translateY( 100% ); -ms-transform: translateY( 100% ); -o-transform: translateY( 100% ); transform: translateY( 100% ); } .social-media-3:hover::before { -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } /* 4.4 button style */ .button-default { position: relative; display: inline-block; color: #ffffff; } .button-default:hover { background: #262626; } .button-1 { position: relative; display: inline-block; font-family: 'Muli', sans-serif; font-weight: 400; -webkit-backface-visibility: hidden; color: #ffffff; -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .button-1:hover { background: none; -webkit-transform: translateY( -2px ); -moz-transform: translateY( -2px ); -ms-transform: translateY( -2px ); -o-transform: translateY( -2px ); transform: translateY( -2px ); } .button-1:hover::before { background: #262626; -webkit-box-shadow: 0 8px 6px -6px #000000; -moz-box-shadow: 0 8px 6px -6px #000000; box-shadow: 0 8px 6px -6px #000000; } .button-2 { position: relative; display: inline-block; font-family: 'Muli', sans-serif; font-weight: 800; text-transform: uppercase; color: #262626; -webkit-backface-visibility: hidden; overflow: hidden; } .button-2:hover { color: #ffffff; } .button-2::before, .button-1::before { content: ''; position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; border: 2px solid #262626; z-index: -1; } .button-1::before { border: none; } .button-play { display: inline-block; font-size: 40px; height: 32px; } .button-play::before { content: "\e01a"; font-family: "dripicons-v2"; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 4.9 Button Size */ .button-small { letter-spacing: 3px; text-transform: uppercase; font-size: 9px; font-weight: 800; } .button-medium { letter-spacing: 4px; text-transform: uppercase; font-size: 11px; font-weight: 800; } .button-large { letter-spacing: 6px; text-transform: uppercase; font-size: 12px; font-weight: 800; } .button-rounded.button-large { height: 55px; text-align: center; padding: 0 50px; line-height: 55px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -o-border-radius: 40px; -ms-border-radius: 40px; border-radius: 40px; } .button-1.button-rounded.button-large::before, .button-2.button-rounded.button-large::before { -webkit-border-radius: 40px; -moz-border-radius: 40px; -o-border-radius: 40px; -ms-border-radius: 40px; border-radius: 40px; } .button-rounded.button-medium { height: 45px; text-align: center; padding: 0 40px; line-height: 45px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; } .button-1.button-rounded.button-medium::before, .button-2.button-rounded.button-medium::before { -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; } .button-rounded.button-small { height: 35px; text-align: center; padding: 0 30px; line-height: 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; } .button-1.button-rounded.button-small::before, .button-2.button-rounded.button-small::before { -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; -ms-border-radius: 20px; border-radius: 20px; } /* 4.13 Button Theme */ .button-default-bg, .button-play:hover { color: #FFFFFF; } /* 4.5 Category Icon */ .category-icon { position: absolute; display: block; right: 0; top: 15px; width: 50px; height: 50px; text-align: center; line-height: 57px; z-index: 2; -webkit-backface-visibility: hidden; } .category-icon .icon { color: #FFFFFF; font-size: 20px; } /* 4.6 Inline text link */ .inline-text-link { position: relative; display: inline-block; font-size: 11px; text-transform: uppercase; } .inline-text-link .icon { font-size: 9px; } /* 4.7 Pagination button */ .pagination-button-container { position: relative; float: left; display: block; width: 100%; list-style: none; padding: 0; text-align: center; margin: 30px 0 50px 0; } .pagination-button-container.no-height { height: 0; margin: 0; } .pagination-button-container li { position: relative; display: inline-block; padding: 0; } .pagination-button-container .pagination-button { position: relative; display: inline-block; width: auto; height: 45px; line-height: 40px; padding: 0 17px; border: none; font-size: 12px; color: #262626; -webkit-backface-visibility: hidden; margin: 0 1px 3px 1px; } .pagination-button-container .load-more-container { position: relative; z-index: 2; opacity: 1; visibility: visible; } .pagination-button-container .load-more-container.is-hidden { opacity: 0; visibility: hidden; } .pagination-button-container .pagination-load-more { width: 100%; } .pagination-button-container .pagination-button.load-more { display: block; padding: 0 35px; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: #262626; border: none; margin: 0; } .pagination-button-container .load-more .icon { position: relative; display: inline-block; font-size: 10px; margin-left: 3px; color: #262626; -webkit-transform: translateY( 1px ); -moz-transform: translateY( 1px ); -ms-transform: translateY( 1px ); -o-transform: translateY( 1px ); transform: translateY( 1px ); } .pagination-button-container .pagination-button::before, .pagination-button-container .pagination-button::after { content: ''; position: absolute; display: block; left: 0; bottom: 0; width: 100%; height: 5px; z-index: 1; background: #EEEEEE; -webkit-backface-visibility: hidden; } .pagination-button-container .pagination-button::after { -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; z-index: 2; } .pagination-button-container .pagination-button:hover::after, .pagination-button-container .pagination-button.active::after { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } /* 4.11 Featured post icon */ .featured-icon { position: absolute; display: block; right: 15px; top: 8px; width: 30px; height: 30px; text-align: right; z-index: 2; -webkit-backface-visibility: hidden; pointer-events: none; } .featured-icon .icon { font-size: 30px; } /* 4.12 Blog view pagination */ .blog-navigation-container { position: relative; float: left; width: 100%; margin: 50px 0 100px 0; text-align: center; } .blog-navigation-container .pagination { position: relative; display: block; float: left; width: 100%; border: none; } .blog-navigation-container .page-numbers { position: relative; display: inline-block; width: auto; height: 45px; line-height: 40px; padding: 0 17px; margin: 0 1px 3px 1px; border-bottom: 5px solid #EEEEEE; font-size: 12px; color: #262626; text-transform: uppercase; -webkit-backface-visibility: hidden; } .blog-navigation-container .page-numbers::before { content: ''; position: absolute; display: block; left: 0; bottom: -5px; width: 100%; height: 5px; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .blog-navigation-container .page-numbers:hover::before, .blog-navigation-container .page-numbers.current::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .blog-navigation-container .page-numbers.next, .blog-navigation-container .page-numbers.prev { padding: 0 35px; font-size: 11px; letter-spacing: 2px; margin: 0 0 3px 0; } .blog-navigation-container .page-numbers.prev { float: left; } .blog-navigation-container .page-numbers.next { float: right; } .blog-navigation-container .page-numbers.next::after { content: "\f178"; font-family: 'FontAwesome'; position: relative; display: inline-block; margin-left: 10px; } .blog-navigation-container .page-numbers.prev::after { content: "\f177"; font-family: 'FontAwesome'; position: relative; float: left; display: inline-block; margin-right: 10px; -webkit-transform: translateY( 1px ); -moz-transform: translateY( 1px ); -ms-transform: translateY( 1px ); -o-transform: translateY( 1px ); transform: translateY( 1px ); } @media all and (max-width: 450px) { .blog-navigation-container .page-numbers.next, .blog-navigation-container .page-numbers.prev { padding: 0; } } /** * ------------------------------------------------- * 5.0 Preloaders * ------------------------------------------------- **/ .preloader-container-pagination, .preloader-container-pagination-full { position: absolute;; display: block; left: 0; top: 0; width: 100%; height: 42px; opacity: 1; visibility: visible; z-index: 1; } .preloader-container-pagination.is-hidden, .preloader-container-pagination-full.is-hidden { opacity: 0; visibility: hidden; } .preloader-container-pagination-full { padding: 0; height: 100%; z-index: 3; } .preloader-container-pagination-full .preloader-wrapper { position: relative; float: left; display: block; width: 100%; height: 100%; background: rgba( 255, 255, 255, 0.8 ); } .preloader { position: relative; display: inline-block; -webkit-backface-visibility: hidden; } .preloader-container-pagination-full .preloader { position: absolute; display: inline-block; top: 50%; left: 50%; -webkit-transform: translate( -50%, -50% ); -moz-transform: translate( -50%, -50% ); -ms-transform: translate( -50%, -50% ); -o-transform: translate( -50%, -50% ); transform: translate( -50%, -50% ); } /* 5.1 Preloaders - Spinner morph */ .spinner-morph { position: relative; display: inline-block; width: 40px; height: 40px; -webkit-animation: cp-morph-animate 1s linear infinite; animation: cp-morph-animate 1s linear infinite; } .preloader-main .spinner-morph { margin: -20px 0 0 -20px; } .preloader-main.is-hidden .spinner-morph, .preloader-container-pagination-full.is-hidden .spinner-morph, .preloader-container-pagination.is-hidden .spinner-morph { -webkit-animation: cp-morph-animate 1s linear infinite paused; animation: cp-morph-animate 1s linear infinite paused; } @-webkit-keyframes cp-morph-animate { 0% { transform: rotate( 0 ) scale( 1 ); border-radius: 0; } 25%, 75% { transform: rotate( 180deg ) scale( .4 ); border-radius: 50%; } 100% { transform: rotate( 360deg ) scale( 1 ); border-radius: 0; } } @keyframes cp-morph-animate { 0% { transform: rotate( 0 ) scale( 1 ); border-radius: 0; } 25%, 75% { transform: rotate( 180deg ) scale( .4 ); border-radius: 50%; } 100% { transform: rotate( 360deg ) scale( 1 ); border-radius: 0; } } /* 5.2 Preloaders - Half Wheel */ .half-wheel-container { width: 50px; height: 25px; overflow: hidden; margin-left: -1px; } .half-wheel { position: relative; display: inline-block; width: 50px; height: 50px; border-style: solid; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; box-sizing: border-box; -webkit-transform: rotate( -200deg ); -moz-transform: rotate( -200deg ); -ms-transform: rotate( -200deg ); -o-transform: rotate( -200deg ); transform: rotate( -200deg ); -webkit-animation: rotate-half-wheel 2s ease-in-out infinite; animation: rotate-half-wheel 2s ease-in-out infinite; } .preloader-main.is-hidden .half-wheel, .preloader-container-pagination-full.is-hidden .half-wheel, .preloader-container-pagination.is-hidden .half-wheel { -webkit-animation: cp-morph-animate 1s linear infinite paused; animation: cp-morph-animate 1s linear infinite paused; } @-webkit-keyframes rotate-half-wheel { 0% { border-width: 3px; } 50% { transform: rotate( 115deg ); border-width: 3px; } 100% { border-width: 3px; } } @keyframes rotate-half-wheel { 0% { border-width: 3px; } 50% { transform: rotate( 115deg ); border-width: 3px; } 100% { border-width: 3px; } } /** * ------------------------------------------------- * 6.0 Menu * ------------------------------------------------- **/ /* page overlay will visible when opening offcanvas menu */ .page-overlay { position: fixed; display: block; left: 0; top: 0; width: 100%; height: 100%; background: rgba( 246, 246, 246, 0.9 ); opacity: 0; visibility: hidden; z-index: 9; } .page-overlay.is-visible { opacity: 1; visibility: visible; } /* 6.1 menu off-canvas */ .offcanvas-container { position: fixed; display: block; visibility: hidden; left: 0; top: 0; width: 400px; height: 100%; overflow: auto; padding-right: 19px; background: #262626; z-index: 11; -webkit-transform: translateX( -100% ); -moz-transform: translateX( -100% ); -ms-transform: translateX( -100% ); -o-transform: translateX( -100% ); transform: translateX( -100% ); } .offcanvas-container::before { content: ''; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; width: calc( 100% - 30px ); height: calc( 100% - 30px ); top: calc( 0% + 15px ); left: calc( 0% + 15px ); border: 4px solid rgba( 255, 255, 255, 0.3 ); z-index: 2; } .admin-bar .offcanvas-container::before { height: calc( 100% - 30px - 32px ); } .offcanvas-container.is-visible { visibility: visible; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); } .admin-bar .offcanvas-container { top: 32px; } .offcanvas-container .bg-overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: rgba( 255, 255, 255, 0 ); } .offcanvas-container .close-offcanvas-button { position: absolute; display: block; width: 50px; height: 50px; right: 19px; top: 19px; text-align: center; line-height: 58px; color: #ffffff; z-index: 3; -webkit-backface-visibility: hidden; } .offcanvas-container .close-offcanvas-button { opacity: 0; visibility: hidden; -webkit-transform: scale( 1.2 ); -moz-transform: scale( 1.2 ); -ms-transform: scale( 1.2 ); -o-transform: scale( 1.2 ); transform: scale( 1.2 ); } .offcanvas-container.is-visible .close-offcanvas-button { opacity: 1; visibility: visible; -webkit-transform: scale( 1 ); -moz-transform: scale( 1 ); -ms-transform: scale( 1 ); -o-transform: scale( 1 ); transform: scale( 1 ); } .offcanvas-container .close-offcanvas-button::before { content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #ffffff; z-index: -1; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .offcanvas-container .close-offcanvas-button:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .offcanvas-container .close-offcanvas-button .icon { font-size: 22px; } .offcanvas-container .main-menu-container { position: relative; float: left; display: block; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; top: 20px; height: calc( 100% - 40px ); padding: 0 0 0 19px; z-index: 2; } .admin-bar .offcanvas-container .main-menu-container { height: calc( 100% - 40px - 32px ); } .offcanvas-container .main-menu-container .menu-dropdown-mobile { opacity: 0; visibility: hidden; -webkit-transform: translateX( -25px ); -moz-transform: translateX( -25px ); -ms-transform: translateX( -25px ); -o-transform: translateX( -25px ); transform: translateX( -25px ); } .offcanvas-container.is-visible .main-menu-container .menu-dropdown-mobile { opacity: 1; visibility: visible; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); } .offcanvas-container .logo-container { position: relative; float: left; width: 100%; padding: 30px 0; height: auto; border-bottom: 1px solid rgba( 255, 255, 255, 0.1 ); text-align: center; } .offcanvas-container .logo-container .offcanvas-logo { display: inline-block; width: auto; height: 70px; opacity: 0; visibility: hidden; -webkit-transform: translateY( -25px ); -moz-transform: translateY( -25px ); -ms-transform: translateY( -25px ); -o-transform: translateY( -25px ); transform: translateY( -25px ); } .offcanvas-container.is-visible .logo-container .offcanvas-logo { opacity: 1; visibility: visible; -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .offcanvas-container .notif-setup-menu { color: #f4f4f4; font-size: 12px; margin-left: 0; } .offcanvas-container .offcanvas-menu-container { position: relative; float: left; width: 100%; margin-top: 15px; } .offcanvas-container .offcanvas-menu-container .offcanvas-sidebar-container { position: relative; display: block; float: left; width: 100%; margin-top: 30px; } .offcanvas-container .offcanvas-menu-container .offcanvas-sidebar { position: relative; float: left; display: block; width: 100%; opacity: 0; visibility: hidden; -webkit-transform: translateX( -25px ); -moz-transform: translateX( -25px ); -ms-transform: translateX( -25px ); -o-transform: translateX( -25px ); transform: translateX( -25px ); } .offcanvas-container.is-visible .offcanvas-menu-container .offcanvas-sidebar { opacity: 1; visibility: visible; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); } .menu-offcanvas { position: relative; float: left; width: 100%; padding-left: 15px; opacity: 0; visibility: hidden; -webkit-transform: translateX( -25px ); -moz-transform: translateX( -25px ); -ms-transform: translateX( -25px ); -o-transform: translateX( -25px ); transform: translateX( -25px ); } .offcanvas-container.is-visible .menu-offcanvas { opacity: 1; visibility: visible; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); } .menu-offcanvas .menu { position: relative; display: block; float: left; width: 100%; height: auto; padding: 0; list-style: none; } .menu-offcanvas .menu li { position: relative; display: block; float: left; width: 100%; height: auto; } .menu-offcanvas .menu a { position: relative; display: inline-block; font-family: 'Muli', sans-serif; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 4px; color: #f4f4f4; padding: 10px 0; } .menu-offcanvas .menu ul li > a { font-weight: 800; font-size: 10px; } .menu-offcanvas .menu ul li > a:hover, .menu-offcanvas .menu ul li.current-menu-item > a, .menu-offcanvas .menu ul li.current-menu-ancestor > a { padding-left: 7px; } .menu-offcanvas .menu .menu-item-has-children { cursor: pointer; } .menu-offcanvas .menu .menu-item-has-children::after { content: '\e01c'; font-family: 'dripicons-v2'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: normal; position: absolute; display: block; right: 15px; top: 13px; font-size: 8px; color: #f4f4f4; -webkit-transform: rotate( 0deg ); -moz-transform: rotate( 0deg ); -ms-transform: rotate( 0deg ); -o-transform: rotate( 0deg ); transform: rotate( 0deg ); } .menu-offcanvas .menu .menu-item-has-children.arrow-up::after { -webkit-transform: rotate( 180deg ); -moz-transform: rotate( 180deg ); -ms-transform: rotate( 180deg ); -o-transform: rotate( 180deg ); transform: rotate( 180deg ); } .menu-offcanvas .sub-menu { padding-left: 20px; } .menu-offcanvas .menu .sub-menu { height: 0; overflow: hidden; } /* 6.2 menu off-canvas on extra small devices (iPhone 6 plus and below) */ @media all and (max-width: 800px) { .offcanvas-container { width: 100%; } } @media screen and (max-width: 782px) { .admin-bar .offcanvas-container { top: 46px; } .admin-bar .offcanvas-container .main-menu-container { height: calc( 100% - 40px - 46px ); } .admin-bar .offcanvas-container::before { height: calc( 100% - 30px - 46px ); } } @media screen and (max-width: 768px) { .offcanvas-container .offcanvas-menu-container .offcanvas-sidebar { padding: 0 15px; } } @media all and (max-width: 600px) { .admin-bar .offcanvas-container { top: 0; z-index: 999999; } .admin-bar .offcanvas-container::before { height: calc( 100% - 30px ); } .admin-bar .offcanvas-container .main-menu-container { height: calc( 100% - 40px ); } } /* 6.3 Dropdown menu */ .menu-dropdown, .widget_nav_menu { position: relative; float: left; display: block; width: 100%; height: auto; } .menu-dropdown .menu, .widget_nav_menu .menu { position: relative; display: block; width: auto; list-style: none; padding: 0; } .menu-dropdown .menu > li a, .widget_nav_menu .menu > li a { position: relative; display: block; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 4px; color: #262626; padding: 22px 0; } .menu-dropdown .menu > li > a::before, .menu-offcanvas .menu > li > a::before { content: ''; position: absolute; display: block; bottom: 28px; left: -2px; height: 4px; width: 100%; z-index: -1; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } @-moz-document url-prefix() { .header-3 .menu-dropdown .menu > li > a::before { bottom: 27px; } } .menu-dropdown.top-nav-menu .menu > li > a::before { bottom: 24px; } @-moz-document url-prefix() { .menu-dropdown.top-nav-menu .menu > li > a::before { bottom: 23px; } } .menu-offcanvas .menu > li > a::before { bottom: 16px; } .menu-dropdown .menu > li:hover > a::before, .menu-offcanvas .menu > li > a:hover::before, .menu-offcanvas .menu .current-menu-item > a::before, .menu-offcanvas .menu .current-menu-ancestor > a::before, .menu-dropdown .menu > li.current-menu-ancestor > a::before, .menu-dropdown .menu > li.current-menu-item > a::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .menu-dropdown .menu > .menu-item-has-children::after, .menu-dropdown .menu > li > ul .menu-item-has-children::after, .widget_nav_menu .menu > .menu-item-has-children::after, .widget_nav_menu .menu > li > ul .menu-item-has-children::after { content: '\e01c'; font-family: 'dripicons-v2'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: normal; position: absolute;; display: inline-block; right: -15px; top: 25px; margin-left: 10px; font-size: 8px; color: #262626; } .menu-dropdown.top-nav-menu .menu > .menu-item-has-children::after, .menu-dropdown.top-nav-menu .menu > li > ul .menu-item-has-children::after { top: 20px; } .menu-dropdown .menu > li > ul .menu-item-has-children::after, .widget_nav_menu .menu > li > ul .menu-item-has-children::after { content: '\e01c'; position: absolute; right: 15px; top: 17px; color: #6b6b6b; } .menu-dropdown.top-nav-menu .menu > li > ul .menu-item-has-children::after { top: 18px; } .menu-dropdown .menu ul li { border-bottom: 2px solid #e9e9e9; } .widget_nav_menu .menu ul li { border-bottom: 2px solid rgba( 100, 100, 100, 0.1 ); } .menu-dropdown .menu ul li:hover > a, .menu-dropdown .menu ul li.current-menu-item > a, .menu-dropdown .menu ul li.current-menu-ancestor > a, .top-nav-bar .menu-dropdown .menu ul li:hover > a, .top-nav-bar .menu-dropdown .menu ul li.current-menu-item > a, .top-nav-bar .menu-dropdown .menu ul li.current-menu-ancestor > a { padding-left: 22px; } .menu-dropdown .menu ul li::before { content: ''; position: absolute; display: block; bottom: -2px; left: 0; width: 100%; height: 2px; background: #06d6a0; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .menu-dropdown .menu ul li:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .menu-dropdown .menu ul li a, .widget_nav_menu .menu ul li a { position: relative; display: block; font-weight: 800; font-size: 10px; padding: 15px; text-transform: uppercase; letter-spacing: 4px; color: #262626; } .menu-dropdown .menu > li, .widget_nav_menu .menu > li { position: relative; display: inline-block; margin-right: 30px; text-align: left; } .menu-dropdown .menu > li:hover { z-index: 2; } .menu-dropdown .menu > li.menu-item-has-children, .widget_nav_menu .menu > li.menu-item-has-children { margin-right: 45px; } .menu-dropdown .menu ul li, .widget_nav_menu .menu ul li { background: #f7f7f7; } .menu-dropdown .menu > li > ul, .widget_nav_menu .menu > li > ul { position: absolute; list-style: none; width: 230px; display: block; margin-top: 0; opacity: 0; visibility: hidden; -webkit-transform: scale( 0.9 ); -moz-transform: scale( 0.9 ); -ms-transform: scale( 0.9 ); -o-transform: scale( 0.9 ); transform: scale( 0.9 ); } .menu-dropdown.top-nav-menu .menu > li > ul { margin-top: 0; } .menu-dropdown .menu > li > ul > li, .widget_nav_menu .menu > li > ul > li { position: relative; width: 100%; display: block; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; } .menu-dropdown.menu-dropdown-mobile .menu > li.is-open > ul > li:first-child { margin-top: -10px; } .menu-dropdown .menu > li > ul > li > ul, .widget_nav_menu .menu > li > ul > li > ul { position: absolute; width: 100%; height: auto; list-style: none; top: 0; right: -230px; display: block; opacity: 0; visibility: hidden; -webkit-transform: rotateY( 90deg ); -moz-transform: rotateY( 90deg ); -ms-transform: rotateY( 90deg ); -o-transform: rotateY( 90deg ); transform: rotateY( 90deg ); -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; -ms-transform-origin: 0% 50%; -o-transform-origin: 0% 50%; transform-origin: 0% 50%; } .menu-dropdown .menu > li > ul > li > ul > li ul { list-style: none; } .menu-dropdown .menu > li > ul { right: 8000px; -webkit-transition: opacity 0.3s ease 0ms, visibility 0.3s ease 0ms, right 0s ease 100ms, -webkit-transform 0.3s ease 0ms; -moz-transition: opacity 0.3s ease 0ms, visibility 0.3s ease 0ms, right 0s ease 100ms, -moz-transform 0.3s ease 0ms; -ms-transition: opacity 0.3s ease 0ms, visibility 0.3s ease 0ms, right 0s ease 100ms, -ms-transform 0.3s ease 0ms; -o-transition: opacity 0.3s ease 0ms, visibility 0.3s ease 0ms, right 0s ease 100ms, -o-transform 0.3s ease 0ms; transition: opacity 0.3s ease 0ms, visibility 0.3s ease 0ms, right 0s ease 100ms, transform 0.3s ease 0ms; } .menu-dropdown .menu > li > ul > li > ul { -webkit-transition: opacity 0.4s ease 0ms, visibility 0.4s ease 0ms, right 0s ease 100ms, -webkit-transform 0.4s ease 0ms; -moz-transition: opacity 0.4s ease 0ms, visibility 0.4s ease 0ms, right 0s ease 100ms, -moz-transform 0.4s ease 0ms; -ms-transition: opacity 0.4s ease 0ms, visibility 0.4s ease 0ms, right 0s ease 100ms, -ms-transform 0.4s ease 0ms; -o-transition: opacity 0.4s ease 0ms, visibility 0.4s ease 0ms, right 0s ease 100ms, -o-transform 0.4s ease 0ms; transition: opacity 0.4s ease 0ms, visibility 0.4s ease 0ms, right 0s ease 100ms, transform 0.4s ease 0ms; } .menu-dropdown .menu > li:hover > ul, .widget_nav_menu .menu > li:hover > ul, .widget_nav_menu .menu > li > ul > li:hover > ul, .widget_nav_menu .menu > li > ul > li > ul:hover { right: -230px; opacity: 1; visibility: visible; -webkit-transform: scale( 1 ); -moz-transform: scale( 1 ); -ms-transform: scale( 1 ); -o-transform: scale( 1 ); transform: scale( 1 ); -webkit-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -webkit-transform 0.3s ease 100ms; -moz-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -moz-transform 0.3s ease 100ms; -ms-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -ms-transform 0.3s ease 100ms; -o-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -o-transform 0.3s ease 100ms; transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, transform 0.3s ease 100ms; } .menu-dropdown .menu > li > ul > li:hover > ul, .menu-dropdown .menu > li > ul > li > ul:hover { right: -230px; opacity: 1; visibility: visible; -webkit-transform: rotateY( 0deg ); -moz-transform: rotateY( 0deg ); -ms-transform: rotateY( 0deg ); -o-transform: rotateY( 0deg ); transform: rotateY( 0deg ); } .menu-dropdown .menu > li:hover > ul, .widget_nav_menu .menu > li:hover > ul, .widget_nav_menu .menu > li > ul > li:hover > ul, .widget_nav_menu .menu > li > ul > li > ul:hover { right: inherit; } .menu-dropdown .menu > li > ul > li > ul > li, .widget_nav_menu .menu > li > ul > li > ul > li { position: relative;; width: 100%; display: block; } .widget_nav_menu .divider { position: relative; display: none; width: 30px; height: 5px; background: rgba( 100, 100, 100, 0.1 ); margin: 30px 0 20px 0; } /* 6.4 dropdown / primary menu on offcanvas */ .menu-dropdown-mobile { margin-top: 15px; } .menu-dropdown.menu-dropdown-mobile { padding: 0 15px; } .menu-dropdown.menu-dropdown-mobile .menu ul li::before { display: none; } .menu-dropdown.menu-dropdown-mobile .menu > li > a::before { bottom: 21px; } .menu-dropdown.menu-dropdown-mobile .menu ul li:hover > a, .menu-dropdown.menu-dropdown-mobile .menu ul li.current-menu-item > a, .menu-dropdown.menu-dropdown-mobile .menu ul li.current-menu-ancestor > a { padding-left: 7px; } .menu-dropdown.menu-dropdown-mobile .menu a, .menu-dropdown.menu-dropdown-mobile .menu > li a, .menu-dropdown.menu-dropdown-mobile .menu .menu-item-has-children::after { color: #dddddd; } .menu-dropdown.menu-dropdown-mobile .menu > .menu-item-has-children::after, .menu-dropdown.menu-dropdown-mobile .menu > li > ul .menu-item-has-children::after { right: 0px; top: 18px; } .menu-dropdown.menu-dropdown-mobile .menu > li, .menu-dropdown.menu-dropdown-mobile .menu ul li { width: 100%; display: block; background: none; border-bottom: 1px solid rgba( 100, 100, 100, 0.1 ); } .menu-dropdown.menu-dropdown-mobile .menu > li a { display: block; padding: 15px 0; } .menu-dropdown.menu-dropdown-mobile .menu > li a, .menu-dropdown.menu-dropdown-mobile .menu ul li a { display: inline-block; } .menu-dropdown.menu-dropdown-mobile .menu > li:hover > ul, .menu-dropdown.menu-dropdown-mobile .menu > li > ul > li:hover > ul, .menu-dropdown.menu-dropdown-mobile .menu > li > ul > li > ul:hover { right: inherit; } .menu-dropdown.menu-dropdown-mobile .menu > li.is-open > ul, .menu-dropdown.menu-dropdown-mobile .menu > li.is-open > ul > li.is-open-child > ul { right: inherit; opacity: 1; visibility: visible; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); -webkit-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -webkit-transform 0.3s ease 100ms; -moz-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -moz-transform 0.3s ease 100ms; -ms-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -ms-transform 0.3s ease 100ms; -o-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -o-transform 0.3s ease 100ms; transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, transform 0.3s ease 100ms; } .menu-dropdown.menu-dropdown-mobile .menu > li > ul { position: relative; width: 100%; height: 0; margin-bottom: -1px; padding-left: 10px; } .menu-dropdown.menu-dropdown-mobile .menu > li > ul > li > ul { position: relative; height: 0; right: 0; margin: -10px 0 10px 0; } .menu-dropdown.menu-dropdown-mobile .menu > li > ul > li > ul > li { border-bottom: none; padding-left: 15px; } .menu-dropdown.menu-dropdown-mobile .menu > li > ul > li > ul > li:hover, .menu-dropdown.menu-dropdown-mobile .menu > li > ul > li > ul > li.current-menu-item { padding-left: 14px; } .menu-dropdown.menu-dropdown-mobile .menu > li:hover > ul, .menu-dropdown.menu-dropdown-mobile .menu > li > ul > li:hover > ul, .menu-dropdown.menu-dropdown-mobile .menu > li > ul > li > ul:hover { height: 0; visibility: hidden; -webkit-transform: translateX( -20px ); -moz-transform: translateX( -20px ); -ms-transform: translateX( -20px ); -o-transform: translateX( -20px ); transform: translateX( -20px ); } .menu-dropdown.menu-dropdown-mobile .menu > li.is-open > ul, .menu-dropdown.menu-dropdown-mobile .menu > li.is-open > ul > li.is-open-child > ul, .menu-dropdown.menu-dropdown-mobile .menu > li.is-open > ul > li.is-open-child:hover > ul { height: auto; opacity: 1; visibility: visible; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); } /* 6.5 Dropdown menu on mobile devices */ @media all and (max-width: 1050px) { .header-3 .menu-wrapper .menu { display: none; } .widget_nav_menu .menu ul li a { display: inline-block; } .widget_nav_menu .menu > li:hover > ul, .widget_nav_menu .menu > li > ul > li:hover > ul, .widget_nav_menu .menu > li > ul > li > ul:hover { right: inherit; } .widget_nav_menu .menu > li.is-open > ul, .widget_nav_menu .menu > li.is-open > ul > li.is-open-child > ul { right: inherit; opacity: 1; visibility: visible; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); -webkit-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -webkit-transform 0.3s ease 100ms; -moz-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -moz-transform 0.3s ease 100ms; -ms-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -ms-transform 0.3s ease 100ms; -o-transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, -o-transform 0.3s ease 100ms; transition: opacity 0.3s ease 100ms, visibility 0s ease 100ms, right 0s ease 0ms, transform 0.3s ease 100ms; } } @media screen and (max-width: 782px) { .admin-bar .menu-dropdown { /*top: 46px;*/ } } /* 6.6 Top navigation bar */ .top-nav-bar { position: relative; float: left; width: 100%; min-height: 50px; height: auto; border-bottom: 1px solid #f1f1f1; z-index: 6; } .top-nav-bar .button-search { position: relative; float: right; text-align: center; width: 50px; height: 50px; line-height: 55px; color: #ffffff; background: #06d6a0; } .top-nav-bar .button-search::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #262626; z-index: -1; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .top-nav-bar .button-search:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .top-nav-bar .button-search .icon { font-size: 18px; } .top-nav-bar .social-media-container { position: relative; float: right; text-align: right; margin-right: 20px; line-height: 49px; } .top-nav-bar .social-media-container.social-media-left-side { float: left; } .top-nav-bar .social-media-container.social-media-left-side a:first-child { margin-left: 0; } .top-nav-bar .social-media-container.search-button-hidden, .top-nav-bar .social-media-container.search-button-hidden a:last-child { margin-right: 0; } .top-nav-bar .notif-setup-menu { line-height: 50px; height: 50px; font-size: 12px; color: #262626; } .top-nav-bar .menu-dropdown .menu > li a { font-weight: 800; font-size: 10px; letter-spacing: 4px; padding: 18px 0; } .top-nav-bar .menu-dropdown .menu ul li a { padding: 16px; color: #262626; } .top-nav-bar .menu-dropdown .menu ul li { background: #f7f7f7; } .top-nav-bar .menu-dropdown .menu > li > ul .menu-item-has-children::after { color: #262626; } .top-nav-bar .menu-dropdown .menu > li > ul .current-menu-item.menu-item-has-children::after { color: #06d6a0; } /* 6.7 Top navigation bar on mobile devices */ @media all and (max-width: 1023px) { .top-nav-bar .left-side { display: none; } .top-nav-bar .left-side.visible-small-device { display: block; } .top-nav-bar .right-side:not( .right-side-custom ) { width: 100%; } .top-nav-bar .social-media-container { float: left; } .top-nav-bar .social-media-container a:first-child { margin-left: 0; } .top-nav-bar .social-media-container.search-button-hidden { width: 100%; text-align: center; } } /** * ------------------------------------------------- * 7.0 Forms * ------------------------------------------------- **/ textarea { resize: none; } /* 7.1 Custom search form & Subscribe form */ .custom-search-form { position: relative; float: left; display: block; width: 100%; height: auto; } .custom-search-form .search-field-container, .subscribe-form .subscribe-field-container, .comment-form .field-container { position: relative; float: left; width: 100%; } .subscribe-form .subscribe-field-container::after { content: ''; position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background: #f8f8f8; z-index: -1; -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; -webkit-transform : scaleX( 0 ); -moz-transform : scaleX( 0 ); -ms-transform : scaleX( 0 ); -o-transform : scaleX( 0 ); transform : scaleX( 0 ); } .subscribe-form .subscribe-field-container.is-focus::after { -webkit-transform : scaleX( 1 ); -moz-transform : scaleX( 1 ); -ms-transform : scaleX( 1 ); -o-transform : scaleX( 1 ); transform : scaleX( 1 ); } .custom-search-form .custom-search-field, .custom-search-form .popup-search-field, .subscribe-form .custom-field, .comment-form .custom-field { position: relative; float: left; display: block; width: 100%; padding: 16px; border: none; outline: none; font-family: 'Muli', sans-serif; font-weight: 400; font-size: 13px; color: #262626; background: none; } .custom-search-form .popup-search-field { padding: 0 0 15px 0; border-bottom: 6px solid rgba( 255, 255, 255, 1 ); color: #ffffff; background: none; font-size: 50px; letter-spacing: 1px; } .custom-search-form .search-field-container { visibility: hidden; opacity: 0; -webkit-transform : translateY( 20px ); -moz-transform : translateY( 20px ); -ms-transform : translateY( 20px ); -o-transform : translateY( 20px ); transform : translateY( 20px ); } .popup-search-container.is-visible .custom-search-form .search-field-container { visibility: visible; opacity: 1; -webkit-transform : translateY( 0 ); -moz-transform : translateY( 0 ); -ms-transform : translateY( 0 ); -o-transform : translateY( 0 ); transform : translateY( 0 ); } .custom-search-form .search-field-container .line { position: absolute; display: block; left: 0; bottom: 0; width: 100%; height: 6px; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .custom-search-form .popup-search-field:focus ~ .line { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .archive-empty-result .custom-search-field { background: #ffffff; } .subscribe-form .form-error .custom-field { color: #F41752; } .custom-search-form .custom-search-field::-webkit-input-placeholder, .subscribe-form .custom-field::-webkit-input-placeholder, .comment-form .custom-field::-webkit-input-placeholder { color: #BEBEBE; font-style: normal; font-family: 'Muli', sans-serif; font-weight: 800; font-size: 12px; opacity: 0; } .custom-search-form .custom-search-field:-moz-placeholder, .subscribe-form .custom-field:-moz-placeholder, .comment-form .custom-field:-moz-placeholder { /* Firefox 18- */ color: #BEBEBE; font-style: normal; font-family: 'Muli', sans-serif; font-weight: 800; font-size: 12px; opacity: 0; } .custom-search-form .custom-search-field::-moz-placeholder, .subscribe-form .custom-field::-moz-placeholder, .comment-form .custom-field::-moz-placeholder { /* Firefox 19+ */ color: #BEBEBE; font-style: normal; font-family: 'Muli', sans-serif; font-weight: 800; font-size: 12px; opacity: 0; } .custom-search-form .custom-search-field:-ms-input-placeholder, .subscribe-form .custom-field:-ms-input-placeholder, .comment-form .custom-field:-ms-input-placeholder { color: #BEBEBE; font-style: normal; font-family: 'Muli', sans-serif; font-weight: 800; font-size: 12px; opacity: 0; } .custom-search-form .animated-border, .subscribe-form .animated-border, .comment-form .animated-border { position: absolute; display: block; left: 0; bottom: 0; width: 100%; height: 1px; background: #262626; } .custom-search-form .custom-search-button, .subscribe-form .custom-submit-button { border: none; outline: none; background: none; position: absolute; right: 16px; top: 13px; width: 25px; height: 25px; z-index: 2; } .subscribe-form .custom-submit-button { top: 11px; } .custom-search-form .custom-search-button .icon, .subscribe-form .custom-submit-button { font-size: 20px; color: #262626; } .search-form .button-search { position: relative; display: inline-block; float: right; margin-top: 20px; border: none; outline: none; } /* 7.2 Popup search form */ .popup-search-container { position: fixed; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; overflow: auto; opacity: 0; visibility: hidden; -webkit-transform: scale( 0.7 ); -moz-transform: scale( 0.7 ); -ms-transform: scale( 0.7 ); -o-transform: scale( 0.7 ); transform: scale( 0.7 ); } .popup-search-container.is-visible { opacity: 1; visibility: visible; -webkit-transform: scale( 1 ); -moz-transform: scale( 1 ); -ms-transform: scale( 1 ); -o-transform: scale( 1 ); transform: scale( 1 ); } .popup-search-container::before { content: ''; position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background: rgba( 25, 25, 25, 0.95 ); z-index: -1; } .popup-search-container .bg-overlay { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background: rgba( 255, 255, 255, 0 ); z-index: 1; } .popup-search-container .content-container { position: relative; float: left; display: block; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; z-index: 2; } .popup-search-container .close-popup-search-button { position: absolute; display: block; width: 60px; height: 60px; right: 50px; top: 50px; text-align: center; line-height: 68px; color: #ffffff; opacity: 0; visibility: hidden; -webkit-transform: scale( 1.2 ); -moz-transform: scale( 1.2 ); -ms-transform: scale( 1.2 ); -o-transform: scale( 1.2 ); transform: scale( 1.2 ); } .admin-bar .popup-search-container .close-popup-search-button { top: 62px; right: 30px; } .popup-search-container.is-visible .close-popup-search-button { opacity: 1; visibility: visible; -webkit-transform: scale( 1 ); -moz-transform: scale( 1 ); -ms-transform: scale( 1 ); -o-transform: scale( 1 ); transform: scale( 1 ); } .popup-search-container .close-popup-search-button::before { content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #ffffff; z-index: -1; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .popup-search-container .close-popup-search-button:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .popup-search-container .close-popup-search-button .icon { font-size: 26px; } .popup-search-container .search-form-container { width: 100%; height: auto; } .popup-search-container .popup-search-form-label { position: relative; float: right; margin-right: -3px; width: 100%; text-align: right; font-size: 11px; margin-top: 10px; text-transform: uppercase; font-weight: 400; letter-spacing: 3px; opacity: 0; visibility: hidden; -webkit-transform: translateX( 20px ); -moz-transform: translateX( 20px ); -ms-transform: translateX( 20px ); -o-transform: translateX( 20px ); transform: translateX( 20px ); } .popup-search-container.is-visible .popup-search-form-label { opacity: 1; visibility: visible; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); } /* 7.2.1 Popup search form on small devices */ @media all and (max-width: 782px) { .admin-bar .popup-search-container .close-popup-search-button { top: 92px; right: 50px; } } @media all and (max-width: 767px) { .popup-search-container .close-popup-search-button { top: 15px; right: 15px; } .admin-bar .popup-search-container .close-popup-search-button { top: 57px; right: 15px; } } @media all and (max-height: 450px) { .popup-search-container .search-form-container { margin-top: 50px; } } /* 7.3 Override Unyson Contact Forms */ .form-wrapper.contact-form { position: relative; float: left; width: 100%; } .wrap-forms .header { position: relative; float: left; height: auto; margin-bottom: 30px; } .wrap-forms .header h6 { text-transform: uppercase; letter-spacing: 2px; } .wrap-forms .header-subtitle { color: #636363; } .wrap-forms .form-builder-item, .wrap-forms .form-builder-item-recaptcha { margin-bottom: 15px; } .wrap-forms .field-textarea, .wrap-forms .field-text { position: relative; float: left; padding-top: 25px; } .wrap-forms input { height: auto; } .wrap-forms .subscribe-field-container { margin-bottom: 5px; } .wrap-forms .instruction { position: relative; float: left; display: block; width: 100%; color: #777777; font-size: 12px; } .wrap-forms .field-checkbox .instruction, .wrap-forms .field-radio .instruction { margin-top: -5px; } .wrap-forms label { position: absolute; display: block; left: 0; top: 20px; font-weight: bold; z-index: -1; width: auto; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .wrap-forms .form-label.is-focus { -webkit-transform: translateY( -45px ); -moz-transform: translateY( -45px ); -ms-transform: translateY( -45px ); -o-transform: translateY( -45px ); transform: translateY( -45px ); } .wrap-forms input, .wrap-forms select { width: 100%; } .wrap-forms .custom-checkbox label, .wrap-forms .custom-radio label { font-size: 12px; margin-left: 10px; -webkit-transform : translateY( 3px ); -moz-transform : translateY( 3px ); -ms-transform : translateY( 3px ); -o-transform : translateY( 3px ); transform : translateY( 3px ); } .wrap-forms .custom-radio label { -webkit-transform : translateY( 2px ); -moz-transform : translateY( 2px ); -ms-transform : translateY( 2px ); -o-transform : translateY( 2px ); transform : translateY( 2px ); } .wrap-forms .field-columns-0:after, .wrap-forms .field-columns-2:after, .wrap-forms .field-columns-3:after { position: relative; float: left; height: 1px; } .wrap-forms .field-select .selectize-control { position: relative; float: left; display: block; width: 100%; z-index: 10; } .wrap-forms .form-error { position: relative; float: left; width: 100%; font-size: 12px; font-style: italic; font-weight: 800; color: #B83925; margin-top: 2px; } .contact-form .button-contact { margin-top: 25px; } .contact-form .button-contact:hover { background: #262626; color: white; -webkit-box-shadow: 0 8px 6px -6px #000000; -moz-box-shadow: 0 8px 6px -6px #000000; box-shadow: 0 8px 6px -6px #000000; } /* 7.4 Password protected post form */ .single-page .post-password-form { margin: 0 0 50px 0; } .single-page .post-password-form p { text-align: left; } .single-page .post-password-form p label { font-family: 'Muli', sans-serif; font-weight: 800; font-size: 12px; color: #262626; text-transform: uppercase; letter-spacing: 2px; } .single-page .post-password-form p input[type="password"] { width: 300px; max-width: 100%; padding: 10px 70px 10px 16px; border: none; outline: none; border-bottom: 4px solid #262626; font-family: 'Muli', sans-serif; font-weight: 400; font-size: 12px; color: #262626; background: #ffffff; margin-bottom: 20px; } .single-page .post-password-form p input[type="submit"] { position: relative; display: inline-block; font-family: 'Muli', sans-serif; font-weight: 800; text-transform: uppercase; overflow: hidden; letter-spacing: 2px; font-size: 10px; margin-left: -68px; text-align: right; background: none; } .single-page .post-password-form p input[type="submit"]:hover { color: #262626; } @media all and (max-width: 500px) { .single-page .post-password-form p input[type="submit"] { margin-left: 0; text-align: center; } } /** * ------------------------------------------------- * 8.0 Carousel * ------------------------------------------------- **/ .carousel-container { position: relative; float: left; display: block; width: 100%; height: auto; } .carousel-container-outer .owl-slider-nav { position: absolute; display: block; right: 20px; top: 20px; width: 25px; height: 25px; line-height: 25px; text-align: center; border: 2px solid #ffffff; cursor: pointer; z-index: 3; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .carousel-container-outer .owl-slider-nav.left-arrow { right: 55px; } .carousel-container-outer .owl-slider-nav .icon { position: relative; display: block; float: left; margin-left: 3px; font-size: 14px; color: #ffffff; } .carousel-container-outer .owl-slider-nav.right-arrow .icon { margin-left: 4px; } .post-portrait .carousel-container-outer.owl-hide-arrow .owl-slider-nav { display: none; } .post-portrait .owl-carousel.owl-control-top .owl-dots, .post-landscape .owl-carousel.owl-control-top .owl-dots { top: 12px; } .testimonials-carousel .owl-slider-nav, .twitter-feed-container .owl-slider-nav, .author-list-wrapper .owl-slider-nav, .category-list-wrapper .owl-slider-nav, .media-image-carousel .owl-slider-nav, .counter-carousel-outer .owl-slider-nav { border: 2px solid #262626; right: 15px; top: 0; } .twitter-feed-container .owl-slider-nav { top: 15px; } .testimonials-carousel .owl-slider-nav.left-arrow, .twitter-feed-container .owl-slider-nav.left-arrow, .author-list-wrapper .owl-slider-nav.left-arrow, .category-list-wrapper .owl-slider-nav.left-arrow, .media-image-carousel .owl-slider-nav.left-arrow, .counter-carousel-outer .owl-slider-nav.left-arrow { right: 50px; } .testimonials-carousel .owl-slider-nav .icon, .twitter-feed-container .owl-slider-nav .icon, .author-list-wrapper .owl-slider-nav .icon, .category-list-wrapper .owl-slider-nav .icon, .media-image-carousel .owl-slider-nav .icon, .counter-carousel-outer .owl-slider-nav .icon { color: #262626; } .twitter-feed-container .owl-dots, .counter-carousel-outer .owl-dots { position: relative; display: inline-block; width: auto; margin-top: 15px; } .counter-carousel-outer .owl-dots { margin-top: 18px; } .carousel-container-outer.featured-content-gallery .owl-dot span { border: 2px solid #ffffff; } /** * ------------------------------------------------- * 9.0 Popover * ------------------------------------------------- **/ .custom-popover { position: absolute; display: block; left: 50%; bottom: -43px; -webkit-transform: translate( -49.9%, -100% ); -moz-transform: translate( -49.9%, -100% ); -ms-transform: translate( -49.9%, -100% ); -o-transform: translate( -49.9%, -100% ); transform: translate( -49.9%, -100% ); z-index: 2; opacity: 0; visibility: hidden; } .custom-popover.share-popover { -webkit-transform: translate( -49.9%, -45px ); -moz-transform: translate( -49.9%, -45px ); -ms-transform: translate( -49.9%, -45px ); -o-transform: translate( -49.9%, -45px ); transform: translate( -49.9%, -45px ); } .custom-popover.is-visible { bottom: -43px; opacity: 1; visibility: visible; } .custom-popover .popover-content { position: relative; display: block; float: left; padding: 0; width: auto; height: auto; color: #6b6b6b; -webkit-backface-visibility: hidden; } .share-popover .popover-content { width: 140px; } .custom-popover .popover-content h6 { white-space: nowrap; color: #dddddd; padding: 12px 24px; } /* 9.1 Popover - Share */ .custom-popover .popover-content .share-button-container { position: relative; display: block; float: left; list-style: none; padding: 0; font-size: 0; text-align: center; width: 140px; height: auto; } .custom-popover .popover-content .share-button-container li { position: relative; display: inline-block; width: 40px; height: auto; margin: 3px; padding: 0; opacity: 0; visibility: hidden; -webkit-transform: translateY( 15px ); -moz-transform: translateY( 15px ); -ms-transform: translateY( 15px ); -o-transform: translateY( 15px ); transform: translateY( 15px ); } .custom-popover.is-visible .popover-content .share-button-container li { opacity: 1; visibility: visible; -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .custom-popover .popover-content .share-button-container li a { position: relative; float: left; display: block; width: 40px; height: 40px; overflow: hidden; color: #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .custom-popover .popover-content .share-button-container .social-fb { background: #4267b2; -webkit-box-shadow: inset 0 0 0 2px #4267b2; -moz-box-shadow: inset 0 0 0 2px #4267b2; box-shadow: inset 0 0 0 2px #4267b2; } .custom-popover .popover-content .share-button-container .social-twitter { background: #1DA1F2; -webkit-box-shadow: inset 0 0 0 2px #1DA1F2; -moz-box-shadow: inset 0 0 0 2px #1DA1F2; box-shadow: inset 0 0 0 2px #1DA1F2; } .custom-popover .popover-content .share-button-container .social-google-plus { background: #db4437; -webkit-box-shadow: inset 0 0 0 2px #db4437; -moz-box-shadow: inset 0 0 0 2px #db4437; box-shadow: inset 0 0 0 2px #db4437; } .custom-popover .popover-content .share-button-container .social-pinterest { background: #bd081c; -webkit-box-shadow: inset 0 0 0 2px #bd081c; -moz-box-shadow: inset 0 0 0 2px #bd081c; box-shadow: inset 0 0 0 2px #bd081c; } .custom-popover .popover-content .share-button-container .social-linkedin { background: #0084bf; -webkit-box-shadow: inset 0 0 0 2px #0084bf; -moz-box-shadow: inset 0 0 0 2px #0084bf; box-shadow: inset 0 0 0 2px #0084bf; } /** * ------------------------------------------------- * 10.0 Gallery * ------------------------------------------------- **/ .gallery-wrapper { position: relative; display: block; height: auto; width: 100%; overflow: hidden; padding: 0 15px; } .gallery-wrapper .gallery-container { display: block; } .gallery-container .gallery-block, .gallery-container .gallery-block .img-container { position: relative; float: left; margin: 0; overflow: hidden; -webkit-backface-visibility: hidden; } .gallery-container .gallery-block.grid-1 { width: 100%; } .gallery-container .gallery-block.grid-2 { width: 50%; } .gallery-container .gallery-block.grid-3 { width: 33.3334%; } .gallery-container .gallery-block.grid-4 { width: 25%; } .gallery-container .gallery-block img { width: 100%; height: auto; -webkit-backface-visibility: hidden; -webkit-transform: scale( 1 ); -moz-transform: scale( 1 ); -ms-transform: scale( 1 ); -o-transform: scale( 1 ); transform: scale( 1 ); } .gallery-container .gallery-block:hover img { width: 100%; height: auto; -webkit-transform: scale( 1.5 ); -moz-transform: scale( 1.5 ); -ms-transform: scale( 1.5 ); -o-transform: scale( 1.5 ); transform: scale( 1.5 ); } .gallery-container .gallery-block .img-overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: rgba( 0, 0, 0, 0.7 ); background: -moz-linear-gradient( top, rgba( 255, 255, 255,0 ) 0%, rgba( 0, 0, 0, 0.7 ) 100% ); background: -webkit-linear-gradient( top, rgba( 255, 255, 255,0 ) 0%, rgba( 0, 0, 0, 0.7 ) 100% ); background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 0.7 ) 100% ); -webkit-transform: translateY( 100% ); -moz-transform: translateY( 100% ); -ms-transform: translateY( 100% ); -o-transform: translateY( 100% ); transform: translateY( 100% ); } .gallery-container .gallery-block:hover .img-overlay { -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .gallery-container .gallery-block .text-container { position: absolute; display: block; left: 0; bottom: 25px; padding: 0 60px 0 24px; width: 100%; height: auto; z-index: 3; word-wrap: break-word; word-break: break-word; } .gallery-container .gallery-block .text-container::before { content: '\3f'; font-family: "dripicons-v2"; position: absolute; display: block; right: 24px; bottom: 0; font-size: 18px; color: #FFFFFF; -webkit-backface-visibility: hidden; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translateX( 800px ); -moz-transform: translateX( 800px ); -ms-transform: translateX( 800px ); -o-transform: translateX( 800px ); transform: translateX( 800px ); } .gallery-container .gallery-block .text-container h6 { position: relative; font-size: 11px; line-height: 18px; text-transform: uppercase; letter-spacing: 3px; color: #FFFFFF; -webkit-transform: translateX( -800px ); -moz-transform: translateX( -800px ); -ms-transform: translateX( -800px ); -o-transform: translateX( -800px ); transform: translateX( -800px ); } .gallery-container .gallery-block:hover .text-container::before, .gallery-container .gallery-block:hover .text-container h6 { -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); } .gallery-container .gallery-block.lightbox .img-container { position: relative; float: left; width: 100%; width: calc( 100% + 1px ); cursor: pointer; } /* 10.1 WordPress built-in gallery */ .gallery { position: relative; float: left; display: block; width: 100%; margin-bottom: 30px; } .gallery-item { float: left; margin: 0 4px 4px 0; overflow: hidden; position: relative; } .gallery-columns-1 .gallery-item { max-width: 100%; } .gallery-columns-2 .gallery-item { max-width: 48%; max-width: -webkit-calc(50% - 4px); max-width: calc(50% - 4px); } .gallery-columns-3 .gallery-item { max-width: 32%; max-width: -webkit-calc(33.3% - 4px); max-width: calc(33.3% - 4px); } .gallery-columns-4 .gallery-item { max-width: 23%; max-width: -webkit-calc(25% - 4px); max-width: calc(25% - 4px); } .gallery-columns-5 .gallery-item { max-width: 19%; max-width: -webkit-calc(20% - 4px); max-width: calc(20% - 4px); } .gallery-columns-6 .gallery-item { max-width: 15%; max-width: -webkit-calc(16.7% - 4px); max-width: calc(16.7% - 4px); } .gallery-columns-7 .gallery-item { max-width: 13%; max-width: -webkit-calc(14.28% - 4px); max-width: calc(14.28% - 4px); } .gallery-columns-8 .gallery-item { max-width: 11%; max-width: -webkit-calc(12.5% - 4px); max-width: calc(12.5% - 4px); } .gallery-columns-9 .gallery-item { max-width: 9%; max-width: -webkit-calc(11.1% - 4px); max-width: calc(11.1% - 4px); } .gallery-columns-1 .gallery-item:nth-of-type(1n), .gallery-columns-2 .gallery-item:nth-of-type(2n), .gallery-columns-3 .gallery-item:nth-of-type(3n), .gallery-columns-4 .gallery-item:nth-of-type(4n), .gallery-columns-5 .gallery-item:nth-of-type(5n), .gallery-columns-6 .gallery-item:nth-of-type(6n), .gallery-columns-7 .gallery-item:nth-of-type(7n), .gallery-columns-8 .gallery-item:nth-of-type(8n), .gallery-columns-9 .gallery-item:nth-of-type(9n) { margin-right: 0; } .gallery-columns-1.gallery-size-medium figure.gallery-item:nth-of-type(1n+1), .gallery-columns-1.gallery-size-thumbnail figure.gallery-item:nth-of-type(1n+1), .gallery-columns-2.gallery-size-thumbnail figure.gallery-item:nth-of-type(2n+1), .gallery-columns-3.gallery-size-thumbnail figure.gallery-item:nth-of-type(3n+1) { clear: left; } .gallery-caption { background-color: rgba(0, 0, 0, 0.7); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; font-size: 12px; line-height: 1.5; margin: 0; max-height: 50%; opacity: 0; padding: 6px 8px; position: absolute; bottom: 0; left: 0; text-align: left; width: 100%; } .gallery-caption:before { content: ""; height: 100%; min-height: 49px; position: absolute; top: 0; left: 0; width: 100%; } .gallery-item:hover .gallery-caption { opacity: 1; } .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /* 10.2 Gallery style on small devices */ @media all and (max-width: 1000px) { .gallery-container .gallery-block.grid-4 { width: 33.33%; } } @media all and (max-width: 600px) { .gallery-container .gallery-block.grid-3, .gallery-container .gallery-block.grid-4 { width: 50%; } } @media all and (max-width: 400px) { .gallery-container .gallery-block.grid-2, .gallery-container .gallery-block.grid-3, .gallery-container .gallery-block.grid-4 { width: 100%; } } /** * ------------------------------------------------- * 11.0 Notification Block * ------------------------------------------------- **/ .notification-block, .fw-flash-messages { position: relative; display: block; float: left; width: 100%; padding: 20px 15px; } .notification-block .icon { position: absolute; display: inline-block; margin-top: 3px; } .notification-block p { position: relative; display: block; padding: 0 15px 0 25px; } .fw-flash-messages { background: #f2f2f2; border: 1px solid #eeeeee; } .fw-flash-messages ul { list-style: none; font-size: 14px; } .fw-flash-messages ul li::before { position: relative; float: left; display: inline-block; content: "\e009"; font-family: 'dripicons-v2'; margin-right: 10px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .notif-setup-menu { position: relative; float: left; width: 100%; height: 60px; line-height: 60px; color: #262626; } .notification-block .notification-close { position: absolute; display: block; right: 23px; top: 5px; z-index: 2; } .notification-block.notif-error .notification-close:hover .icon, .notification-block.notif-alert .notification-close:hover .icon, .notification-block.notif-info .notification-close:hover .icon, .notification-block.notif-success .notification-close:hover .icon { color: #262626; } /** * ------------------------------------------------- * 12.0 Posts Block * ------------------------------------------------- **/ .recent-post-wrapper, .recent-post-container .ajax-response-elem-id, .big-post-left-container, .small-post-container, .magazine-layout-container, .magazine-layout-container .small-post-container, .post-landscape-small, .blog-content-container { position: relative; float: left; display: block; } .recent-post-container, .big-post-left-container, .magazine-layout-container, .small-post-container { display: block; } .blog-content-container { width: 100%; background: #ffffff; padding-top: 75px; } .single-post .blog-content-container, .single-attachment .blog-content-container { padding-top: 0; } .recent-post-wrapper { width: 100%; padding: 0 15px; overflow: hidden; } .post-content { position: relative; display: block; float: left; margin: 0; opacity: 1; } .post-content.is-hidden { opacity: 0; } .post-content.grid-1, .magazine-layout-container.grid-1, .big-post-top-container { width: 100%; } .post-content.grid-2, .big-post-top.grid-2, .magazine-layout-container.grid-2, .big-post-left-container { width: 50%; } .post-content.grid-3 { width: 33.33%; } .post-content.grid-4 { width: 25%; } .post-content.grid-30 { width: 30%; } .post-content.grid-70 { width: 70%; } .magazine-layout-container .small-post-container { width: auto; } .entry-content.is-archive .content-wrapper { position: relative; float: left; display: block; width: 100%; width: calc( 100% + 0.5px ); height: auto; z-index: 3; } /* Post Content - Post Body */ .post-content .post-body { position: relative; float: left; display: block; width: 100%; word-wrap: break-word; word-break: break-word; -webkit-backface-visibility: hidden; } /* Post Content - Category */ .post-content .post-category-wrapper { position: relative; float: left; display: block; width: 100%; padding-left: 88px; } .post-content .category-container { position: relative; float: left; display: inline-block; padding-left: 25px; border-bottom: 2px solid #ffffff; -webkit-backface-visibility: hidden; text-align: right; } .post-content .category-container::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; z-index: -1; -webkit-backface-visibility: hidden; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .post-content .category-container:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .post-content .link-category { position: relative; display: inline-block; padding: 4px 0; color: #ffffff; margin: 0 3px; font-size: 13px; font-weight: 800; -webkit-backface-visibility: hidden; } .post-content .link-category:last-child { margin-right: 0; } .post-content .like-button.liked .icon { color: #ef233c; } /* Post Content - Text Container */ .post-content .text-container { position: relative; float: left; padding-left: 88px; margin-top: 8px; -webkit-backface-visibility: hidden; } .post-content .text-container:not( .col-xs-12 ) { width: 100%; } /* Post Content - Author Link */ .post-content .post-author { position: relative; float: left; display: block; width: 100%; height: auto; } .post-content .post-author .line { position: absolute; display: block; right: 0; top: 14px; width: 100%; height: 2px; background: #e9e9e9; -webkit-backface-visibility: hidden; } .post-content .post-author .line::before { content: ''; position: absolute; display: block; left: 0; bottom: 0; width: 40px; height: 2px; } .post-content .post-author a:hover ~ .line::before { width: 100%; } .post-content .post-author a, .post-content .post-author .name { position: relative; float: left; width: auto; } .post-content .post-author .name { font-size: 13px; margin-top: 5px; } .post-content .post-author .avatar { position: relative; float: left; margin-right: 10px; width: 30px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } /* Post Content - Date */ .post-content .date-container, .post-content .date { position: absolute; display: block; left: 0; top: 0; width: 68px; height: auto; text-align: right; z-index: 2; } .post-content .date-container { min-height: 100px; } .post-content .date .month { text-transform: uppercase; margin: -5px -4px 0 0; font-size: 18px; letter-spacing: 4px; font-weight: 800; } .post-content .date .day-year { margin-top: -12px; } .post-content .date .day, .post-content .date .year { font-size: 13px; } /* Post Content - Title & Content */ .post-content .post-portrait-title, .post-content .post-portrait-content { position: relative; display: block; float: left; width: 100%; margin-top: 10px; -webkit-backface-visibility: hidden; } .post-content .post-portrait-title .quote { font-style: italic; } .post-content .post-portrait-title .quote::before, .post-content .post-portrait-title .quote::after { content: '\f122'; font-family: 'dashicons'; display: inline-block; font-size: 16px; -webkit-transform: translateY( -8px ); -moz-transform: translateY( -8px ); -ms-transform: translateY( -8px ); -o-transform: translateY( -8px ); transform: translateY( -8px ); } .post-content .post-portrait-title .quote-author, .post-content .post-portrait-title .link-name { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #777777; } .post-content .post-portrait-title .quote-author::before, .post-content .post-portrait-title .link-name::before { content: ''; display: inline-block; margin-right: 5px; width: 25px; height: 1px; background: #777777; -webkit-transform: translateY( -3px ); -moz-transform: translateY( -3px ); -ms-transform: translateY( -3px ); -o-transform: translateY( -3px ); transform: translateY( -3px ); } .post-content .post-portrait-title .link { text-transform: lowercase; word-wrap: break-word; word-break: break-word; } .post-content .post-portrait-title .link span { padding-bottom: 2px; border-bottom: 3px solid #262626; } .post-content .post-portrait-title .link-name { margin-top: 12px; } .post-content .featured-content-spacer { position: relative; float: left; display: block; width: 100%; height: 10px; } /* Post Content - Info */ .post-content .post-info-container { position: relative; float: left; display: block; width: 100%; margin-top: 20px; -webkit-backface-visibility: hidden; } .post-content .info { position: relative; display: inline-block; width: auto; height: 18px; color: #ffffff; margin: 0 7px 5px 7px; } .post-content .info.post-share { margin: 0 7px 5px 4px; } .post-content .info .icon { position: relative; float: left; font-size: 21px; margin: -3px 7px 0 0; } .post-content .info .icon.dripicons-message { margin: -3px 9px 0 0; } .post-content .info .text { position: relative; float: left; font-size: 13px; } .single-page .outer-container .post-content .info .text { line-height: 14px; } /* Post Content - Read More Button */ .post-content .text-container .read-more-container { position: relative; float: left; display: block; width: 100%; height: auto; margin-top: 3px; text-align: right; } .post-content .text-container .post-read-more-button { position: relative; display: inline-block; margin-top: 5px; font-family: 'Muli', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; font-size: 11px; color: #262626; -webkit-backface-visibility: hidden; -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .post-content .text-container .post-read-more-button::before { content: ''; position: absolute; display: block; left: -2px; bottom: 6px; width: 100%; height: 4px; z-index: -1; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .post-content .text-container .post-read-more-button:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } /* Post Content - Post Label */ .post-content .post-label { position: absolute; display: inline-block; right: 18px; top: 18px; width: auto; height: auto; padding: 1px 17px 0 19px; -webkit-backface-visibility: hidden; -webkit-border-radius: 17px; -moz-border-radius: 17px; -o-border-radius: 17px; -ms-border-radius: 17px; border-radius: 17px; z-index: 2; } .post-content .post-label:hover { background: #262626; } .post-content .post-label .label-text { color: #ffffff; text-transform: uppercase; font-size: 9px; letter-spacing: 2px; line-height: 20px; } /* Post Content - Featured Content Gallery */ .post-content .featured-content-gallery { position: relative; float: left; display: block; width: 100%; height: auto; overflow: hidden; } .post-content .featured-content-gallery .img-wrapper { position: relative; float: left; display: block; width: 100%; height: 100%; } .post-content .featured-content-gallery img { width: 100%; height: auto; } /* 12.1 post portrait */ .single-page .outer-container .post-portrait .post-author a .name, .single-page .outer-container .post-portrait-small .post-author a .name, .single-page .outer-container .post-landscape .post-author a .name, .single-page .outer-container .post-landscape-small .post-author a .name, .single-page .outer-container .post-image-bg .post-author a .name { margin-top: 1px; } .post-portrait .img-container, .post-portrait-small .img-container { position: relative; display: block; float: left; width: 100%; height: auto; max-height: 400px; overflow: hidden; } .post-portrait.grid-1 .img-container { max-height: 700px; } .grid-masonry .post-portrait .img-container { max-height: none; } .post-portrait .img-container .post-info-container, .post-landscape .img-container .post-info-container { position: absolute; display: block; margin-top: 5px; width: 100%; height: auto; text-align: center; z-index: 2; } .post-portrait .img-container .post-info-container .info-wrapper, .post-landscape .img-container .post-info-container .info-wrapper { position: relative; display: inline-block; visibility: hidden; opacity: 0; -webkit-transform : translateY( 10px ); -moz-transform : translateY( 10px ); -ms-transform : translateY( 10px ); -o-transform : translateY( 10px ); transform : translateY( 10px ); } .post-portrait:hover .img-container .post-info-container .info-wrapper, .post-landscape:hover .img-container .post-info-container .info-wrapper { visibility: visible; opacity: 1; -webkit-transform : translateY( 0 ); -moz-transform : translateY( 0 ); -ms-transform : translateY( 0 ); -o-transform : translateY( 0 ); transform : translateY( 0 ); } .post-portrait .img-container .img-overlay, .post-portrait-small .img-container .img-overlay, .post-landscape .img-container .img-overlay, .post-landscape-small .img-container .img-overlay, .post-portrait .featured-content-gallery .owl-item::before, .post-landscape .featured-content-gallery .owl-item::before, .post-image-bg .featured-content-gallery .owl-item::before { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background: rgba( 0, 0, 0, 0.5 ); background: -moz-linear-gradient( top, rgba( 255, 255, 255,0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% ); background: -webkit-linear-gradient( top, rgba( 255, 255, 255,0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% ); background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 0.5 ) 100% ); -webkit-transform: translateY( 100% ); -moz-transform: translateY( 100% ); -ms-transform: translateY( 100% ); -o-transform: translateY( 100% ); transform: translateY( 100% ); } .post-portrait .featured-content-gallery .owl-item::before, .post-landscape .featured-content-gallery .owl-item::before, .post-image-bg .featured-content-gallery .owl-item::before { content: ''; z-index: 2; } .post-portrait:hover .img-container .img-overlay, .post-portrait-small:hover .img-container .img-overlay, .post-landscape:hover .img-container .img-overlay, .post-landscape-small:hover .img-container .img-overlay, .post-portrait:hover .featured-content-gallery .owl-item::before, .post-landscape:hover .featured-content-gallery .owl-item::before, .post-image-bg .featured-content-gallery .owl-item::before { -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .post-image-bg .featured-content-gallery .owl-item::before { background: rgba( 0, 0, 0, 0.4 ); } .post-portrait .img-container img { position: relative; float: left; width: 100%; height: auto; } .post-portrait .post-body, .post-portrait-small .post-body { position: relative; float: left; width: 100%; height: auto; padding: 15px 0 0 0; } .post-portrait .link-category:hover, .post-portrait-small .link-category:hover, .post-landscape .link-category:hover, .post-landscape-small .link-category:hover { color: #262626; } .post-content.post-portrait .category-container::before, .post-content.post-portrait-small .category-container::before, .post-content.post-landscape .category-container::before, .post-content.post-landscape-small .category-container::before { background: #262626; } .post-portrait .date, .post-portrait-small .date, .post-landscape-small .date, .post-landscape .date { position: relative; display: inline-block; } .post-portrait .date .month, .post-landscape .date .month { margin-top: -3px; } .post-portrait .post-portrait-title, .post-landscape .post-portrait-title { margin-top: 5px; } .post-portrait .info.post-share, .post-landscape .info.post-share { margin: 15px 0 0 0; } .post-portrait .post-author, .post-landscape .post-author { margin-top: 20px; } .post-portrait .post-author .name, .post-portrait-small .post-author .name, .post-landscape-small .post-author .name, .post-landscape .post-author .name { color: #262626; } .post-portrait .post-share:hover .icon, .post-portrait .post-share:hover .text, .post-portrait-small .post-share:hover .icon, .post-portrait-small .post-share:hover .text, .post-landscape-small .post-share:hover .icon, .post-landscape-small .post-share:hover .text, .post-landscape .post-share:hover .icon, .post-landscape .post-share:hover .text { color: #262626; } .post-content .post-portrait-content .content-small { display: none; } .post-portrait .is-hide-date-share .text-container, .post-portrait .is-hide-date-share .post-category-wrapper { padding-left: 0; } .post-portrait .is-hide-date-share .date-container { display: none; } .post-portrait.grid-3 .text-container, .post-portrait.grid-3 .post-category-wrapper { padding-left: 0; } .post-portrait.grid-3 .date-container, .post-portrait-small .date-container, .post-landscape-small .date-container { position: relative; float: left; width: auto; min-height: 10px; text-align: left; } .post-portrait.grid-3 .date-container .date, .post-portrait-small .date-container .date, .post-landscape-small .date-container .date { width: auto; } .post-portrait.grid-3 .date-container .month, .post-portrait.grid-3 .date-container .day-year, .post-portrait-small .date-container .month, .post-portrait-small .date-container .day-year, .post-landscape-small .date-container .month, .post-landscape-small .date-container .day-year { position: relative; float: left; display: block; width: auto; margin: 0 5px 0 0; } .post-portrait.grid-3 .date-container .month { font-size: 14px; line-height: 24px; } .post-content.post-portrait.grid-3 .date-container .day-year { font-size: 12px; line-height: 15px; margin: 5px 20px 0 0; } .post-portrait.grid-3 .info.post-share { margin-top: 0; -webkit-transform: translateY( -3px ); -moz-transform: translateY( -3px ); -ms-transform: translateY( -3px ); -o-transform: translateY( -3px ); transform: translateY( -3px ); } /* 12.1.1 post portrait small */ .post-portrait-small .post-label-container, .post-landscape-small .post-label-container { width: 100%; text-align: center; z-index: 2; } .post-portrait-small .post-label-icon, .post-landscape-small .post-label-icon { position: relative; display: inline-block; text-align: center; width: 50px; height: 50px; line-height: 56px; color: #ffffff; visibility: hidden; opacity: 0; -webkit-transform: scale( 0 ); -moz-transform: scale( 0 ); -ms-transform: scale( 0 ); -o-transform: scale( 0 ); transform: scale( 0 ); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .post-portrait-small .post-label-icon.inactive, .post-landscape-small .post-label-icon.inactive { cursor: default; } .post-portrait-small:hover .post-label-icon, .post-landscape-small:hover .post-label-icon { visibility: visible; opacity: 1; -webkit-transform: scale( 1 ); -moz-transform: scale( 1 ); -ms-transform: scale( 1 ); -o-transform: scale( 1 ); transform: scale( 1 ); } .post-portrait-small .post-label-container .post-label-icon:hover, .post-landscape-small .post-label-container .post-label-icon:hover { background: #262626; } .post-portrait-small .post-label-icon .icon, .post-landscape-small .post-label-icon .icon { font-size: 18px; } .post-portrait-small .post-label-icon .dashicons, .post-landscape-small .post-label-icon .dashicons { font-size: 21px; line-height: 52px; } .post-portrait-small .post-body { text-align: center; } .post-portrait-small .post-category-wrapper, .post-portrait-small .text-container { padding-left: 0; text-align: center; } .post-portrait-small .post-category-wrapper .category-container { float: none; display: inline-block; } .post-portrait-small .post-portrait-title { margin-top: -6px; } .post-portrait-small .post-portrait-title h6 { line-height: 24px; } .post-portrait-small .date-container, .post-landscape-small .date-container { margin-top: 5px; text-align: center; width: 100%; } .post-portrait-small .date, .post-landscape-small .date { margin: 0 5px 5px 5px; } .post-portrait-small .date-container .month, .post-landscape-small .date-container .month { font-size: 12px; line-height: 21px; letter-spacing: 3px; } .post-content.post-portrait-small .date-container .day-year, .post-content.post-landscape-small .date-container .day-year { margin: -3px 0 0 0; } .post-content.post-portrait-small .date .day, .post-content.post-portrait-small .date .year, .post-content.post-landscape-small .date .day, .post-content.post-landscape-small .date .year { font-size: 12px; } .post-portrait-small .post-info-container { margin-top: 13px; } .post-portrait-small .info .text { font-size: 12px; } .post-portrait-small .info.post-share, .post-landscape-small .info.post-share { margin: 0 5px 5px 5px; -webkit-transform: translateY( -4px ); -moz-transform: translateY( -4px ); -ms-transform: translateY( -4px ); -o-transform: translateY( -4px ); transform: translateY( -4px ); } .post-portrait-small .info .icon, .post-landscape-small .info .icon { margin-top: -5px; } .post-portrait-small .info, .post-landscape-small .info { color: #777777; } .post-portrait-small .post-author { margin-top: 10px; } .post-portrait-small .quote, .post-portrait-small .link, .post-landscape-small .quote, .post-landscape-small .link { font-size: 14px; line-height: 24px; } .post-portrait-small .post-portrait-title .quote-author, .post-portrait-small .post-portrait-title .link-name, .post-landscape-small .post-portrait-title .quote-author, .post-landscape-small .post-portrait-title .link-name { font-size: 9px; } .post-portrait-small .post-portrait-title .quote-author::before, .post-portrait-small .post-portrait-title .link-name::before, .post-landscape-small .post-portrait-title .quote-author::before, .post-landscape-small .post-portrait-title .link-name::before { display: none; } .post-portrait-small .post-portrait-title .quote::before, .post-portrait-small .post-portrait-title .quote::after, .post-landscape-small .post-portrait-title .quote::before, .post-landscape-small .post-portrait-title .quote::after { font-size: 11px; -webkit-transform: translateY( -7px ); -moz-transform: translateY( -7px ); -ms-transform: translateY( -7px ); -o-transform: translateY( -7px ); transform: translateY( -7px ); } .post-portrait-small .post-portrait-title .link span, .post-landscape-small .post-portrait-title .link span { padding-bottom: 1px; border-bottom: 2px solid #262626; } .post-portrait-small .post-portrait-title .link-name, .post-landscape-small .post-portrait-title .link-name { margin-top: 6px; } /* 12.1.2 post portrait on small devices */ @media all and (max-width: 1200px) { div[class*="fw-col-sm-"] .post-portrait-small.grid-4 { width: 33.33%; } div[class*="fw-col-sm-12"] .post-portrait-small.grid-4 { width: 25%; } div[class*="fw-col-sm-9"] .mixed_layout .post-portrait.grid-3 { width: 50%; } } @media all and (max-width: 1000px) { .post-portrait.grid-3 { width: 50%; } .big-post-left-container, .big-post-top.grid-2 { width: 100%; } div[class*="fw-col-sm-12"] .post-portrait-small.grid-4 { width: 33.33%; } } @media all and (max-width: 768px) { .recent-post-container > .row.no-pad { padding: 0 15px; } .post-content .date-container .date .month { margin-top: 4px; font-size: 14px; line-height: 24px; } .post-content .date-container .date .day-year { margin-top: 2px; font-size: 12px; line-height: 15px; } .post-content.post-portrait.grid-3 .date-container .day-year { margin: 9px 20px 0 0; } .post-content .date-container { top: 4px; } .post-content.post-portrait-small .date-container, .post-content.post-landscape-small .date-container { margin: 7px 0 3px 0; text-align: center; width: 100%; } .post-content.post-portrait-small .date, .post-content.post-landscape-small .date { margin: 0 5px 5px 5px; } .post-content.post-portrait-small .date-container .month, .post-content.post-landscape-small .date-container .month { margin-top: -5px; font-size: 12px; line-height: 21px; letter-spacing: 3px; } .post-content.post-portrait-small .date-container .day-year, .post-content.post-landscape-small .date-container .day-year { margin: -2px 0 0 0; } .post-content.post-portrait-small .date .day, .post-content.post-portrait-small .date .year, .post-content.post-landscape-small .date .day, .post-content.post-landscape-small .date .year { font-size: 12px; } .post-portrait-small .info.post-share, .post-landscape-small .info.post-share { -webkit-transform: translateY( -1px ); -moz-transform: translateY( -1px ); -ms-transform: translateY( -1px ); -o-transform: translateY( -1px ); transform: translateY( -1px ); } div[class*="fw-col-sm-"] .post-portrait-small.grid-4, .post-portrait-small.grid-4 { width: 33.33%; } .post-content .post-portrait-title .quote::before, .post-content .post-portrait-title .quote::after { font-size: 12px; -webkit-transform: translateY( -7px ); -moz-transform: translateY( -7px ); -ms-transform: translateY( -7px ); -o-transform: translateY( -7px ); transform: translateY( -7px ); } } @media all and (max-width: 700px) { .post-portrait.grid-2, .post-portrait.grid-3 { width: 100%; } .mixed_layout .post-portrait.grid-2, .mixed_layout .post-portrait.grid-3 { width: 50%; } .post-portrait.grid-1 .img-container, .post-portrait.grid-2 .img-container, .post-portrait.grid-3 .img-container { max-height: 400px; } .post-portrait.grid-1 .post-portrait-content .content-large, .post-portrait.grid-2 .post-portrait-content .content-large, .post-portrait.grid-3 .post-portrait-content .content-large { display: none; } .post-portrait.grid-1 .post-portrait-content .content-small, .post-portrait.grid-2 .post-portrait-content .content-small, .post-portrait.grid-3 .post-portrait-content .content-small { display: block; } .grid-masonry .post-portrait .img-container { max-height: none; } } @media all and (max-width: 600px) { div[class*="fw-col-sm-"] .post-portrait-small.grid-4, .post-portrait-small.grid-3, .post-portrait-small.grid-4 { width: 50%; } div[class*="fw-col-sm-9"] .mixed_layout .post-portrait.grid-3, .mixed_layout .post-portrait.grid-2, .mixed_layout .post-portrait.grid-3 { width: 100%; } } @media all and (max-width: 400px) { .post-portrait .text-container, .post-portrait .post-category-wrapper, .post-landscape .text-container, .post-landscape .post-category-wrapper { padding-left: 0; } .post-portrait .date-container, .post-landscape .date-container { position: relative; float: left; width: auto; min-height: 10px; text-align: left; } .post-portrait .date-container .date, .post-landscape .date-container .date { width: auto; } .post-portrait .date-container .month, .post-portrait .date-container .day-year, .post-landscape .date-container .month, .post-landscape .date-container .day-year { position: relative; float: left; display: block; width: auto; margin: 0 5px 0 0; } .post-content.post-portrait .date-container .day-year, .post-content.post-landscape .date-container .day-year { margin: 9px 20px 0 0; } .post-portrait .info.post-share, .post-landscape .info.post-share { margin-top: 0; -webkit-transform: translateY( -3px ); -moz-transform: translateY( -3px ); -ms-transform: translateY( -3px ); -o-transform: translateY( -3px ); transform: translateY( -3px ); } div[class*="fw-col-sm-"] .post-portrait-small.grid-4, .post-portrait-small.grid-2, .post-portrait-small.grid-3, .post-portrait-small.grid-4 { width: 100%; } } /* 12.1 end post portrait */ /* 12.2 post landscape */ .post-landscape { height: auto; } .post-landscape.grid-1 { width: 100%; } .post-landscape .img-container, .post-landscape-small .img-container { position: relative; width: 33%; height: auto; max-height: 375px; overflow: hidden; } .post-landscape .img-container.no-post-thumbnail { display: none; } .post-landscape .post-body, .post-landscape-small .post-body { position: relative; float: left; width: 67%; padding: 30px 0; } .post-landscape .post-body.no-post-thumbnail { padding: 0; } .post-landscape.image-left .img-container, .post-landscape-small.image-left .img-container { float: left; } .post-landscape.image-left .post-body, .post-landscape-small.image-left .post-body { float: left; } .post-landscape.image-right .post-body { float: right; } .post-landscape.image-right .img-container { float: right; } .post-landscape.image-left .post-body .centering-y { padding: 0 0 0 13px; } .post-landscape .post-body.no-post-thumbnail { position: relative; float: left; width: 100%; height: auto; } .post-landscape .post-body.no-post-thumbnail .centering-y { position: relative; float: left; width: 100%; display: block; padding: 0; top: inherit; left: inherit; -webkit-transform: translate3d( 0, 0, 0 ); -moz-transform: translate3d( 0, 0, 0 ); -ms-transform: translate3d( 0, 0, 0 ); -o-transform: translate3d( 0, 0, 0 ); transform: translate3d( 0, 0, 0 ); } .post-landscape.image-right .post-body .centering-y { padding: 0 30px 0 0; } .post-landscape.image-right .post-body.no-post-thumbnail .centering-y { padding: 0; } .post-landscape .is-hide-date-share .text-container, .post-landscape .is-hide-date-share .post-category-wrapper { padding-left: 25px; } .post-landscape.image-right .is-hide-date-share .text-container, .post-landscape.image-right .is-hide-date-share .post-category-wrapper, .post-landscape-small .post-category-wrapper, .post-landscape-small .text-container { padding-left: 0; } .post-landscape.image-right .date-container, .post-landscape.image-right .date { width: 70px; } .post-landscape.image-right .text-container, .post-landscape.image-right .post-category-wrapper { padding-left: 90px; } .post-landscape-small.image-right .img-container { float: right; } .post-landscape-small .post-body { padding: 0 0 0 15px; } .post-landscape-small.image-right .post-body { padding: 0 15px 0 0; } .post-landscape-small .category-container { margin-top: -8px; } .post-landscape-small .date-container { text-align: left; margin-top: 5px; } .post-landscape-small .date-container .date { margin-left: 0; } .post-landscape-small .post-portrait-title { margin-top: -6px; } .post-landscape-small .post-info-container { margin-top: 13px; } .post-landscape-small .post-info-container .info:first-child { margin-left: 0; } .post-landscape-small .post-author { margin-top: 8px; } .post-landscape-small .info.post-share { -webkit-transform: translateY( -4px ); -moz-transform: translateY( -4px ); -ms-transform: translateY( -4px ); -o-transform: translateY( -4px ); transform: translateY( -4px ); } /* 12.2.1 post landscape on small devices */ @media all and (max-width: 1200px) { .post-landscape.grid-1 .post-portrait-content .content-large { display: none; } .post-landscape.grid-1 .post-portrait-content .content-small { display: block; } .post-landscape .img-container { width: 40%; } .post-landscape .post-body { width: 60%; } } @media all and (max-width: 1000px) { .post-landscape .post-content-wrapper { display: block; } .post-landscape .img-container, .post-landscape.image-right .img-container { position: relative; float: left; width: 40%; height: auto; } .post-landscape.image-right .img-container { float: right; } .post-landscape .img-container img { max-width: 100%; height: auto; } .post-landscape .post-body, .post-landscape.image-left .post-body, .post-landscape.image-right .post-body { position: relative; float: right; left: inherit; right: inherit; top: inherit; width: 60%; height: auto; padding: 0; } .post-landscape .post-body.no-post-thumbnail, .post-landscape.image-left .post-body.no-post-thumbnail, .post-landscape.image-right .post-body.no-post-thumbnail { width: 100%; } .post-landscape .post-body .centering-y { position: relative; float: left; width: 100%; display: block; padding: 0; top: inherit; left: inherit; -webkit-transform: translate3d( 0, 0, 0 ); -moz-transform: translate3d( 0, 0, 0 ); -ms-transform: translate3d( 0, 0, 0 ); -o-transform: translate3d( 0, 0, 0 ); transform: translate3d( 0, 0, 0 ); } } @media all and (max-width: 768px) { .post-content.post-landscape-small .date-container { text-align: left; margin-top: 4px; } .post-landscape-small .post-portrait-title { margin-top: -2px; } .post-landscape-small .info.post-share { -webkit-transform: translateY( -2px ); -moz-transform: translateY( -2px ); -ms-transform: translateY( -2px ); -o-transform: translateY( -2px ); transform: translateY( -2px ); } } @media all and (max-width: 650px) { .post-landscape .img-container, .post-landscape.image-right .img-container, .post-landscape .img-container img { width: 100%; } .post-landscape .post-body, .post-landscape.image-left .post-body, .post-landscape.image-right .post-body { width: 100%; margin-top: 15px; } .post-landscape.image-right .date-container, .post-landscape.image-right .date { width: 68px; } .post-landscape.image-right .text-container, .post-landscape.image-right .post-category-wrapper { padding-left: 88px; } .post-landscape.image-left .post-body .centering-y, .post-landscape.image-right .post-body .centering-y { padding: 0; } .post-landscape .is-hide-date-share .text-container, .post-landscape .is-hide-date-share .post-category-wrapper { padding-left: 0; } .post-landscape-small.grid-2 { width: 100%; } } @media all and (max-width: 400px) { .post-landscape.image-right .text-container, .post-landscape.image-right .post-category-wrapper { padding-left: 0; } .post-landscape.image-right .date-container { position: relative; float: left; width: auto; min-height: 10px; text-align: left; } .post-landscape.image-right .date-container .date { width: auto; } .post-landscape.image-right .date-container .month, .post-landscape.image-right .date-container .day-year { position: relative; float: left; display: block; width: auto; margin: 0 5px 0 0; } .post-content.post-landscape.image-right .date-container .day-year { margin: 5px 20px 0 0; } .post-landscape.image-right .info.post-share { margin-top: 0; -webkit-transform: translateY( -3px ); -moz-transform: translateY( -3px ); -ms-transform: translateY( -3px ); -o-transform: translateY( -3px ); transform: translateY( -3px ); } } @media all and (max-width: 380px) { .post-landscape-small.image-left .img-container, .post-landscape-small.image-right .img-container, .post-landscape-small .img-container img, .post-landscape-small .post-body { width: 100%; } .post-landscape-small .post-body, .post-landscape-small .post-category-wrapper, .post-landscape-small .text-container { padding-left: 0; } .post-landscape-small.image-right .post-body, .post-landscape-small.image-right .post-category-wrapper, .post-landscape-small.image-right .text-container { padding-right: 0; } .post-landscape-small .post-body { margin-top: 15px; } } /* 12.2 end post landscape */ /* 12.3 post image background */ .post-image-bg.grid-1 { width: 100%; } .owl-item .post-image-bg.grid-1 { width: 100%; width: calc( 100% + 1px ); } .post-image-bg.grid-2 { width: 50%; } .post-image-bg.grid-3 { width: 33.33%; } .post-image-bg.grid-4 { width: 25%; } .post-image-bg { min-height: 300px; height: auto; overflow: hidden; } .post-image-bg .img-container { position: relative; display: block; padding: 45px 0; width: 100%; min-height: 300px; height: auto; overflow: hidden; } .post-image-bg .img-container .link-overlay { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-backface-visibility: hidden; } .post-image-bg .img-container .link-overlay img { position: relative; float: left; display: block; width: 100%; height: auto; } .post-image-bg .img-container .img-overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background: rgba( 0, 0, 0, 0.4 ); z-index: 1; } .post-image-bg .img-container .post-body-wrapper { position: relative; float: left; display: block; width: 100%; width: calc( 100% - 90px ); height: auto; padding-bottom: 30px; left: 45px; background: rgba( 255, 255, 255, 0.8 ); z-index: 2; } .post-image-bg .img-container .post-body-container { position: relative; float: left; width: 100%; height: auto; z-index: 2; width: calc( 100% - 30px ); top: 15px; left: 15px; } .post-image-bg .img-container .post-body-wrapper .post-body-container { width: calc( 100% - 16px ); height: auto; padding: 50px 0 8px 0; left: 8px; } .post-image-bg .img-container .post-body, .post-image-bg .post-author-container { position: relative; float: left; display: block; padding: 0 15px; background: none; border: none; width: 100%; height: auto; z-index: 2; text-align: center; } .post-image-bg .post-author-container.is-hide-date { margin-top: 30px; } .post-image-bg .img-container .post-body { margin-bottom: 30px; } .post-image-bg .post-author-container { text-align: left; -webkit-backface-visibility: hidden; } .post-image-bg .post-author { margin-top: -2px; } .post-image-bg.post-content .post-author a, .post-image-bg.post-content .post-author .name, .post-image-bg .post-portrait-title h4 a, .post-image-bg .post-portrait-title .quote::before, .post-image-bg .post-portrait-title .quote::after, .post-image-bg .date .month { color: #FFFFFF; } .post-image-bg .date .day, .post-image-bg .date .year, .post-image-bg .post-portrait-title .quote-author, .post-image-bg .post-portrait-title .link-name, .post-image-bg .post-portrait-content p { color: #dedede; } .post-image-bg .post-portrait-title .quote-author::before, .post-image-bg .post-portrait-title .link-name::before { background: #dedede; } .post-image-bg .post-portrait-title .link span { border-bottom: 3px solid #ffffff; } .post-image-bg .date { position: relative; float: right; left: inherit; } .post-image-bg .category-container { float: none; } .post-content.post-image-bg .category-container::before { background: #ffffff; } .post-image-bg .post-body-wrapper .category-container::before { background: #262626; } .post-content.post-image-bg .link-category:hover { color: #ffffff; } .post-image-bg .post-body-wrapper .link-category:hover, .post-image-bg .post-body-wrapper .post-portrait-title h4 a, .post-content.post-image-bg .post-body-wrapper .post-author .name, .post-content.post-image-bg .post-body-wrapper .info, .post-content.post-image-bg .post-body-wrapper .date .month { color: #262626; } .post-image-bg .post-body-wrapper .post-portrait-content p, .post-content.post-image-bg .post-body-wrapper .date .day, .post-content.post-image-bg .post-body-wrapper .date .year { color: #767676; } .post-content.post-image-bg .post-body-wrapper .post-author .line { background: #c2c2c2; } .post-image-bg .read-more-container { position: relative; float: left; display: block; width: 100%; height: auto; text-align: center; margin-top: 22px; } .post-image-bg .read-more-container.has-button-play { margin-top: 12px; } .post-image-bg.on-slider .post-label { display: none; } div[class*="fw-col-sm-"] .post-image-bg.grid-3 .post-portrait-title, .post-image-bg.grid-4 .post-portrait-title { margin-top: 5px; } div[class*="fw-col-sm-"] .post-image-bg.grid-3 .post-portrait-title h4, .post-image-bg.grid-4 .post-portrait-title h4 { font-size: 20px; line-height: 32px; } div[class*="fw-col-sm-"] .post-image-bg.grid-3 .post-portrait-content, div[class*="fw-col-sm-"] .post-image-bg.grid-4 .post-portrait-content, .post-image-bg.gallery-is-visible .post-portrait-content, .post-image-bg.featured-content-is-visible .post-portrait-content { display: none; } div[class*="fw-col-sm-9"] .post-image-bg.grid-3.is-sticky .img-container .post-body-wrapper { width: calc( 100% - 60px ); padding-bottom: 30px; left: 30px; } div[class*="fw-col-sm-9"] .post-image-bg.grid-3.is-sticky .img-container { padding: 30px 0; } .post-image-bg.gallery-is-visible .post-body { margin: 0; padding: 70px 15px; } /* 12.3.1 post image background on small devices */ @media all and (max-width: 1199px) { div[class*="fw-col-sm-"] .post-image-bg.grid-2 .post-portrait-content { display: none; } div[class*="fw-col-sm-"] .post-image-bg.grid-3 .post-portrait-title h4, div[class*="fw-col-sm-"] .post-image-bg.grid-4 .post-portrait-title h4 { font-size: 20px; line-height: 32px; } div[class*="fw-col-sm-"] .post-image-bg.grid-3 .post-portrait-title, div[class*="fw-col-sm-"] .post-image-bg.grid-4 .post-portrait-title { margin-top: 10px; } div[class*="fw-col-sm-9"] .post-image-bg.grid-3 { width: 50%; } .post-image-bg.grid-4 { width: 33.33%; } .post-image-bg.grid-3 .post-portrait-content, .post-image-bg.grid-4 .post-portrait-content { display: none; } .post-image-bg.grid-3.is-sticky .img-container .post-body-wrapper { width: calc( 100% - 60px ); padding-bottom: 30px; left: 30px; } .post-image-bg.grid-3.is-sticky .img-container { padding: 30px 0; } } @media all and (max-width: 1000px) { .post-image-bg.grid-3, .post-image-bg.grid-4 { width: 50%; } div[class*="fw-col-sm-"] .post-image-bg.grid-3.is-sticky .post-info-container { display: block; } div[class*="fw-col-sm-"] .post-image-bg.grid-4 { width: 100%; } div[class*="fw-col-sm-"] .post-image-bg.grid-2 .post-portrait-content, div[class*="fw-col-sm-"] .post-image-bg.grid-3 .post-portrait-content, div[class*="fw-col-sm-"] .post-image-bg.grid-4 .post-portrait-content { display: block; } div[class*="fw-col-sm-"] .post-image-bg.grid-2.gallery-is-visible .post-portrait-content, div[class*="fw-col-sm-"] .post-image-bg.grid-3.gallery-is-visible .post-portrait-content, div[class*="fw-col-sm-"] .post-image-bg.grid-3.is-sticky .post-portrait-content, .post-image-bg.grid-2 .post-portrait-content, div[class*="fw-col-sm-"] .post-image-bg.gallery-is-visible .post-portrait-content, div[class*="fw-col-sm-"] .post-image-bg.gallery-is-visible .read-more-container, div[class*="fw-col-sm-"] .post-image-bg.featured-content-is-visible .post-portrait-content { display: none; } .post-image-bg.grid-1.is-sticky .img-container .post-body-wrapper, .post-image-bg.grid-2.is-sticky .img-container .post-body-wrapper { width: calc( 100% - 60px ); padding-bottom: 30px; left: 30px; } .post-image-bg.grid-1.is-sticky .img-container, .post-image-bg.grid-2.is-sticky .img-container { padding: 30px 0; } } @media all and (max-width: 767px) { div[class*="fw-col-sm-"] .post-image-bg.grid-3 .post-portrait-title h4, div[class*="fw-col-sm-"] .post-image-bg.grid-4 .post-portrait-title h4 { font-size: 18px; line-height: 30px; } } @media all and (max-width: 700px) { .col-md-9 .post-image-bg.grid-2.is-sticky, .col-md-9 .post-image-bg.grid-3.is-sticky, div[class*="fw-col-sm-"] .post-image-bg.grid-2.is-sticky, div[class*="fw-col-sm-"] .post-image-bg.grid-3.is-sticky { width: 100%; } div[class*="fw-col-sm-"] .post-image-bg.grid-3.is-sticky .post-portrait-content { display: block; } div[class*="fw-col-sm-"] .post-image-bg.grid-2.is-sticky.layout-image-bg, div[class*="fw-col-sm-"] .post-image-bg.grid-3.is-sticky.layout-image-bg, div[class*="fw-col-sm-"] .mixed_layout .post-image-bg.grid-2.is-sticky, div[class*="fw-col-sm-"] .mixed_layout .post-image-bg.grid-3.is-sticky { width: 50%; } .post-image-bg .img-container .post-body-wrapper { width: calc( 100% - 60px ); padding-bottom: 30px; left: 30px; } .post-image-bg.is-sticky .img-container { padding: 30px 0; } } @media all and (max-width: 600px) { .post-image-bg.grid-2, .post-image-bg.grid-3, .post-image-bg.grid-4, div[class*="fw-col-sm-9"] .post-image-bg.grid-3, div[class*="fw-col-sm-"] .post-image-bg.grid-2.is-sticky.layout-image-bg, div[class*="fw-col-sm-"] .post-image-bg.grid-3.is-sticky.layout-image-bg, div[class*="fw-col-sm-"] .mixed_layout .post-image-bg.grid-2.is-sticky, div[class*="fw-col-sm-"] .mixed_layout .post-image-bg.grid-3.is-sticky { width: 100%; } .post-image-bg.grid-2 .post-portrait-content, .post-image-bg.grid-3 .post-portrait-content, .post-image-bg.grid-4 .post-portrait-content { display: block; } .post-image-bg.grid-1 .post-portrait-content .content-large, .post-image-bg.grid-2 .post-portrait-content .content-large, .post-image-bg.grid-3 .post-portrait-content .content-large, .post-image-bg.grid-4 .post-portrait-content .content-large { display: none; } .post-image-bg.grid-1 .post-portrait-content .content-small, .post-image-bg.grid-2 .post-portrait-content .content-small, .post-image-bg.grid-3 .post-portrait-content .content-small, .post-image-bg.grid-4 .post-portrait-content .content-small { display: block; } } /* 12.3 end post image background */ /** * ------------------------------------------------- * 13.0 Authors Block * ------------------------------------------------- **/ .author-list-wrapper { position: relative; display: block; height: auto; width: 100%; overflow: hidden; padding: 0 15px; } .author-list-wrapper.carousel-container-outer { padding-top: 50px; } .author-list-wrapper .author-list-container { display: block; } .author-list-wrapper .author-block { position: relative; float: left; margin: 0; overflow: hidden; -webkit-backface-visibility: hidden; } .author-list-wrapper .author-block .avatar-container { position: absolute; display: block; left: 0; top: 0; width: 100px; height: auto; text-align: center; } .author-list-wrapper .author-block .avatar-link, .author-list-wrapper .avatar-container .post-count-container { position: relative; float: left; } .author-list-wrapper .avatar-container .post-count-container { float: none; display: inline-block; width: 85px; height: auto; border-top: 1px solid #dedede; padding-top: 10px; margin-top: 20px; } .author-list-wrapper .post-count-container p { text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: #262626; } .author-list-wrapper .avatar-link img { width: 100%; height: 100%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; -webkit-backface-visibility: hidden; } .author-list-wrapper .grid-1 .avatar-link, .author-list-wrapper .grid-2 .avatar-link, .author-list-wrapper .grid-3 .avatar-link, .author-list-wrapper .grid-4 .avatar-link { width: 100px; height: 100px; } .author-list-wrapper .author-block .content-container { position: relative; float: left; width: 100%; min-height: 155px; height: auto; overflow: hidden; } .author-list-wrapper .author-block.grid-1 { width: 100%; } .author-list-wrapper .author-block.grid-2 { width: 50%; } .author-list-wrapper .author-block.grid-3 { width: 33.33%; } .author-list-wrapper .author-block.grid-4 { width: 25%; } .author-list-wrapper .avatar-link { position: relative; float: left; display: block; z-index: 2; overflow: hidden; } .author-list-wrapper .grid-1 .text-container, .author-list-wrapper .grid-2 .text-container, .author-list-wrapper .grid-3 .text-container, .author-list-wrapper .grid-4 .text-container { position: relative; float: left; display: block; width: 100%; height: auto; padding: 0 10px 5px 120px; z-index: 1; } .author-list-wrapper .author-block .job-title { float: left; margin-top: 7px; width: 100%; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #777777; word-wrap: break-word; word-break: break-word; } .author-list-wrapper .author-block .author-name { position: relative; float: left; line-height: 20px; margin-left: -1px; word-wrap: break-word; word-break: break-word; } .author-list-wrapper .author-block .profile { display: block; float: left; margin-top: 8px; font-size: 13px; line-height: 22px; } .author-list-wrapper .author-block.grid-1 .profile.small-devices, .author-list-wrapper .author-block .profile.large-devices { display: block; } .author-list-wrapper .author-block.grid-1 .profile.large-devices, .author-list-wrapper .author-block .profile.small-devices { display: none; } .author-list-wrapper .author-block.grid-2 .profile.large-devices, .author-list-wrapper .author-block.grid-4 .profile.large-devices, .author-list-wrapper .author-block.grid-4 .profile.small-devices, .author-list-wrapper .author-block.grid-3 .profile.small-devices { display: none; } .author-list-wrapper .author-block.grid-2 .profile.small-devices, .author-list-wrapper .author-block.grid-3 .profile.large-devices { display: block; } div[class*="author-carousel-"] .author-block.grid-1 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-2 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.large-devices { display: block; } div[class*="author-carousel-"] .author-block.grid-1 .profile.small-devices, div[class*="author-carousel-"] .author-block.grid-2 .profile.small-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.small-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.small-devices { display: none; } .author-list-wrapper .author-block .read-more-container { position: relative; float: left; width: 100%; margin-top: 7px; text-align: left; } .author-list-wrapper .author-block .read-more-container a { position: relative; display: inline-block; text-transform: uppercase; letter-spacing: 3px; font-size: 11px; color: #262626; } .author-list-wrapper .author-block .read-more-container a::before { content: ''; position: absolute; display: block; left: -2px; bottom: 6px; width: 100%; height: 4px; z-index: -1; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .author-list-wrapper .author-block .read-more-container a:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .author-list-wrapper .author-list-carousel { text-align: center; } .author-list-wrapper .author-list-carousel .author-block { text-align: left; } .author-list-wrapper .author-list-carousel .owl-dots { position: relative; display: inline-block; width: auto; margin-top: 25px; } /* 13.1 Authors block on small devices */ @media all and (max-width: 1200px) { .author-list-wrapper .author-block.grid-4 { width: 33.334%; } .author-list-wrapper .author-block.grid-3 .profile.large-devices { display: none; } div[class*="author-carousel-"] .author-block.grid-2 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.large-devices { display: none; } } @media all and (max-width: 1000px) { .author-list-wrapper .author-block.grid-3, .author-list-wrapper .author-block.grid-4 { width: 50%; } .author-list-wrapper .author-block.grid-2 .profile.small-devices { display: none; } .author-list-wrapper .author-block.grid-2 .profile.large-devices, .author-list-wrapper .author-block.grid-3 .profile.large-devices, .author-list-wrapper .author-block.grid-4 .profile.large-devices { display: block; } div[class*="author-carousel-"] .author-block.grid-2 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.large-devices { display: block; } div[class*="author-carousel-"] .author-block.grid-2 .profile.small-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.small-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.small-devices { display: none; } } @media all and (max-width: 800px) and (orientation : portrait) { .author-list-wrapper .author-block.grid-2, .author-list-wrapper .author-block.grid-3, .author-list-wrapper .author-block.grid-4 { width: 50%; } .author-list-wrapper .author-block.grid-4 .profile.small-devices, .author-list-wrapper .author-block.grid-3 .profile.small-devices, .author-list-wrapper .author-block.grid-2 .profile.small-devices { display: none; } div[class*="author-carousel-"] .author-block.grid-2 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.large-devices { display: none; } } @media all and (max-width: 800px) and (orientation : landscape) { .author-list-wrapper .author-block.grid-2, .author-list-wrapper .author-block.grid-3, .author-list-wrapper .author-block.grid-4 { width: 100%; } .author-list-wrapper .author-block.grid-2 .profile.small-devices, .author-list-wrapper .author-block.grid-3 .profile.small-devices, .author-list-wrapper .author-block.grid-4 .profile.small-devices { display: block; } .author-list-wrapper .author-block.grid-2 .profile.large-devices, .author-list-wrapper .author-block.grid-3 .profile.large-devices, .author-list-wrapper .author-block.grid-4 .profile.large-devices { display: none; } div[class*="author-carousel-"] .author-block.grid-2 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.large-devices { display: none; } div[class*="author-carousel-"] .author-block.grid-2 .profile.small-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.small-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.small-devices { display: block; } } @media all and (max-width: 650px) and (orientation : portrait) { .author-list-wrapper .author-block.grid-2, .author-list-wrapper .author-block.grid-3, .author-list-wrapper .author-block.grid-4 { width: 100%; } .author-list-wrapper .author-block.grid-2 .profile.small-devices, .author-list-wrapper .author-block.grid-3 .profile.small-devices, .author-list-wrapper .author-block.grid-4 .profile.small-devices { display: block; } .author-list-wrapper .author-block.grid-2 .profile.large-devices, .author-list-wrapper .author-block.grid-3 .profile.large-devices, .author-list-wrapper .author-block.grid-4 .profile.large-devices { display: none; } div[class*="author-carousel-"] .author-block.grid-2 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.large-devices { display: none; } div[class*="author-carousel-"] .author-block.grid-2 .profile.small-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.small-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.small-devices { display: block; } } @media all and (max-width: 450px) { .author-list-wrapper .author-block.grid-1 .profile.large-devices { display: none; } .author-list-wrapper .author-block.grid-1 .profile.small-devices { display: block; } div[class*="author-carousel-"] .author-block.grid-2 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.large-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.large-devices { display: none; } div[class*="author-carousel-"] .author-block.grid-2 .profile.small-devices, div[class*="author-carousel-"] .author-block.grid-3 .profile.small-devices, div[class*="author-carousel-"] .author-block.grid-4 .profile.small-devices { display: none; } } /** * ------------------------------------------------- * 14.0 Category Block * ------------------------------------------------- **/ .category-list-wrapper { position: relative; display: block; height: auto; width: 100%; overflow: hidden; padding: 0 15px; text-align: center; } .category-list-wrapper.carousel-container-outer { padding-top: 55px; } .category-list-wrapper .category-list-container { display: block; } .category-list-wrapper .category-block { text-align: left; } .category-list-wrapper .category-block.grid-1 { width: 100%; } .category-list-wrapper .category-block.grid-2 { width: 50%; } .category-list-wrapper .category-block.grid-3 { width: 33.33%; } .category-list-wrapper .category-block.grid-4 { width: 25%; } .category-list-wrapper .category-block .img-overlay { -webkit-backface-visibility: hidden; } .category-list-wrapper .category-block .text-container, .category-list-wrapper .category-block .post-portrait-title { margin-top: 0; } .category-list-wrapper .category-block .text-container { padding-left: 0; } .category-list-wrapper .category-block .link { text-transform: capitalize; } .category-list-wrapper .category-block .posts-count, .category-list-wrapper .category-block .posts-text { color: #777777; } .category-list-wrapper .category-block .posts-count { font-size: 32px; margin-top: 2px; } .category-list-wrapper .category-block .posts-text { text-transform: uppercase; font-size: 11px; letter-spacing: 2px; margin-top: 1px; } .category-list-wrapper .category-block .post-portrait-content { margin-top: 15px; } .category-list-wrapper .category-block .read-more-container { margin-top: 10px; } .category-list-wrapper .owl-dots { position: relative; display: inline-block; width: auto; margin-top: 35px; } /* 14.1 Category block on small devices */ @media all and (max-width: 700px) { .category-list-wrapper .category-block.grid-4 { width: 33.334%; } } @media all and (max-width: 600px) { .category-list-wrapper .category-block.grid-4, .category-list-wrapper .category-block.grid-3 { width: 50%; } } @media all and (max-width: 370px) { .category-list-wrapper .category-block.grid-4, .category-list-wrapper .category-block.grid-3, .category-list-wrapper .category-block.grid-2 { width: 100%; } } /** * ------------------------------------------------- * 15.0 Icon Block * ------------------------------------------------- **/ .icon-block .icon-block-content { width: 100%; } .icon-block .icon i { width: auto; } .icon-block h6 { position: relative; display: block; margin-top: 32px; text-transform: uppercase; letter-spacing: 3px; font-size: 11px; } .icon-block h6::before, .icon-block h6::after { content: ''; position: absolute; display: block; width: 35px; height: 1px; top: -20px; left: 50%; z-index: 1; -webkit-transform: translateX( -50% ); -moz-transform: translateX( -50% ); -ms-transform: translateX( -50% ); -o-transform: translateX( -50% ); transform: translateX( -50% ); } .icon-block h6::after { z-index: 2; background: #262626; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; -ms-transform-origin: 50%; -o-transform-origin: 50%; transform-origin: 50%; -webkit-transform: scaleX( 0 ) translateX( -50% ); -moz-transform: scaleX( 0 ) translateX( -50% ); -ms-transform: scaleX( 0 ) translateX( -50% ); -o-transform: scaleX( 0 ) translateX( -50% ); transform: scaleX( 0 ) translateX( -50% ); } .icon-block:hover h6::after { -webkit-transform-origin: -50%; -moz-transform-origin: -50%; -ms-transform-origin: -50%; -o-transform-origin: -50%; transform-origin: -50%; -webkit-transform: scaleX( 1 ) translateX( -50% ); -moz-transform: scaleX( 1 ) translateX( -50% ); -ms-transform: scaleX( 1 ) translateX( -50% ); -o-transform: scaleX( 1 ) translateX( -50% ); transform: scaleX( 1 ) translateX( -50% ); } .icon-block h6 .inactive { cursor: default; } .icon-block h6 a { position: relative; display: inline-block; } .icon-block h6 a::before { content: ''; position: absolute; display: block; bottom: 11px; left: -1px; height: 4px; width: 100%; z-index: -1; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } .icon-block h6 a:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .icon-block h6 a.inactive::before { display: none; } .icon-block .icon i.entypo { margin-right: -1px; } /* 15.1 Icon on top */ .icon-block-top { position: relative; display: inline-block; text-align: center; margin-bottom: 30px; } .icon-block-top .icon, .icon-block-left-2 .icon, .icon-block-right-2 .icon { position: relative; display: block; height: auto; } .icon-block-top .icon i, .icon-block-left-2 .icon i, .icon-block-right-2 .icon i { font-size: 60px; line-height: 60px; font-weight: normal; color: #262626; } .icon-block-top .icon .icon-img, .icon-block-left-2 .icon .icon-img, .icon-block-right-2 .icon .icon-img { width: auto; height: 60px; } .icon-block-top .icon i.dashicons, .icon-block-left-2 .icon i.dashicons, .icon-block-right-2 .icon i.dashicons { height: 61px; } .icon-block-top .icon i.linecons, .icon-block-left-2 .icon i.linecons, .icon-block-right-2 .icon i.linecons { font-size: 57px; line-height: 57px; } .icon-block-top .icon i.lnr, .icon-block-left-2 .icon i.lnr, .icon-block-right-2 .icon i.lnr { font-size: 58px; line-height: 58px; } .icon-block-top .icon i.unycon, .icon-block-left-2 .icon i.unycon, .icon-block-right-2 .icon i.unycon { font-size: 59px; line-height: 59px; } .icon-block-top .icon i.typcn, .icon-block-left-2 .icon i.typcn, .icon-block-right-2 .icon i.typcn { font-size: 56px; line-height: 51px; } .icon-block-top .icon i.dripicons, .icon-block-left-2 .icon i.dripicons, .icon-block-right-2 .icon i.dripicons { font-size: 55px; line-height: 50px; } .icon-block-top .icon-block-content { margin-top: 40px; } .icon-block-top p { position: relative; display: block; margin-top: 10px; -webkit-backface-visibility: hidden; } /* 15.2 Icon on left */ .icon-block-left, .icon-block-left-2, .icon-block-right-2, .icon-block-right { position: relative; display: inline-block; text-align: left; margin-bottom: 30px; } .icon-block-left .icon-container, .icon-block-right .icon-container { position: absolute; left: 15px; top: 0; width: 75px; height: 50px; z-index: 1; } .icon-block-left .icon-block-content, .icon-block-left-2 .icon-block-content, .icon-block-right-2 .icon-block-content, .icon-block-right .icon-block-content { position: relative; float: left; width: 100%; padding-left: 75px; } .icon-block-left .content-container, .icon-block-left-2 .content-container, .icon-block-right-2 .content-container, .icon-block-right .content-container { position: relative; float: left; width: 100%; margin-top: -50px; padding-left: 75px; z-index: 1; } .icon-block-left .icon i, .icon-block-right .icon i { position: relative; float: left; font-size: 40px; margin-top: 5px; color: #262626; } .icon-block-left .icon .icon-img, .icon-block-right .icon .icon-img { width: 40px; height: auto; margin-top: 10px; } .icon-block-left .icon i.unycon, .icon-block-right .icon i.unycon { margin-top: 10px; font-size: 39px; } .icon-block-left .icon i.typcn, .icon-block-right .icon i.typcn { margin-top: -5px; font-size: 41px; } .icon-block-left .icon i.entypo, .icon-block-right .icon i.entypo { margin-top: 1px; font-size: 39px; } .icon-block-left .icon i.lnr, .icon-block-right .icon i.lnr { margin-top: 9px; font-size: 39px; } .icon-block-left .icon i.fa, .icon-block-right .icon i.fa { margin-top: 10px; font-size: 41px; } .icon-block-left .icon i.linecons, .icon-block-right .icon i.linecons { margin-top: 4px; font-size: 39px; } .icon-block-left h6, .icon-block-right h6 { position: relative; float: left; display: block; text-transform: uppercase; letter-spacing: 2px; margin-top: 0; width: 100%; } .icon-block-left h6::after, .icon-block-left h6::before, .icon-block-right h6::after, .icon-block-right h6::before { width: 1px; height: 39px; left: -19px; top: 9px; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); } .icon-block-left h6::after, .icon-block-right h6::after { -webkit-transform-origin: 0 bottom; -moz-transform-origin: 0 bottom; -ms-transform-origin: 0 bottom; -o-transform-origin: 0 bottom; transform-origin: 0 bottom; -webkit-transform: scaleY( 0 ) translateX( 0 ); -moz-transform: scaleY( 0 ) translateX( 0 ); -ms-transform: scaleY( 0 ) translateX( 0 ); -o-transform: scaleY( 0 ) translateX( 0 ); transform: scaleY( 0 ) translateX( 0 ); } .icon-block-left:hover h6::after, .icon-block-right:hover h6::after { -webkit-transform-origin: 0 top; -moz-transform-origin: 0 top; -ms-transform-origin: 0 top; -o-transform-origin: 0 top; transform-origin: 0 top; -webkit-transform: scaleY( 1 ) translateX( 0 ); -moz-transform: scaleY( 1 ) translateX( 0 ); -ms-transform: scaleY( 1 ) translateX( 0 ); -o-transform: scaleY( 1 ) translateX( 0 ); transform: scaleY( 1 ) translateX( 0 ); } .icon-block-left p, .icon-block-left-2 p, .icon-block-right-2 p, .icon-block-right p { position: relative; float: left; display: block; margin-top: 5px; color: #636363; -webkit-backface-visibility: hidden; } /* 15.3 Icon on right */ .icon-block-right { text-align: right; } .icon-block-right .icon-container { left: inherit; right: 15px; } .icon-block-right .icon-block-content { float: right; padding-right: 75px; padding-left: 0; } .icon-block-right .content-container { float: right; padding-right: 75px; padding-left: 0; } .icon-block-right .icon i, .icon-block-right h6, .icon-block-right p { float: right; } .icon-block-right h6::after, .icon-block-right h6::before { right: -19px; left: inherit; } /* 15.4 Icon on top left */ .icon-block-left-2 .icon-container, .icon-block-right-2 .icon-container { position: relative; float: left; display: block; width: 100%; } .icon-block-left-2 .icon-block-content, .icon-block-left-2 .content-container, .icon-block-right-2 .icon-block-content, .icon-block-right-2 .content-container { padding-left: 0; } .icon-block-left-2 .icon i.entypo, .icon-block-right-2 .icon i.entypo { position: relative; float: left; margin-left: -1px; } .icon-block-left-2 h6::before, .icon-block-left-2 h6::after { left: 0; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); } .icon-block-left-2 h6::after { -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; -webkit-transform: scaleX( 0 ) translateX( 0 ); -moz-transform: scaleX( 0 ) translateX( 0 ); -ms-transform: scaleX( 0 ) translateX( 0 ); -o-transform: scaleX( 0 ) translateX( 0 ); transform: scaleX( 0 ) translateX( 0 ); } .icon-block-left-2:hover h6::after { -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; -webkit-transform: scaleX( 1 ) translateX( 0 ); -moz-transform: scaleX( 1 ) translateX( 0 ); -ms-transform: scaleX( 1 ) translateX( 0 ); -o-transform: scaleX( 1 ) translateX( 0 ); transform: scaleX( 1 ) translateX( 0 ); } .icon-block-left-2 .icon-block-content, .icon-block-right-2 .icon-block-content { margin-top: 8px; } /* 15.5 Icon on top right */ .icon-block-right-2 { text-align: right; } .icon-block-right-2 .icon-container { float: right; } .icon-block-right-2 .icon-container .icon { display: inline-block; } .icon-block-right-2 h6 { margin-right: -3px; } .icon-block-right-2 h6::before, .icon-block-right-2 h6::after { left: inherit; right: 3px; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); } .icon-block-right-2 h6::after { -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; -webkit-transform: scaleX( 0 ) translateX( 0 ); -moz-transform: scaleX( 0 ) translateX( 0 ); -ms-transform: scaleX( 0 ) translateX( 0 ); -o-transform: scaleX( 0 ) translateX( 0 ); transform: scaleX( 0 ) translateX( 0 ); } .icon-block-right-2:hover h6::after { -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; -webkit-transform: scaleX( 1 ) translateX( 0 ); -moz-transform: scaleX( 1 ) translateX( 0 ); -ms-transform: scaleX( 1 ) translateX( 0 ); -o-transform: scaleX( 1 ) translateX( 0 ); transform: scaleX( 1 ) translateX( 0 ); } .single-page .icon-block-right-2 .icon-block-content p { width: 100%; } /* 15.6 Icon box carousel */ .icon-box-carousel { position: relative; float: left; display: block; width: 100%; text-align: center; padding: 100px 0 0 0; } .icon-box-carousel .owl-item .icon-img { display: inline-block; } .icon-box-carousel .owl-dots { position: relative; width: auto; display: inline-block; margin-top: 40px; } .icon-box-carousel .owl-dots .owl-dot { cursor: pointer; } .icon-box-carousel .owl-slider-nav { right: 15px; } .icon-box-carousel .owl-slider-nav.left-arrow { right: 50px; } /** * ------------------------------------------------- * 16.0 Testimonials Block * ------------------------------------------------- **/ .testimonials-carousel.carousel-container-outer { padding-top: 15px; } .testimonials-block, .testimonials-block .author-photo-container { position: relative; float: left; display: block; width: 100%; text-align: left; } .testimonials-block { padding-bottom: 15px; } .testimonials-carousel { position: relative; display: block; float: left; width: 100%; height: auto; text-align: center; } .testimonials-carousel .owl-dots { position: relative; display: inline-block; width: auto; margin-top: 25px; } .testimonials-block .author-photo-container { text-align: center; } .testimonials-block .author-photo-container .line { position: absolute; display: block; left: 0; top: 40px; width: 100%; height: 1px; background: #dedede; } .testimonials-block .author-photo-container .photo-container { position: relative; display: inline-block; width: 81px; height: 81px; background: #ffffff; border: 1px solid #dedede; z-index: 2; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .testimonials-block .photo-container .author-photo { position: relative; float: left; display: block; width: 73px; height: 73px; margin: 3px 0 0 3px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .testimonials-block .photo-container .icon { position: relative; display: inline-block; font-size: 32px; width: 30px; color: #262626; margin-top: 25px; } .testimonials-block .testimonial-text { position: relative; float: left; display: block; width: 100%; height: auto; margin-top: 15px; } .testimonials-block .testimonial-text .icon { position: relative; display: inline-block; } .testimonials-block .testimonial-text .icon-right { -webkit-transform: translate( -18px, 7px ); -moz-transform: translate( -18px, 7px ); -ms-transform: translate( -18px, 7px ); -o-transform: translate( -18px, 7px ); transform: translate( -18px, 7px ); } .testimonials-block .testimonial-text .text { position: relative; display: inline-block; font-style: italic; word-wrap: break-word; word-break: break-word; padding-left: 25px; z-index: 2; } .testimonials-block .testimonial-text::before { content: '\f122'; font-family: 'dashicons'; position: absolute; left: 0; top: 0; display: block; font-size: 48px; color: #f2f2f2; z-index: 1; } .testimonials-block .author-container { position: relative; display: block; float: left; width: 100%; } .testimonials-block .author-container .author-job { font-size: 11px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #777777; margin-left: 15px; } /** * ------------------------------------------------- * 17.0 Call To Action Block * ------------------------------------------------- **/ .call-to-action-block { display: block; } .call-to-action-block.call-to-action-2.size-button-small { padding-bottom: 17.5px; } .call-to-action-block.call-to-action-2.size-button-medium { padding-bottom: 22.5px; } .call-to-action-block.call-to-action-2.size-button-large { padding-bottom: 27.5px; } .call-to-action-block .overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .call-to-action-block .call-to-action-content { position: relative; display: block; z-index: 2; } .call-to-action-block .call-to-action-container { position: relative; display: table; width: 100%; padding: 28px 30px 30px 30px; border: 1px solid #E1E1E1; } .call-to-action-block.call-to-action-2.size-button-small .call-to-action-container.text-align-center { padding-bottom: 37px; } .call-to-action-block.call-to-action-2.size-button-medium .call-to-action-container.text-align-center { padding-bottom: 42px; } .call-to-action-block.call-to-action-2.size-button-large .call-to-action-container.text-align-center { padding-bottom: 47px; } .call-to-action-block.call-to-action-2 .call-to-action-container.text-align-left { text-align: left; } .call-to-action-block.call-to-action-2 .call-to-action-container.text-align-center { text-align: center; } .call-to-action-block.call-to-action-2 .call-to-action-container.text-align-right { text-align: right; } .call-to-action-block.call-to-action-1 .call-to-action-container > div:not( .overlay ) { position: relative; display: table-cell; vertical-align: middle; z-index: 2; } .call-to-action-block .call-to-action-container h4 { display: block; } .call-to-action-block .call-to-action-container p { margin-top: 10px; } .call-to-action-block .call-to-action-container .call-to-action-button-container { position: relative; padding-left: 30px; padding-top: 10px; text-align: right; z-index: 3; } .call-to-action-block.call-to-action-2 .call-to-action-container .call-to-action-button-container { position: absolute; display: block; z-index: 3; } .call-to-action-block.call-to-action-2 .call-to-action-container.text-align-right .call-to-action-button-container { left: 0; } .call-to-action-block.call-to-action-2 .call-to-action-container.text-align-left .call-to-action-button-container { right: 30px; } .call-to-action-block.call-to-action-2 .call-to-action-container.text-align-center .call-to-action-button-container { padding-left: 0; left: 50%; -webkit-transform: translateX( -50% ); -moz-transform: translateX( -50% ); -ms-transform: translateX( -50% ); -o-transform: translateX( -50% ); transform: translateX( -50% ); } .call-to-action-block.call-to-action-2 .call-to-action-container .call-to-action-button-container.button-small { bottom: -17.5px; } .call-to-action-block.call-to-action-2 .call-to-action-container .call-to-action-button-container.button-medium { bottom: -22.5px; } .call-to-action-block.call-to-action-2 .call-to-action-container .call-to-action-button-container.button-large { bottom: -27.5px; } .call-to-action-block .call-to-action-container .call-to-action-button-container a { white-space: nowrap; z-index: 2; } /* 17.1 Call To Action Block - On Small Devices */ @media all and (max-width: 600px) { .call-to-action-block.call-to-action-2.size-button-small .call-to-action-container.text-align-left, .call-to-action-block.call-to-action-2.size-button-small .call-to-action-container.text-align-right, .call-to-action-block.call-to-action-2.size-button-small .call-to-action-container.text-align-center { padding-bottom: 37px; } .call-to-action-block.call-to-action-2.size-button-medium .call-to-action-container.text-align-left, .call-to-action-block.call-to-action-2.size-button-medium .call-to-action-container.text-align-right, .call-to-action-block.call-to-action-2.size-button-medium .call-to-action-container.text-align-center { padding-bottom: 42px; } .call-to-action-block.call-to-action-2.size-button-large .call-to-action-container.text-align-left, .call-to-action-block.call-to-action-2.size-button-large .call-to-action-container.text-align-right, .call-to-action-block.call-to-action-2.size-button-large .call-to-action-container.text-align-center { padding-bottom: 47px; } } @media all and (max-width: 450px) { .call-to-action-block .call-to-action-container { display: block; padding: 18px 20px 20px 20px; } .call-to-action-block.call-to-action-1 .call-to-action-container > div:not( .overlay ) { width: 100%; display: block; vertical-align: inherit; } .call-to-action-block.call-to-action-1 .call-to-action-container .call-to-action-button-container { margin-top: 30px; padding: 0; text-align: center; } } /** * ------------------------------------------------- * 18.0 Instagram Feed * ------------------------------------------------- **/ .instagram-feed-outer { z-index: 2; } .instagram-feed { position: relative; float: left; display: block; width: 100%; height: auto; } .instagram-feed .feed-wrapper { display: block; z-index: 1; } .instagram-feed .username-link-container { position: absolute; display: block; text-align: center; width: 100%; height: auto; left: 0; bottom: -16px; z-index: 2; } .instagram-feed .username-link-container .username-link { text-transform: none; word-wrap: break-word; word-break: break-word; letter-spacing: 0; font-size: 12px; min-height: 35px; height: auto; z-index: 2; } .instagram-feed .username-link .icon { position: relative; display: inline-block; font-size: 16px; margin-right: 5px; -webkit-transform: translateY( 1px ); -moz-transform: translateY( 1px ); -ms-transform: translateY( 1px ); -o-transform: translateY( 1px ); transform: translateY( 1px ); } .instagram-feed .username-link-container .line { position: absolute; display: block; width: 100%; height: 2px; left: 0; bottom: 16px; z-index: 1; } .instagram-feed .username-link-container .username-link:hover ~ .line { background: #262626; } .instagram-feed .feed-container { position: relative; float: left; overflow: hidden; } .instagram-feed .feed-container.grid-1 { width: 100%; } .instagram-feed .feed-container.grid-2 { width: 50%; } .instagram-feed .feed-container.grid-3 { width: 33.33%; } .instagram-feed .feed-container.grid-4 { width: 25%; } .instagram-feed .feed-container.grid-5 { width: 20%; } .instagram-feed .feed-container.grid-6 { width: 16.66%; } .instagram-feed .feed-container.grid-8 { width: 12.5%; } .instagram-feed .feed { position: relative; display: block; float: left; width: 100%; width: calc( 100% + 1px ); height: auto; overflow: hidden; -webkit-backface-visibility: hidden; } .instagram-feed .feed .feed-overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; background: none; opacity: 0; z-index: 2; } .instagram-feed .feed img { position: relative; display: inline-block; width: 100%; height: auto; z-index: 1; -webkit-transform: scale( 1 ); -moz-transform: scale( 1 ); -ms-transform: scale( 1 ); -o-transform: scale( 1 ); transform: scale( 1 ); -webkit-backface-visibility: hidden; } .instagram-feed .feed:hover img { -webkit-transform: scale( 1.5 ); -moz-transform: scale( 1.5 ); -ms-transform: scale( 1.5 ); -o-transform: scale( 1.5 ); transform: scale( 1.5 ); } .instagram-feed .feed .feed-info, .instagram-feed .feed .feed-info::before, .widget_simplepixel_instagram .feed .feed-info .overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; width: calc( 100% + 1px ); height: 100%; z-index: 3; } .instagram-feed .feed .feed-info::before { content: ''; background: rgba( 0, 0, 0, 0.7 ); background: -moz-linear-gradient( top, rgba( 255, 255, 255,0 ) 0%, rgba( 0, 0, 0, 0.7 ) 100% ); background: -webkit-linear-gradient( top, rgba( 255, 255, 255,0 ) 0%, rgba( 0, 0, 0, 0.7 ) 100% ); background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 0.7 ) 100% ); -webkit-transform: translateY( 100% ); -moz-transform: translateY( 100% ); -ms-transform: translateY( 100% ); -o-transform: translateY( 100% ); transform: translateY( 100% ); } .instagram-feed .feed:hover .feed-info::before { -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .instagram-feed .feed-info .info { width: 100%; height: auto; text-align: center; z-index: 4; } .instagram-feed .feed-info .info p { position: relative; display: inline-block; width: auto; color: #ffffff; text-align: center; font-size: 13px; margin: 0 7px; font-weight: 400; visibility: hidden; opacity: 0; -webkit-transform : translateY( 10px ); -moz-transform : translateY( 10px ); -ms-transform : translateY( 10px ); -o-transform : translateY( 10px ); transform : translateY( 10px ); } .instagram-feed .feed:hover .info p { visibility: visible; opacity: 1; -webkit-transform : translateY( 0 ); -moz-transform : translateY( 0 ); -ms-transform : translateY( 0 ); -o-transform : translateY( 0 ); transform : translateY( 0 ); } .instagram-feed .feed-info .info .icon { position: relative; display: inline-block; font-size: 20px; margin-right: 7px; -webkit-transform: translateY( 5px ); -moz-transform: translateY( 5px ); -ms-transform: translateY( 5px ); -o-transform: translateY( 5px ); transform: translateY( 5px ); } .widget_simplepixel_instagram .instagram-feed .feed .feed-info::before { display: none; } .widget_simplepixel_instagram .feed .feed-info .overlay { background: rgba( 0, 0, 0, 0.7 ); background: -moz-linear-gradient( top, rgba( 255, 255, 255,0 ) 0%, rgba( 0, 0, 0, 0.7 ) 100% ); background: -webkit-linear-gradient( top, rgba( 255, 255, 255,0 ) 0%, rgba( 0, 0, 0, 0.7 ) 100% ); background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, rgba( 0, 0, 0, 0.7 ) 100% ); -webkit-transform: translateY( 100% ); -moz-transform: translateY( 100% ); -ms-transform: translateY( 100% ); -o-transform: translateY( 100% ); transform: translateY( 100% ); } .widget_simplepixel_instagram .feed:hover .feed-info .overlay { -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .widget_simplepixel_instagram .owl-carousel { text-align: center; } .widget_simplepixel_instagram .owl-carousel .owl-dots { position: relative; display: inline-block; width: auto; margin-top: 30px; } .widget_simplepixel_instagram .owl-carousel .owl-nav { display: none; } /* 18.1 Instagram Feed on Small Devices */ @media all and (max-width: 600px) { .instagram-feed .feed-container.grid-6 { width: 33.33%; } .instagram-feed .feed-container.grid-8 { width: 25%; } } @media all and (max-width: 400px) { .instagram-feed .feed-container.grid-2, .instagram-feed .feed-container.grid-3, .instagram-feed .feed-container.grid-4, .instagram-feed .feed-container.grid-5, .instagram-feed .feed-container.grid-6, .instagram-feed .feed-container.grid-8 { width: 100%; } } /** * ------------------------------------------------- * 19.0 Subscribe Block * ------------------------------------------------- **/ .subscribe-form, .subscribe-block { position: relative; display: block; } .subscribe-block .overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .subscribe-block .subscribe-container.grid-1, .subscribe-block .subscribe-container.grid-2 { position: relative; display: table; width: 100%; padding: 28px 15px 30px 15px; border: 1px solid #E1E1E1; } .subscribe-block .subscribe-container.grid-1 { float: left; display: block; text-align: center; padding: 35px 15px 42px 15px; } .subscribe-block .subscribe-container.grid-2 > div:not( .overlay ) { position: relative; display: table-cell; vertical-align: middle; z-index: 2; } .subscribe-block .subscribe-container.grid-1 > div:not( .overlay ) { position: relative; display: block; z-index: 2; } .subscribe-block .subscribe-container.grid-1 .text-container, .subscribe-block .subscribe-container.grid-1 .subscribe-form-container { padding: 0 15px; } .subscribe-block .subscribe-container.grid-2 .text-container { float: none; width: 50%; padding: 0 15px; } .subscribe-block .subscribe-container.grid-2 .subscribe-form-container { width: 50%; padding: 30px 15px; } .single-page .outer-container .subscribe-container .text-container { padding: 0 15px; } .subscribe-block .subscribe-container .subscribe-title { position: relative; display: block; } .subscribe-block .subscribe-container.grid-1 p { margin-top: 15px; } .subscribe-block .subscribe-container.grid-2 p { margin-top: 10px; } .subscribe-block .subscribe-container.grid-1 .subscribe-form-container .subscribe-form { position: relative; float: left; width: 100%; margin-top: 45px; } .subscribe-block .subscribe-container.grid-2 .subscribe-form-container .subscribe-form { position: relative; } .subscribe-block .line { position: relative; display: inline-block; width: 140px; height: 3px; background: #f2f2f2; margin-top: 23px; } .subscribe-block .line::before { content: ''; position: absolute; left: 50%; margin-left: -20px; top: 0; width: 40px; height: 100%; } .subscribe-block .form-label { position: absolute; display: block; left: 0; top: 20px; font-family: 'Muli', sans-serif; font-weight: 800; letter-spacing: 2px; font-size: 11px; text-transform: uppercase; color: #262626; width: auto; z-index: -1; -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .subscribe-block .subscribe-form.align-center .form-label, .page-404-content .search-form .form-label { left: 50%; -webkit-transform: translate( -50%, 0 ); -moz-transform: translate( -50%, 0 ); -ms-transform: translate( -50%, 0 ); -o-transform: translate( -50%, 0 ); transform: translate( -50%, 0 ); } .subscribe-block .form-label.is-focus { -webkit-transform: translateY( -45px ); -moz-transform: translateY( -45px ); -ms-transform: translateY( -45px ); -o-transform: translateY( -45px ); transform: translateY( -45px ); } .subscribe-block .subscribe-form.align-center .form-label.is-focus, .page-404-content .search-form .form-label.is-focus { -webkit-transform: translate( -50%, -45px ); -moz-transform: translate( -50%, -45px ); -ms-transform: translate( -50%, -45px ); -o-transform: translate( -50%, -45px ); transform: translate( -50%, -45px ); } .subscribe-block .button-subscribe { position: relative; display: inline-block; outline: none; border: none; margin-top: 30px; } .subscribe-block .subscribe-form.align-left .button-subscribe { float: right; margin-top: 20px; } .subscribe-block .form-notif-container { position: relative; float: left; display: block; width: 100%; height: 0; overflow: hidden; } .subscribe-block .form-notif-container.is-visible { height: 98px; } .subscribe-block .form-notif { position: absolute; display: block; left: 0; top: 0; margin-top: 30px; text-align: left; visibility: hidden; -webkit-transform: translateY( -100% ); -moz-transform: translateY( -100% ); -ms-transform: translateY( -100% ); -o-transform: translateY( -100% ); transform: translateY( -100% ); } .subscribe-block .form-notif.is-visible { visibility: visible; -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .subscribe-block .form-notif .notification-block { padding: 13px 15px; } .subscribe-block .subscribe-container .notification-block p { margin: 0; font-size: 12px; } /* 19.1 Subscribe block on small devices */ @media all and (max-width: 600px) { .subscribe-block .subscribe-container.grid-2, .subscribe-block .subscribe-container.grid-2 > div:not( .overlay ) { display: block; float: left; } .subscribe-block .subscribe-container.grid-2 .text-container, .subscribe-block .subscribe-container.grid-2 .subscribe-form-container { width: 100%; } .subscribe-block .subscribe-container.grid-2 .subscribe-form-container { padding: 30px 15px 6px 15px; } .subscribe-block .subscribe-container.grid-2 .subscribe-form-container { margin-top: 22px; } } @media all and (max-width: 400px) { .subscribe-block .subscribe-form.align-center .form-label { width: 100%; text-align: center; } } /** * ------------------------------------------------- * 20.0 Header * ------------------------------------------------- **/ header { position: relative; display: block; float: left; width: 100%; z-index: 5; background: #ffffff; } header a.link-home { position: relative; display: inline-block; } /* header background overlay */ header .bg-overlay { position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; background: rgba( 255, 255, 255, 0 ); z-index: 1; } .header-1 .header-top > .container, .header-2 .header-bottom .logo-container > .container, .header-3 .logo-container > .container { z-index: 2; } /* Header - Logo & Site Title */ header .logo-container { position: relative; display: block; float: left; width: 100%; height: auto; padding: 35px 0; } .header-2 .logo-container { text-align: center; } .header-3 .logo-container { text-align: center; border-bottom: 2px solid #e0e0e0; } header .logo-container .header-logo { display: inline-block; width: auto; height: 110px; } header .site-title { position: relative; display: block; text-align: center; margin-top: 15px; color: #262626; text-transform: uppercase; line-height: 14px; font-weight: 700; letter-spacing: 4px; font-size: 10px; } /* Header - Menu Container */ header .menu-container, header .menu-container .menu-wrapper { position: relative; float: left; width: 100%; min-height: 60px; height: auto; text-align: left; } header .menu-container .menu-wrapper { border-bottom: 2px solid #e0e0e0; } .header-3 .menu-container .menu-wrapper { text-align: center; padding: 0 70px; } .header-3 .menu-container .notif-setup-menu { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; } /* Header - off canvas menu button */ header .offcanvas-button { position: absolute; display: block; top: 0; right: 0; width: 60px; height: 60px; } header .offcanvas-button.with-text { position: relative; display: inline-block; width: auto; top: inherit; right: inherit; background: none; margin-left: -15px; } header .offcanvas-button.with-text .icon-container { position: relative; float: left; display: block; width: 60px; height: 59px; } header .offcanvas-button.with-text .text-container { position: relative; float: left; display: inline-block; height: 59px; color: #262626; } header .offcanvas-button.with-text .text-container h6 { line-height: 59px; } header .offcanvas-button .line { position: relative; float: left; width: 30px; height: 3px; margin-top: 28px; margin-left: 15px; background: #ffffff; -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); } header .offcanvas-button .line::before, header .offcanvas-button .line::after { content: ''; position: absolute; left: 0; top: -5px; width: 30px; height: 3px; background: #ffffff; -webkit-transform: scaleX( 0.7 ); -moz-transform: scaleX( 0.7 ); -ms-transform: scaleX( 0.7 ); -o-transform: scaleX( 0.7 ); transform: scaleX( 0.7 ); } header .offcanvas-button .line::after { top: 5px; } header .offcanvas-button.with-text .line, header .offcanvas-button.with-text .line::after, header .offcanvas-button.with-text .line::before { background: #262626; } header .offcanvas-button:hover .line { -webkit-transform: scaleX( 0.7 ); -moz-transform: scaleX( 0.7 ); -ms-transform: scaleX( 0.7 ); -o-transform: scaleX( 0.7 ); transform: scaleX( 0.7 ); } header .offcanvas-button:hover .line::before, header .offcanvas-button:hover .line::after { -webkit-transform: scaleX( 1.3 ); -moz-transform: scaleX( 1.3 ); -ms-transform: scaleX( 1.3 ); -o-transform: scaleX( 1.3 ); transform: scaleX( 1.3 ); } .header-3 .offcanvas-button.with-text.handler-mobile-main-menu-button { display: none; } /* 20.1.1 Header Top */ header .header-top { position: relative; width: 100%; } header .header-top > .container { padding: 0; } header .menu-container-large { display: block; } header .search-button-header { position: relative; display: inline-block; width: 60px; height: 60px; line-height: 65px; text-align: center; text-decoration: none; color: #ffffff; } header .search-button-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #262626; z-index: -1; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } header .search-button-header:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } header .search-button-header i { font-size: 20px; } /* 20.1.2 Header Top For Header-1 */ .header-1 .header-top > .container { position: relative; } .header-1 .header-top .left-side, .header-1 .header-top .right-side { position: absolute; height: 60px; z-index: 2; } .header-1 .header-top .right-side { right: 0; left: inherit; } .header-1 .header-top .left-side .offcanvas-button { left: 15px; right: inherit; } .header-1 .right-side .offcanvas-button { display: none; } .header-1 .right-side .bordering { position: relative; float: left; width: 100%; height: 1px; background: rgba( 100, 100, 100, 0.1 ); display: none; } /* 20.1.3 Header Top For Header-2 */ .header-2 .header-top { width: 100%; min-height: 60px; height: auto; z-index: 2; border-bottom: 1px solid #f1f1f1; } .header-2 .header-top .search-button-header { float: right; margin-left: 15px; width: 60px; height: 60px; line-height: 65px; } .header-2 .header-top .social-media-container { margin-top: 19px; float: right; text-align: right; } .header-2 .offcanvas-button { display: none; left: 15px; right: inherit; z-index: 2; } /* 20.2.1 Header bottom */ header .header-bottom { width: 100%; display: block; min-height: 60px; height: auto; } header .header-bottom .container { padding:0 15px; } header .header-bottom .social-media-container { padding: 0; height: auto; border-top: 1px solid rgba( 100, 100, 100, 0.1 ); text-align: center; line-height: 55px; } header .header-bottom .social-media-container a { margin: 0 10px; } /* 20.2.2 Header bottom for Header-2 */ .header-2 .header-bottom { position: relative; float: left; display: block; width: 100%; height: auto; margin-top: -1px; z-index: 1; } .header-2 .header-bottom .container{ height: 100%; } .header-2 .header-bottom .sitelogo-container { width: 100%; height: 100%; border-top: 1px solid rgba( 100, 100, 100, 0.1 ); text-align: center; } /* 20.3 Header type 4 */ .header-4 { min-height: 80px; height: auto; border-bottom: 1px solid rgba( 100, 100, 100, 0.1 ); } .header-4 > .container { padding: 0; } .header-4 .logo-container-small { height: 80px; } .header-4 .logo-container-small .header-logo { display: inline-block; width: auto; height: 50px; margin-top: 15px; } .header-4 .right-side { height: 80px; } .header-4 .right-side .search-button-header { float: right; width: 25px; height: 25px; line-height: 30px; background: none; color: #262626; margin-top: 27px; } .header-4 .right-side .search-button-header i { font-size: 25px; } .header-4 .right-side .search-button-header::before { display: none; } .header-4 .right-side .social-media-container { position: relative; float: right; height: 80px; padding: 28px 0 0 0; text-align: right; margin-right: 15px; } .header-4 .center-side { min-height: 80px; border-left: 1px solid rgba( 100, 100, 100, 0.1 ); border-right: 1px solid rgba( 100, 100, 100, 0.1 ); } .header-4 .center-side .offcanvas-button { display: none; } .header-4 .menu-container { margin-left: 15px; min-height: 80px; } .header-4 .menu-dropdown .menu > li > a { padding: 33px 0; } .header-4 .menu-dropdown .menu > li > a::before { bottom: 39px; } @-moz-document url-prefix() { .header-4 .menu-dropdown .menu > li > a::before { bottom: 38px; } } .header-4 .menu-dropdown .menu > .menu-item-has-children::after { top: 36px; } /* 20.4 sticky header */ .sticky-header { position: fixed; top: 0; left: 0; min-height: 65px; height: auto; background: #ffffff; -webkit-box-shadow: 0px 2px 2px 0px rgba( 181, 181, 181, 0.3 ); -moz-box-shadow: 0px 2px 2px 0px rgba( 181, 181, 181, 0.3 ); box-shadow: 0px 2px 2px 0px rgba( 181, 181, 181, 0.3 ); -webkit-transform: translateY( -105% ); -moz-transform: translateY( -105% ); -ms-transform: translateY( -105% ); -o-transform: translateY( -105% ); transform: translateY( -105% ); z-index: 10; } .sticky-header.is-visible { -webkit-transform: translateY( 0 ); -moz-transform: translateY( 0 ); -ms-transform: translateY( 0 ); -o-transform: translateY( 0 ); transform: translateY( 0 ); } .admin-bar .sticky-header { top: 32px; } .sticky-header > .container { padding: 0; } .sticky-header .right-side { float: right; text-align: right; } .sticky-header .sticky-header-logo-container { position: relative; float: left; display: block; width: auto; height: 45px; margin-top: 10px; } .sticky-header .sticky-header-logo-container .sticky-header-logo { height: 45px; width: auto; } .sticky-header .menu-dropdown .notif-setup-menu { height: 65px; line-height: 65px; } .sticky-header .menu-dropdown .menu > li > a { padding: 25px 0; } .sticky-header .menu-dropdown .menu > .menu-item-has-children::after { top: 28px; } .sticky-header .menu-dropdown .menu > li > a::before { bottom: 31px; } .sticky-header .social-media-container { position: relative; display: block; width: auto; margin-top: 20px; } .sticky-header .offcanvas-button.with-text { -webkit-transform: translateY( 3px ); -moz-transform: translateY( 3px ); -ms-transform: translateY( 3px ); -o-transform: translateY( 3px ); transform: translateY( 3px ); } /* sticky header 1 */ .sticky-header-1 .center-side { text-align: center; display: none; } .sticky-header-1 .sticky-header-logo-container { margin-right: 30px; } .sticky-header-1 .menu-container { width: auto; } .sticky-header-1 .right-side .search-button-header, .sticky-header-3 .right-side .search-button-header { float: right; width: 65px; height: 65px; line-height: 70px; } @-moz-document url-prefix() { .sticky-header-1 .right-side .search-button-header, .sticky-header-3 .right-side .search-button-header { height: 66px; } } .sticky-header-1 .social-media-container, .sticky-header-3 .social-media-container { float: right; text-align: right; margin-right: 15px; } /* sticky header 2 */ .sticky-header-2 .menu-container { text-align: center; } .sticky-header-2 .center-side { text-align: center; } .sticky-header-2 .center-side .offcanvas-button.with-text { display: none; } /* sticky header 3 */ .sticky-header-3 .offcanvas-button { position: relative; float: left; top: inherit; right: inherit; width: 65px; height: 65px; } .sticky-header-3 .offcanvas-button .line { margin-top: 31px; margin-left: 18px; } .sticky-header-3 .center-side { text-align: center; } .sticky-header-3 .sticky-header-logo-container { display: inline-block; float: none; } /* sticky header 4 */ .sticky-header-4 .search-button-header { color: #262626; float: right; width: 20px; height: 20px; line-height: 20px; background: none; margin-top: 22px; } .sticky-header-4 .search-button-header::before { display: none; } .sticky-header-4 .offcanvas-button.with-text { display: none; } /* sticky header on small devices */ @media all and (max-width: 1199px) { .sticky-header-1 .center-side { display: block; } .sticky-header-1 .menu-container { display: none; } } @media all and (max-width: 999px) { .sticky-header-1 .social-media-container, .sticky-header-3 .social-media-container, .sticky-header-2 .menu-container, .sticky-header-4 .menu-container { display: none; } .sticky-header-2 .center-side .offcanvas-button.with-text, .sticky-header-4 .offcanvas-button.with-text { display: inline-block; } } @media all and (max-width: 782px) { .admin-bar .sticky-header { top: 46px; } } @media all and (max-width: 700px) { .sticky-header-1 .left-side { display: none; } .sticky-header-1 .center-side { text-align: left; } } @media all and (max-width: 600px) { .admin-bar .sticky-header { top: -46px; } .admin-bar .sticky-header.is-visible { top: 0; } } @media all and (max-width: 450px) { .sticky-header-1 .center-side { width: 150px; } } @media all and (max-width: 400px) { .sticky-header-3 .sticky-header-logo-container { display: none; } } @media all and (max-height: 400px) { .sticky-header { display: none; } } /* 20.5 header clone ( only visible when sticky header is active ) */ .header-clone { position: fixed; display: block; top: -120px; left: 0; z-index: 10; width: 100%; height: 0; } /* 20.6 header on mobile view */ @media all and (max-width: 1199px) { .header-4 .left-side, .header-4 .right-side { width: 30%; } .header-4 .center-side { width: 40%; text-align: center; } .header-4 .menu-dropdown { display: none; } .header-4 .center-side .offcanvas-button { display: inline-block; margin-top: 10px; } } @media all and (max-width: 1050px) { .header-2 .offcanvas-button { display: block; } .header-2 .header-top .left-side { position: absolute; display: block; top: 0; width: 60px; height: 60px; z-index: 2; } .header-2 .header-top .right-side { width: 100%; text-align: center; z-index: 1; } .header-2 .header-top .search-button-header { position: absolute; top: 0; right: 15px; float: none; margin: 0; z-index: 2; } .header-2 .header-top .social-media-container { float: none; text-align: center; } .header-2 .menu-dropdown, .header-3 .handler-offcanvas-menu-button { display: none; } .header-3 .menu-container, .header-3 .menu-container .menu-wrapper { height: 61px; } .header-3 .offcanvas-button.with-text.handler-mobile-main-menu-button { display: inline-block; } } @media all and (min-width: 768px) and (max-width: 770px) { .header-3 .menu-wrapper { margin-left: -6px; } } @media all and (max-width: 767px) { header .container { padding: 0; } header .header-bottom .container { padding: 0 15px; } header .menu-container-large { display: none; } header .header-bottom .social-media-container { line-height: normal; padding: 16px 0 0 0; } header .header-bottom .social-media-container a { margin: 0 10px 20px 10px; } .header-1 .right-side .bordering { display: block; } .header-1 .header-top .right-side, .header-1 .right-side .offcanvas-button { position: relative; float: left; display: block; top: inherit; right: inherit; -webkit-transform: translate3d( 0, 0, 0 ); -moz-transform: translate3d( 0, 0, 0 ); -ms-transform: translate3d( 0, 0, 0 ); -o-transform: translate3d( 0, 0, 0 ); transform: translate3d( 0, 0, 0 ); } } @media all and (max-width: 700px) { .header-4 .left-side { width: 100%; text-align: center; } .header-4 .right-side, .header-4 .center-side { width: 50%; border-top: 1px solid rgba( 100, 100, 100, 0.1 ); } .header-4 .center-side { text-align: left; border-right: none; } } @media all and (max-width: 500px) { header .logo-container .header-logo { height: 110px; } } @media all and (max-width: 400px) { .header-4 .center-side .offcanvas-button .text-container, .header-4 .right-side .social-media-container { display: none; } } /** * ------------------------------------------------- * 21.0 Footer * ------------------------------------------------- **/ footer, footer .content-container, footer .footer-row-1 { position: relative; float: left; display: block; width: 100%; height: auto; background: #f2f2f2; } footer .content-container { background: none; } footer.footer-1 { position: fixed; left: 0; bottom: 0; z-index: 1; -webkit-transform: translateZ( 0 ); } footer .footer-row-1 { padding-bottom: 50px; background: none; } footer .bg-overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } footer .footer-logo-container, footer .social-media-container, footer .copyright-container { position: relative; float: left; display: block; width: 100%; padding: 50px 0 0 0; text-align: center; } footer .copyright-container { padding: 10px 0 30px 0; } footer.footer-2 .copyright-container { padding: 15px 0 5px 0; border-top: 2px solid #323232; } footer.footer-2 .copyright-container::before { content: ''; position: absolute; display: block; top: -2px; left: 50%; margin-left: -25px; width: 50px; height: 2px; } footer .copyright-container .left-side { text-align: left; } footer .copyright-container p { font-weight: 400; font-size: 11px; color: #969696; } footer.footer-2 .copyright-container p { padding-bottom: 12px; } footer.footer-1 .footer-logo-container { padding-top: 50px; text-align: left; } footer .footer-logo-container img { display: inline-block; height: 70px; width: auto; } footer .footer-logo-container h6 { font-size: 10px; text-transform: uppercase; letter-spacing: 4px; font-weight: 700; color: #636363; margin: 10px 0 -5px 0; } footer .social-media-container { padding: 50px 0 0 0; } footer .social-media-container a { margin: 0 10px 20px 10px; } .footer-menu .menu li ul { display: none; } .footer-menu .menu { text-align: right; } .footer-menu .menu li { margin: 0 0 0 30px; } .footer-menu .menu li.menu-item-has-children::after { display: none; } .footer-menu.menu-dropdown .menu > li.menu-item-has-children { margin-right: 0; } .footer-menu.menu-dropdown .menu > li a { padding: 6px 0 15px 0; font-size: 10px; letter-spacing: 3px; color: #969696; } .footer-menu.menu-dropdown .menu > li a::before { bottom: 21px; } @-moz-document url-prefix() { .footer-menu.menu-dropdown .menu > li a::before { bottom: 20px; } } /* 21.1 Footer Sidebar */ .footer-sidebar-outer-container, .footer-sidebar-whitespace { position: relative; float: left; display: block; width: 100%; background: #ffffff; } .footer-sidebar-outer-container { z-index: 2; } .footer-sidebar-outer-container .container { position: relative; display: block; } .footer-sidebar-whitespace { background: none; z-index: 1; } .footer-sidebar-container { position: relative; float: left; display: block; width: 100%; height: auto; padding: 50px 0; margin-top: -1px; background: #EEEEEE; border-top: 1px solid #E1E1E1; border-bottom: 1px solid #E1E1E1; } .footer-sidebar-container .overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .footer-sidebar-container .footer-sidebar { position: relative; display: block; float: left; z-index: 2; } .footer-sidebar-container.footer-1 { padding: 0; } .footer-sidebar-container.footer-1 .footer-sidebar { padding: 15px; } .footer-sidebar-container.footer-2 { margin-top: 30px; } .footer-sidebar-container.is-hidden { display: none; } .footer-sidebar ul li a { -webkit-backface-visibility: hidden; } /* 21.2 Footer style on small devices */ @media all and (max-width: 767px) { footer.footer-1 .footer-logo-container, footer .copyright-container .left-side, footer .copyright-container .right-side, .footer-menu .menu { text-align: center; } footer .copyright-container { margin-top: 11px; } footer .copyright-container .left-side { margin-bottom: 15px; } .footer-menu { padding-left: 3px; } .footer-menu .menu li { margin: 0 15px 0 15px; } } /** * ------------------------------------------------- * 22.0 Widgets & Sidebars * ------------------------------------------------- **/ .sidebar { position: relative; float: left; display: block; margin-bottom: 50px; overflow: hidden; } .footer-sidebar-container .sidebar { margin-bottom: 0; } .widget { position: relative; float: left; display: block; width: 100%; padding: 15px; margin-bottom: 10px; } .widget .widget-title { position: relative; float: left; display: block; width: 100%; overflow: hidden; } .widget .widget-title .title { position: relative; display: inline-block; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; } .widget .widget-title .line { position: absolute; display: block; right: 0; top: 50%; margin-top: -2px; width: 100%; height: 3px; background: #f2f2f2; } .widget .widget-title .line::before { content: ''; position: absolute; display: block; top: 0; width: 40px; height: 100%; } /* 22.1 About Author */ .widget-about-author { position: relative; float: left; display: block; width: 100%; height: auto; } .widget-about-author .author-photo-container { position: absolute; display: block; left: 50%; top: 46px; margin-left: -69px; width: 138px; height: 138px; z-index: 2; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .widget-about-author .content-container-outer { position: relative; float: left; display: block; margin-top: 89px; width: 100%; padding: 80px 15px 30px 15px; background: #ffffff; z-index: 1; } .widget-about-author .overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .widget-about-author .content-container, .widget-about-author .author-name, .widget-about-author .author-social-media { position: relative; float: left; display: block; width: 100%; height: 100%; z-index: 2; text-align: center; } .widget-about-author .author-name, .widget-about-author .author-social-media { height: auto; } .widget-about-author .author-name h5 { position: relative; display: inline-block; color: #262626; font-size: 16px; } .widget-about-author .author-name h6 { position: relative; display: block; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #777777; font-weight: 400; margin: -5px 0 0 2px; } .widget-about-author .author-social-media { margin-top: 15px; text-align: center; } .widget-about-author .author-social-media a { color: #777777; } .widget-about-author .author-profile { position: relative; float: left; width: 100%; font-size: 13px; line-height: 23px; margin-top: 5px; text-align: center; padding: 0 15px; } /* 22.2 Calendar */ .widget_calendar .calendar_wrap { position: relative; display: block; float: left; width: 100%; } .widget_calendar table { line-height: 2; margin: 10px 0 0 0; width: 100%; } .widget_calendar caption { font-size: 14px; text-align: right; margin-bottom: 10px; } .widget_calendar thead th { color: #ffffff; font-size: 12px; padding: 5px 0; text-align: center; } .widget_calendar tbody tr:first-child td { padding-top: 5px; } .widget_calendar tbody td { position: relative; font-size: 12px; color: #262626; text-align: center; border: 1px solid #DADADA; padding: 5px 0; } .widget_calendar tbody a { position: absolute; display: block; width: 100%; left: 0; top: 0; color: #ffffff; padding: 5px 0; font-weight: 800; } .widget_calendar tbody a:hover { color: #fff; } .widget_calendar tfoot tr:first-child td { padding-top: 5px; } .widget_calendar #prev a, .widget_calendar #next a { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; } .widget_calendar #prev { padding-left: 1px; } .widget_calendar #next { text-align: right; } /* 22.3 Archives */ .widget_archive label[for*="archives-dropdown"] { display: none; } .widget_archive .selectize-control { position: relative; display: block; float: left; margin-top: 20px; width: 100%; } .widget_archive ul { position: relative; display: block; float: left; width: 100%; margin-top: 5px; list-style: none; } .widget_archive ul li { position: relative; display: block; float: left; width: 100%; height: auto; padding: 15px 0 0 0; white-space: nowrap; } .widget_archive ul li:first-child { padding: 10px 0 0 0; } .widget_archive ul li a { position: relative; display: block; float: left; width: 100%; padding: 0; font-size: 13px; color: #262626; text-transform: capitalize; font-weight: 400; z-index: 2; } .widget_archive ul li a::before { content: ''; position: relative; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: #e0e0e0; -webkit-transform: translateY( -2px ) scale( 1 ); -moz-transform: translateY( -2px ) scale( 1 ); -ms-transform: translateY( -2px ) scale( 1 ); -o-transform: translateY( -2px ) scale( 1 ); transform: translateY( -2px ) scale( 1 ); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .widget_archive ul li a:hover::before { -webkit-transform: translateY( -2px ) scale( 1.4 ); -moz-transform: translateY( -2px ) scale( 1.4 ); -ms-transform: translateY( -2px ) scale( 1.4 ); -o-transform: translateY( -2px ) scale( 1.4 ); transform: translateY( -2px ) scale( 1.4 ); } .widget_archive ul li span { position: absolute; top: 15px; right: 0; width: auto; height: auto; font-size: 9px; line-height: 18px; text-align: center; padding: 1px 15px 0 15px; color: #ffffff; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; z-index: 1; } .widget_archive ul li:first-child span { top: 10px; } .widget_archive ul li a:hover ~ span { background: #262626; } /* 22.4 Search */ .widget_search .search-form { position: relative; display: block; float: left; width: 100%; margin-top: 13px; } .widget_search .search-form .form-label.is-focus { opacity: 0; -webkit-transform : translateY( 0 ); -moz-transform : translateY( 0 ); -ms-transform : translateY( 0 ); -o-transform : translateY( 0 ); transform : translateY( 0 ); } /* 22.5 Tag Cloud */ .widget_tag_cloud .tagcloud { position: relative; float: left; display: block; width: 100%; margin-top: 20px; } .widget_tag_cloud a { position: relative; display: inline-block; margin: 0 5px 5px 0; padding: 1px 17px 0 17px; text-transform: uppercase; border: 1px solid #777777; color: #777777; overflow: hidden; letter-spacing: 2px; line-height: 20px; -webkit-border-radius: 17px; -moz-border-radius: 17px; -o-border-radius: 17px; -ms-border-radius: 17px; border-radius: 17px; } .widget_tag_cloud a::before { content: '#'; color: #636363; } .widget_tag_cloud a:hover, .widget_tag_cloud a:hover::before, .footer-sidebar-container .widget_tag_cloud a:hover, .footer-sidebar-container .widget_tag_cloud a:hover::before { color: #ffffff; } /* 22.6 Categories */ .widget_categories label[for*="cat"] { display: none; } .widget_categories .selectize-control { position: relative; display: block; float: left; margin-top: 20px; width: 100%; } .widget_categories ul { position: relative; float: left; display: block; width: 100%; margin-top: 5px; list-style: none; } .widget_categories ul li { position: relative; display: block; float: left; width: 100%; height: auto; padding: 15px 0 0 0; white-space: nowrap; } .widget_categories ul li:first-child { padding: 10px 0 0 0; } .widget_categories ul.children li:first-child { padding: 11px 0 0 0; } .widget_categories ul li a { position: relative; display: block; float: left; width: 100%; padding: 0; font-size: 13px; color: #262626; text-transform: capitalize; font-weight: 400; z-index: 2; } .widget_categories ul li a::before { content: ''; position: relative; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: #e0e0e0; -webkit-transform: translateY( -2px ) scale( 1 ); -moz-transform: translateY( -2px ) scale( 1 ); -ms-transform: translateY( -2px ) scale( 1 ); -o-transform: translateY( -2px ) scale( 1 ); transform: translateY( -2px ) scale( 1 ); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .widget_categories ul li a:hover::before { -webkit-transform: translateY( -2px ) scale( 1.4 ); -moz-transform: translateY( -2px ) scale( 1.4 ); -ms-transform: translateY( -2px ) scale( 1.4 ); -o-transform: translateY( -2px ) scale( 1.4 ); transform: translateY( -2px ) scale( 1.4 ); } .widget_categories ul li ul li a { padding-left: 15px; } .widget_categories ul li ul li ul li a { padding-left: 30px; } .widget_categories ul li span { position: absolute; top: 15px; right: 0; width: auto; height: auto; font-size: 9px; line-height: 18px; text-align: center; padding: 1px 15px 0 15px; color: #ffffff; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; -ms-border-radius: 15px; border-radius: 15px; z-index: 1; } .widget_categories ul li:first-child span { top: 10px; } .widget_categories ul.children li:first-child span { top: 11px; } .widget_categories ul li a:hover ~ span { background: #262626; } /* 22.7 Meta */ .widget_meta ul { position: relative; display: block; float: left; width: 100%; margin-top: 5px; list-style: none; } .widget_meta ul li { position: relative; display: block; float: left; width: 100%; height: auto; padding: 15px 0 0 0; white-space: nowrap; } .widget_meta ul li:first-child { padding: 10px 0 0 0; } .widget_meta ul li a { position: relative; display: block; float: left; width: 100%; padding: 0; font-size: 13px; color: #262626; text-transform: capitalize; font-weight: 400; z-index: 2; } .widget_meta ul li ul li a { padding-left: 15px; } .widget_meta ul li ul li ul li a { padding-left: 30px; } .widget_meta ul li a::before { content: ''; position: relative; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: #e0e0e0; -webkit-transform: translateY( -2px ) scale( 1 ); -moz-transform: translateY( -2px ) scale( 1 ); -ms-transform: translateY( -2px ) scale( 1 ); -o-transform: translateY( -2px ) scale( 1 ); transform: translateY( -2px ) scale( 1 ); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .widget_meta ul li a:hover::before { -webkit-transform: translateY( -2px ) scale( 1.4 ); -moz-transform: translateY( -2px ) scale( 1.4 ); -ms-transform: translateY( -2px ) scale( 1.4 ); -o-transform: translateY( -2px ) scale( 1.4 ); transform: translateY( -2px ) scale( 1.4 ); } /* 22.8 Custom Menu */ .sidebar .widget_nav_menu { margin-top: 0; } .widget_nav_menu .divider { display: block; } .widget_nav_menu .menu { float: left; margin-top: 5px; } .widget_nav_menu .menu > li a, .widget_nav_menu .menu ul li a { position: relative; display: inline-block; font-size: 11px; letter-spacing: 3px; color: #262626; } .widget_nav_menu .menu > li a::before, .widget_nav_menu .menu ul li a::before { content: ''; position: absolute; display: block; top: 18px; left: -2px; height: 4px; width: 100%; z-index: -1; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } @-moz-document url-prefix() { .widget_nav_menu .menu > li a::before, .widget_nav_menu .menu ul li a::before { top: 19px; } } .widget_nav_menu .menu li.current-menu-ancestor > a::before, .widget_nav_menu .menu li.current-menu-parent > a::before, .widget_nav_menu .menu li.current-menu-item > a::before, .widget_nav_menu .menu > li a:hover::before, .widget_nav_menu .menu ul li a:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .widget_nav_menu .menu ul li { background: none; } .widget_nav_menu .menu > .menu-item-has-children::after, .widget_nav_menu .menu > li > ul .menu-item-has-children::after { right: 0px; top: 16px; } .widget_nav_menu .menu > li > ul .menu-item-has-children::after { content: '\e01c'; } .widget_nav_menu .menu > li { width: 100%; display: block; border-bottom: none; cursor: pointer; } .widget_nav_menu .menu ul li { cursor: pointer; border-bottom: none; } .widget_nav_menu .menu > li a, .widget_nav_menu .menu ul li a { padding: 13px 0; } .widget_nav_menu .menu > li > ul { position: relative; width: 100%; height: 0; margin-bottom: -1px; } .widget_nav_menu .menu > li > ul > li > ul { position: relative; height: 0; right: 0; margin: -10px 0 10px 0; } .widget_nav_menu .menu > li > ul > li { padding-left: 15px; } .widget_nav_menu .menu > li > ul > li > ul > li, .widget_nav_menu .menu > li > ul > li > ul > li > ul > li { border-bottom: none; padding-left: 30px; } .widget_nav_menu .menu > li > ul > li, .widget_nav_menu .menu > li > ul > li > ul > li, .widget_nav_menu .menu > li > ul > li > ul > li > ul li { cursor: default; list-style: none; } .widget_nav_menu .menu > li > ul > li.menu-item-has-children { cursor: pointer; } .widget_nav_menu .menu > li > ul > li.is-open-child > ul > li:first-child { margin-top: 10px; } .widget_nav_menu .menu > li:hover > ul, .widget_nav_menu .menu > li > ul > li:hover > ul, .widget_nav_menu .menu > li > ul > li > ul:hover { height: 0; visibility: hidden; -webkit-transform: translateX( -20px ); -moz-transform: translateX( -20px ); -ms-transform: translateX( -20px ); -o-transform: translateX( -20px ); transform: translateX( -20px ); } .widget_nav_menu .menu > li.is-open > ul, .widget_nav_menu .menu > li.is-open > ul > li.is-open-child > ul, .widget_nav_menu .menu > li.is-open > ul > li.is-open-child:hover > ul { height: auto; opacity: 1; visibility: visible; -webkit-transform: translateX( 0 ); -moz-transform: translateX( 0 ); -ms-transform: translateX( 0 ); -o-transform: translateX( 0 ); transform: translateX( 0 ); } /* 22.9 Pages */ .widget_pages ul { position: relative; display: block; float: left; width: 100%; margin-top: 5px; list-style: none; } .widget_pages ul li { position: relative; display: block; float: left; width: 100%; height: auto; padding: 15px 0 0 0; white-space: nowrap; } .widget_pages ul li:first-child { padding: 10px 0 0 0; } .widget_pages ul.children li:first-child { padding: 11px 0 0 0; } .widget_pages ul li a { position: relative; display: block; float: left; width: 100%; padding: 0; font-size: 13px; color: #262626; text-transform: capitalize; font-weight: 400; z-index: 2; } .widget_pages ul li ul li a { padding-left: 15px; } .widget_pages ul li ul li ul li a { padding-left: 30px; } .widget_pages ul li a::before { content: ''; position: relative; display: inline-block; width: 7px; height: 7px; margin-right: 10px; background: #e0e0e0; -webkit-transform: translateY( -2px ) scale( 1 ); -moz-transform: translateY( -2px ) scale( 1 ); -ms-transform: translateY( -2px ) scale( 1 ); -o-transform: translateY( -2px ) scale( 1 ); transform: translateY( -2px ) scale( 1 ); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .widget_pages ul li a:hover::before { -webkit-transform: translateY( -2px ) scale( 1.4 ); -moz-transform: translateY( -2px ) scale( 1.4 ); -ms-transform: translateY( -2px ) scale( 1.4 ); -o-transform: translateY( -2px ) scale( 1.4 ); transform: translateY( -2px ) scale( 1.4 ); } /* 22.10 RSS */ .widget_rss .title a img { position: relative; display: inline-block; margin-right: 2px; -webkit-transform: translateY( -2px ); -moz-transform: translateY( -2px ); -ms-transform: translateY( -2px ); -o-transform: translateY( -2px ); transform: translateY( -2px ); } .widget_rss ul { position: relative; display: block; width: 100%; margin-top: 5px; list-style: none; } .widget_rss ul li { position: relative; display: block; float: left; width: 100%; height: auto; padding: 15px 0 0 17px; margin-bottom: 5px; } .widget_rss ul li::before { content: ''; position: absolute; display: block; left: 0; top: 22px; width: 7px; height: 7px; background: #e0e0e0; -webkit-transform: scale( 1 ); -moz-transform: scale( 1 ); -ms-transform: scale( 1 ); -o-transform: scale( 1 ); transform: scale( 1 ); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .widget_rss ul li:hover::before { -webkit-transform: scale( 1.4 ); -moz-transform: scale( 1.4 ); -ms-transform: scale( 1.4 ); -o-transform: scale( 1.4 ); transform: scale( 1.4 ); } .widget_rss ul li a { font-size: 13px; color: #262626; text-transform: capitalize; } .widget_rss .rss-date { font-family: 'Muli', sans-serif; position: relative; float: left; display: block; width: 100%; text-transform: uppercase; font-size: 10px; color: #777777; letter-spacing: 2px; margin: 5px 0 0 1px; } .widget_rss .rssSummary { position: relative; float: left; display: block; font-size: 13px; margin: 10px 0 0 0; line-height: 23px; } .widget_rss cite { position: relative; float: left; display: block; font-size: 11px; color: #777777; text-transform: uppercase; letter-spacing: 2px; margin-top: 10px; } .widget_rss cite::before { position: relative; display: inline-block; content: "\e056"; font-family: 'dripicons-v2'; color: #777777; margin-right: 7px; -webkit-transform: translateY( 1px ); -moz-transform: translateY( 1px ); -ms-transform: translateY( 1px ); -o-transform: translateY( 1px ); transform: translateY( 1px ); } /* 22.11 Text Widget */ .widget_text .textwidget { position: relative; float: left; display: block; margin-top: 12px; font-size: 13px; line-height: 23px; } .widget_text a { font-weight: 800; color: #262626; text-decoration: underline; } .widget_text p { margin-bottom: 15px; font-size: 13px; line-height: 23px; } .widget_text ul, .widget_text ol { position: relative; display: block; float: left; width: 100%; padding-left: 30px; } .widget_text ul li, .widget_text ol li { font-size: 13px; line-height: 23px; margin-bottom: 10px; } .widget_text .fb-page { margin-top: 15px; } /* 22.12 Recent Comments */ .widget_recent_comments ul { position: relative; display: block; width: 100%; margin-top: 2px; list-style: none; } .widget_recent_comments ul li { font-family: 'Muli', sans-serif; position: relative; display: block; float: left; width: 100%; height: auto; padding: 13px 0 0 17px; font-size: 13px; color: #777777; line-height: 21px; } .widget_recent_comments ul li::before { content: ''; position: absolute; display: block; left: 0; top: 21px; width: 7px; height: 7px; background: #e0e0e0; -webkit-transform: scale( 1 ); -moz-transform: scale( 1 ); -ms-transform: scale( 1 ); -o-transform: scale( 1 ); transform: scale( 1 ); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .widget_recent_comments ul li:hover::before { -webkit-transform: scale( 1.4 ); -moz-transform: scale( 1.4 ); -ms-transform: scale( 1.4 ); -o-transform: scale( 1.4 ); transform: scale( 1.4 ); } .widget_recent_comments ul li a { position: relative; display: block; width: 100%; float: left; padding: 0 0 13px 0; font-size: 13px; color: #262626; text-transform: capitalize; z-index: 2; } .widget_recent_comments .comment-author-link, .widget_recent_comments .comment-author-link a { position: relative; display: inline-block; float: none; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #262626; font-weight: 800; margin-right: 5px; } .widget_recent_comments .comment-author-link a:hover { color: #262626; } .widget_recent_comments .comment-author-link a::before { content: ''; position: absolute; display: block; top: 5px; left: -2px; height: 4px; width: 100%; z-index: -1; -webkit-transform: scaleX( 0 ); -moz-transform: scaleX( 0 ); -ms-transform: scaleX( 0 ); -o-transform: scaleX( 0 ); transform: scaleX( 0 ); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } @-moz-document url-prefix() { .widget_recent_comments .comment-author-link a::before { top: 6px; } } .widget_recent_comments .comment-author-link a:hover::before { -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } /* 22.13 Custom Recent Comments */ .widget_simplepixel_recent_comments .comment-container { position: relative; float: left; display: block; width: 100%; margin: 20px 0 10px 0; } .widget_simplepixel_recent_comments .avatar-container { position: absolute; display: block; left: 0; top: 0; width: 60px; height: 60px; } .widget_simplepixel_recent_comments .avatar-container img { width: 60px; height: 60px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .widget_simplepixel_recent_comments .text-container { position: relative; float: left; display: block; width: 100%; padding-left: 75px; } .widget_simplepixel_recent_comments .text-container .name { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; line-height: 20px; font-weight: 800; margin-top: -2px; color: #262626; } .widget_simplepixel_recent_comments .text-container .date { position: relative; float: left; display: block; width: 100%; font-size: 10px; font-weight: 400; line-height: 20px; text-transform: uppercase; letter-spacing: 2px; text-align: left; margin: 2px 0 0 1px; color: #777777; } .widget_simplepixel_recent_comments .comment-text { position: relative; display: block; float: left; width: 100%; margin-top: 10px; font-size: 13px; } .widget_simplepixel_recent_comments .comment-text a { position: relative; display: inline-block; padding-left: 15px; font-style: italic; color: #777777; z-index: 2; } .widget_simplepixel_recent_comments .comment-text::before { content: '\f122'; font-family: 'dashicons'; position: absolute; left: 0; top: 0; display: block; font-size: 30px; color: #f2f2f2; z-index: 1; } .offcanvas-sidebar .widget_simplepixel_recent_comments .comment-text::before { color: rgba( 255, 255, 255, 0.1 ); } .widget_simplepixel_recent_comments .main-color-link { color: #262626; } .widget_simplepixel_recent_comments .icon { font-style: italic; font-size: 10px; -webkit-transform: translateY( -4px ); -moz-transform: translateY( -4px ); -ms-transform: translateY( -4px ); -o-transform: translateY( -4px ); transform: translateY( -4px ); } .widget_simplepixel_recent_comments .post-title { position: relative; display: inline-block; font-size: 13px; line-height: 19px; margin-top: 13px; padding-left: 25px; } .widget_simplepixel_recent_comments .post-title .icon { position: absolute; left: 0; top: 4px; font-size: 18px; color: #262626; } /* 22.14 Recent Posts */ .widget_recent_entries ul { position: relative; display: block; width: 100%; margin-top: 5px; list-style: none; } .widget_recent_entries ul li { font-family: 'Muli', sans-serif; position: relative; display: block; float: left; width: 100%; height: auto; padding: 15px 0 2px 17px; } .widget_recent_entries ul li::before { content: ''; position: absolute; display: block; left: 0; top: 22px; width: 7px; height: 7px; background: #e0e0e0; -webkit-transform: scale( 1 ); -moz-transform: scale( 1 ); -ms-transform: scale( 1 ); -o-transform: scale( 1 ); transform: scale( 1 ); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .widget_recent_entries ul li:hover::before { -webkit-transform: scale( 1.4 ); -moz-transform: scale( 1.4 ); -ms-transform: scale( 1.4 ); -o-transform: scale( 1.4 ); transform: scale( 1.4 ); } .widget_recent_entries ul li a { font-size: 13px; color: #262626; text-transform: capitalize; z-index: 2; overflow: hidden; } .widget_recent_entries .post-date { position: relative; float: left; display: block; width: 100%; text-transform: uppercase; font-size: 10px; color: #777777; letter-spacing: 2px; margin: 5px 0 0 1px; } /* 22.15 Custom Posts Widget - List */ .widget_simplepixel_posts .widget-posts-custom, .widget_simplepixel_posts .widget-post-container, .widget_simplepixel_posts .carousel-container { position: relative; float: left; display: block; width: 100%; margin-top: 20px; padding-bottom: 15px; overflow: hidden; } .widget_simplepixel_posts .widget-posts-custom { margin: 0; padding: 0; } .widget_simplepixel_posts .carousel-container { text-align: center; margin: 0; padding: 0; } .widget_simplepixel_posts .carousel-container .owl-nav { display: none; } .widget_simplepixel_posts .carousel-container .owl-dots { position: relative; display: inline-block; width: auto; margin-top: 15px; } @media all and (max-width: 991px) { .widget_simplepixel_posts .post-landscape-small { width: 50%; } } @media all and (max-width: 700px) { .widget_simplepixel_posts .post-landscape-small { width: 60%; } } @media all and (max-width: 550px) { .widget_simplepixel_posts .post-landscape-small { width: 70%; } } @media all and (max-width: 450px) { .widget_simplepixel_posts .post-landscape-small { width: 100%; } } /* 22.17 Instagram Widget */ .widget_simplepixel_instagram .instagram-feed { margin-top: 20px; } .widget_simplepixel_instagram .instagram-feed.carousel .owl-controls-bottom { margin-top: 30px; } /* 22.18 Social Media Links */ .widget_simplepixel_social_media_links { position: relative; float: left; display: block; width: 100%; padding-bottom: 10px; } .widget_simplepixel_social_media_links .social-media-container { position: relative; float: left; width: 100%; display: block; margin-top: 18px; } .widget_simplepixel_social_media_links .widget-social-media-links { position: relative; float: left; display: block; width: 100%; } .widget_simplepixel_social_media_links .widget-social-media-links.left .social-media-container { text-align: left; } .widget_simplepixel_social_media_links .widget-social-media-links.center .social-media-container { text-align: center; } .widget_simplepixel_social_media_links .widget-social-media-links.right .social-media-container { text-align: right; } .widget_simplepixel_social_media_links .social-media-container a { margin: 0 3px; } .widget_simplepixel_social_media_links .widget-social-media-links.left .social-media-container a:first-of-type { margin-left: 0; } .widget_simplepixel_social_media_links .widget-social-media-links.right .social-media-container a:last-of-type { margin-right: 0; } /* 22.19 Advertising */ .widget_simplepixel_banner .advertising-link { position: relative; float: left; width: 100%; height: auto; margin-top: 20px; outline: none; border: none; } .widget_simplepixel_banner .advertising-link img { position: relative; display: block; float: left; width: 100%; height: auto; } /* 22.20 Twitter */ .twitter-feed-container ul { position: relative; float: left; width: 100%; list-style: none; } .twitter-feed-container ul li { position: relative; float: left; display: block; margin-top: 15px; padding-bottom: 17px; } .twitter-feed-container.carousel-container-outer { padding-top: 15px; } .twitter-feed-container ul li .feed, .twitter-feed-container .feed .avatar-container { position: relative; float: left; display: block; width: 100%; height: auto; text-align: center; } .twitter-feed-container .avatar-container .avatar { position: relative; display: inline-block; width: 81px; height: 81px; background: #ffffff; border: 1px solid #dedede; z-index: 2; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .twitter-feed-container .avatar-container .line { position: absolute; display: block; left: 0; top: 40px; width: 100%; height: 1px; background: #dedede; z-index: 1; } .twitter-feed-container.no-carousel ul li { padding-bottom: 10px; } .twitter-feed-container.no-carousel ul li:not( :first-child ) .avatar-container { height: 1px; margin-bottom: 15px; } .twitter-feed-container.no-carousel ul li:not( :first-child ) .avatar-container .line { top: 0; } .twitter-feed-container.no-carousel ul li:not( :first-child ) .avatar-container .avatar { display: none; } .twitter-feed-container .feed .avatar-container img { position: relative; float: left; display: block; width: 73px; height: 73px; margin: 3px 0 0 3px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .twitter-feed-container .feed .username { position: relative; display: block; float: left; width: 100%; margin-top: 7px; text-transform: none; text-align: left; } .twitter-feed-container .feed .tweet { position: relative; float: left; display: block; width: 100%; text-align: left; padding-left: 25px; margin-top: 15px; } .twitter-feed-container .feed .tweet .text { position: relative; display: inline-block; z-index: 2; } .twitter-feed-container .feed .tweet .text a { font-weight: 800; color: #262626; } .twitter-feed-container .feed .tweet::before { content: '\f099'; font-family: 'FontAwesome'; position: absolute; left: 0; top: 0; display: block; font-size: 45px; color: #f2f2f2; z-index: 1; } .offcanvas-sidebar .twitter-feed-container .feed .tweet::before { color: rgba( 255, 255, 255, 0.1 ); } .twitter-feed-container .feed .date { position: relative; float: left; width: 100%; display: block; font-size: 11px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; text-align: right; margin-top: 5px; } .twitter-feed-container.carousel-container-outer { text-align: center; } /* 22.21 Mailchimp */ .widget_simplepixel_mailchimp .widget-mailchimp { position: relative; float: left; width: 100%; height: auto; } .widget_simplepixel_mailchimp .widget-mailchimp .overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .widget_simplepixel_mailchimp .widget-mailchimp .content-container, .widget_simplepixel_mailchimp .widget-mailchimp .subscribe-message-container { position: relative; float: left; display: block; width: 100%; z-index: 2; } .widget_simplepixel_mailchimp .widget-mailchimp p { position: relative; float: left; display: block; width: 100%; font-size: 13px; line-height: 23px; } .widget_simplepixel_mailchimp .widget-mailchimp .subscribe-message { margin-top: 12px; } .widget_simplepixel_mailchimp .widget-mailchimp.is-box .subscribe-message { margin-top: 15px; padding-bottom: 15px; } .widget_simplepixel_mailchimp .widget-mailchimp.is-box { margin-top: 11px; text-align: center; padding: 40px 25px 40px 25px; } .widget_simplepixel_mailchimp .widget-mailchimp.is-box .widget-title::before { left: 50%; margin-left: -15px; background: rgba( 100, 100, 100, 0.2 ); } .widget_simplepixel_mailchimp .widget-mailchimp.is-box .widget-title .title { font-size: 16px; letter-spacing: 3px; line-height: 32px; } .widget_simplepixel_mailchimp .subscribe-block, .widget_simplepixel_mailchimp .subscribe-form-container, .widget_simplepixel_mailchimp .subscribe-form { position: relative; float: left; display: block; width: 100%; } .widget_simplepixel_mailchimp .subscribe-form { margin-top: 20px; } .widget_simplepixel_mailchimp .subscribe-block { margin-bottom: 13px; } .widget_simplepixel_mailchimp .widget-mailchimp.no-box .subscribe-block { margin-bottom: 5px; } .widget_simplepixel_mailchimp .widget-mailchimp .subscribe-block { margin-top: 15px; } .widget_simplepixel_mailchimp .subscribe-block .form-notif-container.is-visible { height: 140px; } .widget_simplepixel_mailchimp .widget-mailchimp.is-box label { white-space: nowrap; } .widget_simplepixel_mailchimp .subscribe-form .button-subscribe { position: relative; display: inline-block; margin-top: 20px; } .widget_simplepixel_mailchimp .widget-mailchimp.no-box .button-subscribe { float: right; } @media all and (max-width: 1200px) { .widget_simplepixel_mailchimp .subscribe-block .form-notif-container.is-visible { height: 150px; } } /* 22.22 Widget - Audio */ .widget_media_audio .wp-audio-shortcode { position: relative; float: left; display: block; width: 100%; margin-top: 20px; } /* 22.23 Widget - Image */ .widget_media_image img { position: relative; float: left; display: block; width: 100%; height: auto; margin-top: 20px; } /* 22.24 Widget - Twitter Feed */ .widget_simplepixel_twitter .widget-twitter, .widget_simplepixel_twitter .twitter-feed-container { position: relative; float: left; display: block; width: 100%; } .widget_simplepixel_twitter .twitter-feed-container { margin-top: 5px; } .widget_simplepixel_twitter .avatar-container .avatar { width: 70px; height: 70px; } .widget_simplepixel_twitter .feed .avatar-container img { width: 62px; height: 62px; } .widget_simplepixel_twitter .feed .username { font-size: 15px; line-height: 25px; } .widget_simplepixel_twitter .feed .tweet { font-size: 13px; line-height: 23px; } .widget_simplepixel_twitter .feed .tweet::before { font-size: 42px; } .widget_simplepixel_twitter .feed .date { font-size: 10px; } .widget_simplepixel_twitter .owl-carousel { text-align: center; } .widget_simplepixel_twitter .owl-carousel .owl-nav { display: none; } .widget_simplepixel_twitter .owl-carousel .owl-dots { margin-top: 5px; } /* 22.25 Widget - Video */ .widget_media_video .widget-title { margin-bottom: 20px; } .widget_media_video .wp-video { position: relative; float: left; } /* 22.26 Widget - Category Custom */ .widget_simplepixel_categories .widget-categories-custom, .widget_simplepixel_categories .category-list-container, .widget_simplepixel_categories .category-widget { position: relative; float: left; display: block; width: 100%; } .widget_simplepixel_categories .category-list-container { margin-top: 20px; } .widget_simplepixel_categories .category-widget { height: 130px; margin-bottom: 15px; border: 1px solid #eeeeee; } .category-widget .post-label { position: absolute; display: inline-block; right: 12px; top: 12px; width: auto; height: auto; padding: 1px 17px 0 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px; -o-border-radius: 17px; -ms-border-radius: 17px; border-radius: 17px; z-index: 3; } .category-widget .post-label:hover { background: #262626; } .category-widget .post-label .label-text { color: #ffffff; text-transform: uppercase; font-size: 9px; letter-spacing: 2px; line-height: 20px; } .category-widget .overlay, .category-widget .image-container, .category-widget .text-container { position: absolute; display: block; width: 100%; height: 100%; background: #ffffff; z-index: 2; opacity: 1; } .category-widget .overlay { opacity: 0.85; } .category-widget:hover .overlay { opacity: 0.3; } .category-widget .image-container { z-index: 1; overflow: hidden; background: none; } .category-widget .image-container img { position: relative; display: inline-block; width: 100%; height: auto; -webkit-transform: scaleX( 1 ); -moz-transform: scaleX( 1 ); -ms-transform: scaleX( 1 ); -o-transform: scaleX( 1 ); transform: scaleX( 1 ); } .category-widget:hover .image-container img { -webkit-transform: scale( 1.5 ); -moz-transform: scale( 1.5 ); -ms-transform: scale( 1.5 ); -o-transform: scale( 1.5 ); transform: scale( 1.5 ); } .category-widget .text-container { padding: 0; background: none; height: auto; z-index: 3; top: 50%; -webkit-transform: translateY( -50% ); -moz-transform: translateY( -50% ); -ms-transform: translateY( -50% ); -o-transform: translateY( -50% ); transform: translateY( -50% ); } .category-widget .text-container h6 { font-size: 13px; text-align: center; text-transform: uppercase; letter-spacing: 3px; color: #262626; } .category-widget .carousel-inner-container { position: relative; float: left; display: block; width: 100%; } .widget_simplepixel_categories .owl-carousel { text-align: center; } .widget_simplepixel_categories .owl-carousel .owl-nav { display: none; } .widget_simplepixel_categories .owl-carousel .owl-dots { position: relative; display: inline-block; width: auto; margin-top: 15px; } /* 22.27 Widget - Gallery */ .widget_media_gallery .gallery { margin: 20px 0 0 0; } /* 22.28 Widget & Sidebars on small devices */ @media all and (max-width: 1000px) { .footer-1 .footer-sidebar { width: 100%; } } @media all and (max-width: 768px) { .sidebar { margin-bottom: 50px; } .right-sidebar.no-pad, .left-sidebar.no-pad { position: relative; float: left; width: 100%; padding: 0 15px; } .widget { padding: 15px 0 15px 0; } .footer-sidebar.no-pad { padding: 0 15px; } } @media all and (max-width: 767px) { .single-page .right-sidebar.no-pad, .single-page .left-sidebar.no-pad { padding: 0 30px; } } /** * ------------------------------------------------- * 23.0 Featured Content * ------------------------------------------------- **/ .blog-featured-post-container { position: relative; float: left; display: block; width: 100%; height: auto; background: #ffffff; } .featured-content-container { position: relative; } .featured-content-container .bg-overlay { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; -webkit-backface-visibility: hidden; } .featured-content-container ._3-col-carousel-container, .featured-content-container .shortcode-container-blog-view { z-index: 2; } div[class*="owl-featured-"] .post-body { background: rgba( 238, 238, 238, 0.3 ); border: 1px solid rgba( 225, 225, 225, 0.1 ); } div[class*="owl-featured-"] .post-date-container, div[class*="owl-featured-"] .post-date-container .date-link { color: #262626; } .featured-content-line .bordering { position: relative; float: left; width: 100%; height: 3px; background: rgba( 100, 100, 100, 0.1 ); } /** * ------------------------------------------------- * 24.0 Advertising * ------------------------------------------------- **/ .blog-advertising-container { position: relative; float: left; width: 100%; padding: 0 15px; margin-bottom: 50px; } .single-page .blog-advertising-container { margin-top: -50px; } /** * ------------------------------------------------- * 25.0 Preloader * ------------------------------------------------- **/ .preloader-main { position: fixed; display: block; left: 0; top: 0; width: 100%; height: 100%; z-index: 999999; visibility: visible; opacity: 1; } .preloader-main.is-hidden { visibility: hidden; opacity: 0; } .preloader-main .preloader { position: absolute; display: inline-block; left: 50%; top: 50%; -webkit-transform: translate( -50%, -50% ); -moz-transform: translate( -50%, -50% ); -ms-transform: translate( -50%, -50% ); -o-transform: translate( -50%, -50% ); transform: translate( -50%, -50% ); } /** * ------------------------------------------------- * 26.0 Color Scheme * ------------------------------------------------- **/ /* 26.1 Hover color & Main Color scheme */ .main-color-link:hover, .menu-offcanvas .menu .menu-item-has-children > a:hover::after, .custom-search-form .custom-search-button:hover .icon, .subscribe-form .custom-submit-button:hover .icon, .menu-dropdown .menu > .menu-item-has-children:hover::after, .menu-offcanvas .menu .menu-item-has-children:hover::after, .menu-dropdown .menu > li > ul a:hover, .menu-dropdown .menu > li > ul .menu-item-has-children:hover::after, .menu-dropdown .menu ul li.current-menu-item > a, .widget_nav_menu .menu > .menu-item-has-children:hover::after, .widget_nav_menu .menu > li > ul .menu-item-has-children:hover::after, .footer-sidebar-container .widget_nav_menu .menu > .menu-item-has-children:hover::after, .footer-sidebar-container .widget_nav_menu .menu > li > ul .menu-item-has-children:hover::after, .post-content .date-link:hover, .post-image-bg .post-portrait-title h4 a:hover, .post-landscape-small .link-category, .slider-1 .text-container .title h3 a:hover, .slider-1 .text-container .post-info .info:hover, .slider-1 .text-container .post-info .info a:hover .name, .slider-1 .text-container .date:hover .month, .slider-1 .text-container .date:hover .day, .slider-1 .text-container .date:hover .year, .main-color-link.reverse, .widget_calendar #next a:hover, .widget_calendar #prev a:hover, .widget_archive ul li a:hover, .widget_categories ul li a:hover, .widget_meta ul li a:hover, .widget_pages ul li a:hover, .widget_recent_entries ul li a:hover, .widget-about-author .author-name h5:hover, .widget_text a:hover, .widget-about-author .author-social-media a:hover, .widget_simplepixel_recent_comments .main-color-link:hover, .widget_simplepixel_recent_comments .main-color-link:hover .icon, .post-image-bg .post-info-container .main-color-link:hover, .widget_simplepixel_social_media_links .social-media-container .social-media-2:hover, .twitter-feed-container ul li a:hover, .footer-sidebar-container .widget_calendar #next a:hover, .footer-sidebar-container .widget_calendar #prev a:hover, .footer-sidebar-container .widget_archive ul li a:hover, .footer-sidebar-container .widget_categories ul li a:hover, .footer-sidebar-container .widget_meta ul li a:hover, .footer-sidebar-container .widget_pages ul li a:hover, .footer-sidebar-container .widget_recent_entries ul li a:hover, .footer-sidebar-container .widget_text a:hover, .footer-sidebar-container .widget_simplepixel_recent_comments .main-color-link:hover, .footer-sidebar-container .post-image-bg .post-info-container .main-color-link:hover, .footer-sidebar-container .widget_simplepixel_social_media_links .social-media-container .social-media-2:hover, .footer-sidebar-container .widget_simplepixel_twitter ul li a:hover, .single-page .title-container .post-info a:hover, .single-page .content-wrapper .content-container > p a:hover, .single-page .post-footer .share-container .post-footer-title a:hover, #comments .button-comment-submit:hover, #comments .logged-in-as a:nth-child( 2 ), #comments .must-log-in a, #comments .comment-respond .cancel-reply-button .icon, div[class*="owl-featured-"] .post-date-container .date-link:hover, .archive-main-title-container.page-404-title .home-button:hover, .inline-text-link, .single-page .content-wrapper .content-container > table a, .single-page .content-wrapper .content-container > figure figcaption a, .single-page .content-wrapper .content-container > blockquote p a, .comment-text-container table a, .comment-text-container p a:hover, .type-page .entry-content > figure figcaption a, .type-page .entry-content > table a, .type-page .entry-content > p a:hover, .single-page .post-password-form p input[type="submit"], .popup-search-container .close-popup-search-button:hover, .offcanvas-container .close-offcanvas-button:hover, .popup-search-container .popup-search-form-label, .menu-dropdown .menu ul li.current-menu-ancestor > a, .menu-dropdown .menu > li > ul .menu-item-has-children.current-menu-item::after, .menu-dropdown .menu > li > ul .menu-item-has-children.current-menu-ancestor::after, .menu-offcanvas .menu ul li > a:hover, .menu-offcanvas .menu ul li.current-menu-item > a, .menu-offcanvas .menu ul li.current-menu-ancestor > a, .header-4 .right-side .search-button-header:hover, .sticky-header-4 .search-button-header:hover, .slider-1 .content .link-category, .post-portrait .link-category, .post-portrait-small .link-category, .post-landscape .link-category, .post-content .post-author a:hover, .post-content .post-author a:hover .name, .post-content .date:hover .month, .post-content .date:hover .day, .post-content .date:hover .year, .post-content .post-portrait-title .quote:hover::before, .post-content .post-portrait-title .quote:hover::after, .post-image-bg .link-category, .carousel-container-outer .owl-slider-nav:hover .icon, .slider-2.layout-2 .owl-slider-nav:hover .icon, .post-portrait .post-share .icon, .post-portrait .post-share .text, .post-landscape .post-share .icon, .post-landscape .post-share .text, .post-portrait-small .post-share .icon, .post-portrait-small .post-share .text, .post-landscape-small .post-share .icon, .post-landscape-small .post-share .text, .featured-icon .icon, .post-content.post-image-bg .post-body-wrapper .date:hover .month, .post-content.post-image-bg .post-body-wrapper .date:hover .day, .post-content.post-image-bg .post-body-wrapper .date:hover .year, .post-content.post-image-bg .post-body-wrapper .post-author a:hover .name, .button-play, .smpixel-tabs-title .tab-icon, .twitter-feed-container .feed .tweet .text a:hover, .pagination-button-container .pagination-button:hover, .pagination-button-container .pagination-button:hover .icon, .pagination-button-container .pagination-button.active, .blog-navigation-container .page-numbers:hover, .blog-navigation-container .page-numbers.current, .widget_recent_comments ul li a:hover, .single-page .single-post-info-container .main-color-link:hover, .single-page .single-post-1 .date:hover .month, .single-page .single-post-1 .date:hover .day, .single-page .single-post-1 .date:hover .year, .single-page .single-post-1 .post-category-wrapper .main-color-link, .single-page > .single-post-1 .single-title-text .link .main-color-link:hover, .single-page .single-post-2 .single-post-info-container .main-color-link:hover, .single-page .single-post-1 .single-post-info-container .main-color-link:hover, .single-page .related-posts .carousel-container-outer .owl-slider-nav:hover .icon, .single-page .content-wrapper .content-container > dl a:hover, .comment-text-container dl a:hover, .type-page .entry-content > dl a:hover { color: #06d6a0; } ::selection { background: #06d6a0; color: #ffffff; } ::-moz-selection { background: #06d6a0; color: #ffffff; } .button-default, .slider-1 .text-container .post-info .link-category, .post-landscape-small .link-category::after, .spinner-morph, .widget_calendar thead th, .widget_simplepixel_instagram .instagram-feed.carousel .owl-dot.active span, .widget_simplepixel_instagram .instagram-feed.carousel .owl-dot:hover span, .widget_simplepixel_twitter .twitter-feed-container.carousel .owl-dot.active span, .widget_simplepixel_twitter .twitter-feed-container.carousel .owl-dot:hover span, .shortcode-container.twitter-feed-container .owl-dot.active span, .footer-sidebar-container .widget_calendar thead th, .footer-sidebar-container .widget_simplepixel_instagram .instagram-feed.carousel .owl-dot.active span, .footer-sidebar-container .widget_simplepixel_instagram .instagram-feed.carousel .owl-dot:hover span, .footer-sidebar-container .widget_simplepixel_twitter .twitter-feed-container.carousel .owl-dot.active span, .footer-sidebar-container .widget_simplepixel_twitter .twitter-feed-container.carousel .owl-dot:hover span, .single-page .content-wrapper .content-container > p a:hover::before, #comments .button-comment-submit, #comments .comment-content-container .comment-edit-link, #comments .comment-content-container .reply a, #comments .comment-respond .comment-reply-title-container .line::before, .archive-empty-result .main-color-link:hover::before, .archive-main-title-container.page-404-title .home-button, .archive-main-title-container .content-container::before, .category-icon, .comment-text-container p a:hover::before, .type-page .entry-content > p a:hover::before, .popup-search-container .close-popup-search-button, .custom-search-form .search-field-container .line, header .offcanvas-button, .offcanvas-container .close-offcanvas-button, .menu-dropdown .menu > li > a::before, .menu-offcanvas .menu > li > a::before, header .search-button-header, .post-content .category-container::before, .slider-1 .text-container .post-author .line::before, .button-default-bg, .post-content .post-author .line::before, .post-content .text-container .post-read-more-button::before, .post-content .post-label, .category-widget .post-label, .post-portrait-small .post-label-container .post-label-icon, .post-landscape-small .post-label-container .post-label-icon, .icon-block h6::before, .icon-block h6 a::before, .owl-carousel .owl-dot.active span, .smpixel-accordion .smpixel-accordion-title .title-container::before, .smpixel-tabs-title h6 .text-container::before, .smpixel-tabs ul li::before, .special-heading .title-container .line::before, .button-2:hover::before, .button-1::before, .social-media-1::before, .social-media-3::before, .instagram-feed .username-link-container .line, .author-list-wrapper .author-block .read-more-container a::before, .subscribe-block .line::before, .counter-block .number::after, .pagination-button-container .pagination-button::after, .blog-navigation-container .page-numbers::before, .widget .widget-title .line::before, .widget_calendar tbody a, .widget_nav_menu .menu > li a::before, .widget_nav_menu .menu ul li a::before, .widget_recent_comments .comment-author-link a::before, .single-page .content-wrapper .content-container > p a::before, .comment-text-container p a::before, .widget_text p a::before, .type-page .entry-content > p a::before, footer.footer-2 .copyright-container::before, .archive-empty-result::before, .archive-empty-result .main-color-link::before, .single-page .share-box .title-container .line::before, .single-page .content-wrapper .content-container > blockquote::after, .comment-text-container blockquote::after, .type-page .entry-content > blockquote::after, .single-page .content-wrapper .content-container > dl a::before, .comment-text-container dl a::before, .type-page .entry-content > dl a::before, .single-page .content-wrapper .content-container > p code, .comment-text-container p code, .widget_text p code, .type-page .entry-content > p code, .single-page .content-wrapper .content-container > p kbd, .comment-text-container p kbd, .widget_text p kbd, .type-page .entry-content > p kbd, .single-page .tags-container a, .single-page .article-navigation .text-container .post-title-container::before, .single-page .single-section-title .title::after, .smpixel-tabs-container .fw-tab-content > blockquote::after, .smpixel-accordion .smpixel-accordion-content > blockquote::after { background: #06d6a0; } .post-landscape-small .link-category { background: none; } .widget_calendar thead th, #comments .comment-author::before { border: 1px solid #06d6a0; } .button-white:hover, #comments .button-comment-submit, .archive-main-title-container.page-404-title .home-button, .owl-carousel .owl-dot:hover span, .carousel-container-outer .owl-slider-nav:hover, .owl-carousel .owl-dot.active span, .button-2:hover::before, .single-page .related-posts .carousel-container-outer .owl-slider-nav:hover { border: 2px solid #06d6a0; } .post-content .post-portrait-title .link:hover span, .single-page > .single-post-1 .single-title-text .link:hover span { border-bottom: 3px solid #06d6a0; } .slider-1 .content .category-container, .post-image-bg .category-container, .post-portrait .category-container, .post-portrait-small .category-container, .post-landscape .category-container, .post-landscape-small .category-container, .single-page .single-post-1 .category-container, .post-content.post-portrait-small .post-portrait-title .link:hover span, .post-content.post-landscape-small .post-portrait-title .link:hover span { border-bottom: 2px solid #06d6a0; } .single-page .post-password-form p input[type="password"]:focus { border-bottom: 4px solid #06d6a0; } .pswp__top-bar { border-bottom: 1px solid #06d6a0; } .pswp__ui--fit .pswp__caption { border-top: 1px solid #06d6a0; } .main-color-link.reverse:hover { color: #262626; } .social-media-3:hover, .custom-popover .popover-content .share-button-container .social-fb:hover, .custom-popover .popover-content .share-button-container .social-twitter:hover, .custom-popover .popover-content .share-button-container .social-google-plus:hover, .custom-popover .popover-content .share-button-container .social-pinterest:hover, .custom-popover .popover-content .share-button-container .social-linkedin:hover { -webkit-box-shadow: inset 0 0 0 2px #06d6a0; -moz-box-shadow: inset 0 0 0 2px #06d6a0; box-shadow: inset 0 0 0 2px #06d6a0; } .half-wheel { border-top-color: #06d6a0; border-right-color: #06d6a0; } /* 26.2 Notification block's color */ .notification-block.notif-success { background: #E1F0D7; border: 1px solid #BBC6AE; } .notification-block.notif-success .icon, .notification-block.notif-success p { color: #447639; } .notification-block.notif-error { background: #F0DEDE; border: 1px solid #CEA7AE; } .notification-block.notif-error .icon, .notification-block.notif-error p { color: #A34440; } .notification-block.notif-alert { background: #FCF8E2; border: 1px solid #D1C3A2; } .notification-block.notif-alert .icon, .notification-block.notif-alert p { color: #886D36; } .notification-block.notif-info { background: #DBEDF8; border: 1px solid #94C9DA; } .notification-block.notif-info .icon, .notification-block.notif-info p { color: #3B7094; } /** * ------------------------------------------------- * 27.0 Styling Helpers * ------------------------------------------------- **/ .centering-x { position: absolute; display: inline-block; top: 0; left: 50%; -webkit-transform: translateX( -50% ); -moz-transform: translateX( -50% ); -ms-transform: translateX( -50% ); -o-transform: translateX( -50% ); transform: translateX( -50% ); } .centering-y { position: absolute; display: inline-block; top: 50%; left: 0; -webkit-filter: blur( 0 ); -moz-filter: blur( 0 ); -ms-filter: blur( 0 ); -o-filter: blur( 0 ); filter: blur( 0 ); -webkit-transform: translate3d( 0, -50%, 0 ); -moz-transform: translate3d( 0, -50%, 0 ); -ms-transform: translate3d( 0, -50%, 0 ); -o-transform: translate3d( 0, -50%, 0 ); transform: translate3d( 0, -50%, 0 ); } .centering-xy { position: absolute; display: inline-block; top: 50%; left: 50%; -webkit-transform: translate( -50%, -50% ); -moz-transform: translate( -50%, -50% ); -ms-transform: translate( -50%, -50% ); -o-transform: translate( -50%, -50% ); transform: translate( -50%, -50% ); } img.alignright { float: right; margin: 30px 0 15px 30px; } img.alignleft { float: left; margin: 30px 30px 15px 0; } img.aligncenter { display: block; margin: 35px auto; } img.alignright:first-child, img.alignleft:first-child { margin-top: 6px; } .alignright { float: right; } .alignleft { float: left; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } @media all and (max-width: 450px) { figure.alignleft, figure.alignright, img.alignleft, img.alignright { float: none; display: block; margin: 30px auto 30px auto; } } .no-pad { padding: 0; } .no-mrg { margin: 0; } .mrg-top-15 { margin-top: 15px; } .mrg-top-30 { margin-top: 30px; } .mrg-top-50 { margin-top: 50px; } .mrg-bottom-15 { margin-bottom: 15px; } .mrg-bottom-30 { margin-bottom: 30px; } .mrg-bottom-50 { margin-bottom: 50px; } .overflow-hidden { overflow: hidden; } .bypostauthor { } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; }