/* * Kombiniertes Theme-Bundle. * Zusammengefasst aus jetpack.css, button.css, fx.css, menu/menu.css, menu/tooltips.css, * um render-blockierende HTTP-Requests im zu reduzieren. * Reihenfolge = urspruengliche Enqueue-Reihenfolge (Kaskade beibehalten). * Hinweis: liegt bewusst in assets/css/, damit relative url()-Pfade (z.B. jetpack ../images) gueltig bleiben. */ /* ===== jetpack.css ===== */ article section>div>.wp-block-jetpack-tiled-gallery { display: block; width: 100% } article section>div>.wp-block-jetpack-tiled-gallery>.tiled-gallery__gallery { display: contents } article section>div>.wp-block-jetpack-tiled-gallery>.tiled-gallery__gallery figure img { height: 100% } article section>div>.wp-block-jetpack-tiled-gallery>.tiled-gallery__gallery .tiled-gallery__col+.tiled-gallery__col { margin-left: 8px } article section>div>.wp-block-jetpack-tiled-gallery>.tiled-gallery__gallery .tiled-gallery__item+.tiled-gallery__item { margin-top: 8px } article section .wp-block-jetpack-slideshow { display: grid; max-width: 100% } article section .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption { width: 100% } article section .jp-relatedposts .jp-relatedposts-items { display: flex; justify-content: space-between; align-items: stretch } article section .jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { min-height: 230px; display: flex; flex-direction: column; flex-basis: 100% } article section .jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:not(:last-child) { padding-right: 20px !important } article section .jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:last-child { padding-right: 0px !important } article section .jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-excerpt { display: none } article section .jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post-nothumbs>* { display: flex; flex-direction: column } article section .jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay { flex: 1; display: inherit !important; position: inherit !important } article section .jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post-nothumbs a::before { background: url('../images/img/nopreview.png') no-repeat center center; background-size: cover; height: 100%; object-fit: contain; border-radius: 0.2em; content: '' } article section .wp-block-jetpack-tiled-gallery.is-style-columns .tiled-gallery__item, article section .wp-block-jetpack-tiled-gallery.is-style-rectangular .tiled-gallery__item { width: auto !important } div.sharedaddy, #content div.sharedaddy, #main div.sharedaddy { margin-top: 20px } .comment-like-link { color: var(--theme-color) } .grav-grav { border-radius: 100%; margin: 0 5px 20px 0 } .gcard a, .gcard .grav-inner { font-family: 'SiteFont', Helvetica, Arial, Tahoma, sans-serif !important } .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__container form { display: flex; flex: auto; flex-wrap: nowrap; max-width: 100%; padding: 2px; border-radius: 0.25rem; border: 1px solid #E0E4E6; box-shadow: 0 1px 1px rgb(0 0 0 / 8%) inset } .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__container form:has(input:focus-visible) { outline: -webkit-focus-ring-color auto 1px; outline: 1px auto Highlight; outline: 1px auto -webkit-focus-ring-color } .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline .wp-block-jetpack-subscriptions__container form .wp-block-jetpack-subscriptions__form-elements { width: 100% } .wp-block-jetpack-subscriptions #subscribe-email { width: 100%; margin: 0 } .wp-block-jetpack-subscriptions #subscribe-email input { width: 100%; height: 46px } .wp-block-jetpack-subscriptions #subscribe-email input:focus-visible { outline: none } .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline #subscribe-email input { border: none; box-shadow: 0 1px 1px rgba(0, 0, 0, .075em) inset; border-radius: 0.1em !important; line-height: 20px; margin: 0; padding: 13px 8px !important; background-image: none; display: block; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important } .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline #subscribe-submit { display: flex; width: max-content; margin: 0 !important; border-top-right-radius: 2px !important; border-bottom-right-radius: 2px !important } .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline #subscribe-email br, .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline #subscribe-submit br { display: none; } .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline #subscribe-submit button { padding: 1em 1em 0.75em 3.5em !important; margin-left: 2px !important; min-width: 150px; border-radius: 0 !important; border-top-right-radius: 0.1em !important; border-bottom-right-radius: 0.1em !important; align-items: stretch; font-size: 0.9em !important } .wp-block-jetpack-subscriptions.wp-block-jetpack-subscriptions__supports-newline #subscribe-submit button:before { line-height: 2.5em } #jp-relatedposts .jp-relatedposts-items-visual { margin-right: 0px !important; } article div.sharedaddy h3.sd-title { display: block; width: 100%; } @media only screen and (max-width: 480px) { #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { word-break: break-word } } /* ===== button.css ===== */ .btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, a.button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "chevron_right"; } .btn:not(.not, .swiper-pagination-bullet, [class*="btn-"])[symbol-name]:before, button:not(.not, .swiper-pagination-bullet, [class*="btn-"])[symbol-name]:before, a.button:not(.not, .swiper-pagination-bullet, [class*="btn-"])[symbol-name]:before { content: attr(symbol-name); } button[type="submit"]:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "send"; } a.button.btn.warning:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.warning:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "warning" } a.button.btn.password:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.password:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "password" } a.button.btn.copy:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.copy:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "content_copy" } a.button.btn.encrypted:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.encrypted:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "encrypted" } a.button.btn.date:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.date:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "event" } a.button.btn.back:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.back:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "fast_rewind" } a.button.btn.forward:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.forward:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "fast_forward" } a.button.btn.buy:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.buy:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "euro_symbol" } a.button.btn.menu:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.menu:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.navbar-toggle.collapsed:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "menu" } button.btn.navbar-toggle:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "menu_open" } a.button.btn.more:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.more:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "read_more" } a.button.btn.loadmore:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.loadmore:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "drive_folder_upload" } a.button.btn.more.blog:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.more.blog:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "dashboard" } a.button.btn.more.history:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.more.history:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "history" } a.button.btn.more.portfolio:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.more.portfolio:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "collections_bookmark" } a.button.btn.more.services:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.more.services:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "engineering" } a.button.btn.project:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.project:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "developer_board" } .btn.search_btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, a.button.search:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.btn.search_btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.search-submit.btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button.wp-block-search__button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "search" } #subscribe-submit button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "subscriptions"; } .btn.tab:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "tab"; } .btn.next:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, .btn.history:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "history"; } .btn.prev:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, .btn.update:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "update"; } .home-blog-info .home-blog-btn a:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, .btn.blog-btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "article"; } #script_fullscreen .btn.ok:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, .cookies .btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "visibility"; } #script_fullscreen .btn.no:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "visibility_off"; } #script_fullscreen .btn.all-ok:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "cookie"; } #script_fullscreen .btn.all-no:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "cookie_off"; } a.comment-reply-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "reply"; } a.comment-edit-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { content: "edit"; } #searchbar_fullscreen input.search-field { border-radius: 0px; } input, button, .btn, .show-all-btn a, .service-btn a, .portfolio-btn a, .blog-post-date span, .blog-pagination a, .blog-pagination span, textarea, .wp-block-search__inside-wrapper { border-radius: var(--input-base); } body.a_mark_targets a[target=_blank]:not(a.btn, a.single-image-gallery, .gcard-about a, .*-social-icons a, .service-box a):after { content: "\f35d"; margin: 0 1px 0 3px; position: relative; bottom: 1px } body.a_mark_targets .service-area a[target=_blank]:not(a.btn):after { bottom: 2px } /* End Contentpart*/ button.btn.navbar-toggle { border-radius: var(--input-base); cursor: pointer; display: inline-block; line-height: 1em; margin-top: 12px; margin-bottom: 0; padding: 8px 18px 8px 55px; text-align: center; vertical-align: middle; white-space: nowrap; color: #fff; text-decoration: none } a.blog-btn, a.comment-edit-link, a.comment-reply-link { border-radius: var(--input-base); cursor: pointer; display: inline-block; line-height: 20px; margin-top: 12px; margin-bottom: 0; padding: 9px 18px; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none } .btn, button, a.button, input[type="submit"], a.comment-edit-link, a.comment-reply-link { box-shadow: inset 0 2.75em 0 -1.5em rgba(255, 255, 255, 0.15); text-shadow: 0 1px 1px #18191b } button.btn.search_btn:focus { outline: none; outline-offset: 0 } button.close, a.button.close { box-shadow: inset 0 2.65em 0 -1.85em rgba(255, 255, 255, 0.15) } button.wp-block-button__link, button.wp-block-search__button, .search-form button.btn.search_btn { word-break: keep-all; border: 1px solid transparent; box-shadow: inset 0 2.55em 0 -1em rgba(255, 255, 255, 0.15) } button.wp-block-search__button:not(.not, .swiper-pagination-bullet, [class*="btn-"]) { min-width: 150px } button.wp-block-search__button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { line-height: 2.5em } .btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover, button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover, a.button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover, input[type="submit"]:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover, a.comment-edit-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover, a.comment-reply-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover { text-shadow: 0 0 1px #18191b } .btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, a.button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, input[type="submit"]:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, a.comment-edit-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before, a.comment-reply-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):before { left: 0; line-height: 2em; position: absolute; text-align: left; text-indent: .55em; top: 0; width: 2.125em; z-index: -1 } .btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover:before, button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover:before, a.button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover:before, input[type="submit"]:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover:before, a.comment-edit-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover:before, a.comment-reply-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):hover:before { width: 100% } .btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled, button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled, a.button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled, input[type="submit"]:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled, a.comment-edit-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled, a.comment-reply-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled { text-shadow: unset } .btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:before, button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:before, a.button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:before, input[type="submit"]:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:before, a.comment-edit-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:before, a.comment-reply-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:before { text-shadow: unset } .btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:hover:before, button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:hover:before, a.button:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:hover:before, input[type="submit"]:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:hover:before, a.comment-edit-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:hover:before, a.comment-reply-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]):disabled:hover:before { width: 2.125em } .btn:not(.not, .swiper-pagination-bullet, [class*="btn-"]), button:not(.not, .swiper-pagination-bullet, [class*="btn-"], .swiper-pagination-bullet), a.button:not(.not, .swiper-pagination-bullet, [class*="btn-"]), input[type="submit"]:not(.not, .swiper-pagination-bullet, [class*="btn-"]), a.comment-edit-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]), a.comment-reply-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]) { min-width: 250px; display: inline-block; text-align: center; line-height: 1em; overflow: hidden; padding: 0.75em 1em 0.65em 3.5em; position: relative; user-select: none; z-index: 3 } .btn.big:not(.not, .swiper-pagination-bullet, [class*="btn-"]), button.big:not(.not, .swiper-pagination-bullet, [class*="btn-"]), a.button.big:not(.not, .swiper-pagination-bullet, [class*="btn-"]), input[type="submit"].big:not(.not, .swiper-pagination-bullet, [class*="btn-"]) { min-width: 300px; } .btn.dialog:not(.not, .swiper-pagination-bullet, [class*="btn-"]), button.dialog:not(.not, .swiper-pagination-bullet, [class*="btn-"]), a.button.dialog:not(.not, .swiper-pagination-bullet, [class*="btn-"]), input[type="submit"].dialog:not(.not, .swiper-pagination-bullet, [class*="btn-"]) { min-width: 215px; } .btn.small:not(.not, .swiper-pagination-bullet, [class*="btn-"]), button.small:not(.not, .swiper-pagination-bullet, [class*="btn-"]), a.button.small:not(.not, .swiper-pagination-bullet, [class*="btn-"]), input[type="submit"].small:not(.not, .swiper-pagination-bullet, [class*="btn-"]) { min-width: 180px; } .btn.smaller:not(.not, .swiper-pagination-bullet, [class*="btn-"]), button.smaller:not(.not, .swiper-pagination-bullet, [class*="btn-"]), a.button.smaller:not(.not, .swiper-pagination-bullet, [class*="btn-"]), input[type="submit"].smaller:not(.not, .swiper-pagination-bullet, [class*="btn-"]) { min-width: 120px; } a.comment-edit-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]), a.comment-reply-link:not(.not, .swiper-pagination-bullet, [class*="btn-"]) { min-width: 210px } button.btn.navbar-toggle { min-width: 100px } a.btn.tab { min-width: 160px; } #script_fullscreen .btn { position: relative; top: 50%; margin-top: 30px; border-radius: var(--input-base); } #script_fullscreen .btn.all-ok, #script_fullscreen .btn.all-no { margin: 7px 0px; } #searchbar_fullscreen .btn { position: absolute; top: 50%; left: 50%; right: auto; margin-top: 75px; margin-left: -125px; border-radius: var(--input-base); } #script_fullscreen .close, #searchbar_fullscreen .close { position: fixed; top: 15px; right: 15px; opacity: 1; min-width: 50px; min-height: 35px } .blogdetail-btn { display: block; margin: 0 0 10px } .blogdetail-btn a { display: inline-block; line-height: 20px; margin-bottom: 0; padding: 12px 24px; text-align: center } .cookies button.btn { min-width: 360px; margin-top: 20px; margin-bottom: 25px; } .cookies button:hover { background-color: #eb675e; text-shadow: 0px 3px 3px rgba(255, 255, 255, 0.3); } .cookies button:active { position: relative; top: 1px; } .cont-btn { display: block; margin: 0 0 10px } .cont-btn a { display: inline-block; line-height: 20px; margin-bottom: 0; padding: 12px 24px; text-align: center } .flex_btn { display: inline-block; line-height: 22px; margin-bottom: 5px; margin-top: 0; padding: 12px 25px; text-align: center } .home-blog-btn { display: block; margin: 0 } .home-blog-btn a { border-radius: var(--input-base); display: inline-block; line-height: 20px; margin-bottom: 0; padding: 10px 18px; text-align: center } .home-portfolio-showcase .home-portfolio-showcase-detail .portfolio-btn { position: absolute; bottom: 0px; left: 50%; margin-left: -90px } .portfolio-detail-pagi { display: flex; justify-content: space-between; } .portfolio-detail-pagi .button.btn { min-width: 173px; padding: 0.825em 1.5em 0.525em 2.75em; } .portfolio-btn { display: block; margin: 0 0 20px; text-align: center } .portfolio-btn a { display: inline-block; line-height: 20px; margin-bottom: 0; padding: 7px 15px; text-align: center } .portfolio-detail-info .project-btn { display: inline-block; line-height: 20px; margin: 10px 0; padding: 9px 20px; text-align: right; vertical-align: middle; text-align: center } .prelated-project-btn { margin: 0 0 20px 0; overflow: hidden; padding: 0; line-height: 3em; text-align: center } .prelated-project-btn li { display: inline-block; margin-left: 5px } .prelated-project-btn li:first-child { margin-left: 0 } .prelated-project-btn li a.btn { display: block !important; } .show-all-btn { border-radius: var(--input-base); padding: 0; text-align: center; margin: 0 0 50px } .show-all-btn a { display: inline-block; line-height: 22px; margin: 0; padding: 13px 30px; text-align: right; vertical-align: middle } .show-all-btn.switcher-style { margin: 50px 0 } .qua_contact_btn { display: block; margin: 0 0 10px; display: inline-block; line-height: 20px; margin-bottom: 0; padding: 12px 24px; text-align: center; border: none } .search_btn { float: right; } .search-form button.btn.search_btn { min-width: 124px; text-indent: 2.4rem; height: 36px; margin: 2px } .search-form button.btn.search_btn:before { line-height: 2.6em !important } .search-form button[type="submit"] { cursor: pointer; width: auto; line-height: 1em; border-radius: 0 var(--input-base) var(--input-base) 0 } .service-btn { display: block; text-align: center; margin: 0 0 20px } .service-btn a { display: inline-block; line-height: 20px; margin-bottom: 0; padding: 9px 18px; text-align: center } .service1 .service-area:hover .service-btn a, .service4 .service-area:hover .service-btn a, .service2 .service-effect:hover .service-btn a, .service3 .service-effect:hover .service-btn a { border: 1px solid #F5F5F5 } .service2 .service-area h2, .service2 .service-area p, .service2 .service-btn, .service4 .service-area h2, .service4 .service-area p, .service4 .service-btn { text-align: left } .service5 .service-effect:hover .service-btn a { border: 1px solid #32343c } .short-btn-large { display: inline-block; padding: 20px 32px; margin: 0 10px 15px 0; line-height: 20px; text-align: center; text-transform: lowercase; vertical-align: middle; cursor: pointer; border-radius: var(--input-base) } .short-btn-mini { display: inline-block; padding: 8px 18px; margin: 0 10px 10px 0; line-height: 20px; text-align: center; text-transform: lowercase; vertical-align: middle; cursor: pointer; border-radius: var(--input-base) } .short-btn-small { display: inline-block; padding: 13px 25px; margin: 0 10px 10px 0; line-height: 20px; text-align: center; text-transform: lowercase; vertical-align: middle; cursor: pointer; border-radius: var(--input-base) } .team3 .project-scroll-btn { margin-top: 50px } .tweet-btn { display: block; margin: 0 0 25px; overflow: hidden } .tweet-btn a { border-radius: var(--input-base); display: inline-block; line-height: 20px; margin-bottom: 0; padding: 12px 22px; text-align: center } /*Blog Parts*/ .search .blog-pagination a, .search .blog-pagination span { border-radius: var(--input-base) } .blog-pagination, .navigation.pagination .nav-links { margin: 0 0 20px; overflow: hidden; padding: 15px 0; text-align: center } .blog-pagination a { border: 0.2em solid rgb(55, 57, 65) } .blog-pagination a:not(.btn.next, .btn.prev), .page-links a, .blog-pagination span, .page-numbers { height: 40px; width: 60px; cursor: pointer; display: inline-block; line-height: 20px; margin: 9px 8px; padding: 9px 0; vertical-align: baseline; white-space: nowrap } .blog-pagination a, .blog-pagination span { border-radius: var(--input-biggerbase); box-shadow: inset 0px 36px 0px -19px rgba(255, 255, 255, 0.15) } .blog-pagination a:hover, .blog-pagination span:hover, .blog-pagination a.active, .blog-pagination span.active { border-radius: var(--input-base) } .blog-pagination a .fa { line-height: 0 } .blog-post-date { border-radius: var(--input-base); display: block; float: left; height: 102px; margin-left: 0; margin-right: 3.5%; margin-bottom: 25px; min-width: 60px; width: 60px } .blog-post-date:hover>span.date { box-shadow: rgb(50 50 93 / 25%) 0px 30px 60px -12px inset, rgb(0 0 0 / 30%) 0px 30px 50px -18px inset; text-shadow: none } .blog-post-date span { border-radius: var(--input-smallerbase); } .blog-post-date span.date { display: block; margin-top: 5px; line-height: 35px; margin-bottom: 0; padding: 5px 0 3px; text-align: center; box-shadow: rgb(50 50 93 / 25%) 0px 30px 60px -12px inset, rgb(0 0 0 / 30%) 0px 18px 36px -18px inset; text-shadow: 0px 2px 2px rgb(0 0 0 / 40%) } .blog-post-date span.date>small { display: block; line-height: 20px; margin-bottom: 4px; padding: 0; text-align: center } .blog-post-date span.comment { margin-top: -5px; display: block; line-height: 20px; text-align: center; padding: 9px 0 } .blog-post-date span.comment>i { line-height: 20px; margin-right: 5px } .blog-list-view .blog-post-date { min-width: 180px; margin: 30px 0 0 30px; } .blog-list-view .blog-post-date span.date { margin-top: 0px; margin-left: 5px; } .blog-list-view .blog-post-date span.comment { margin-top: 0px; } .blog-list-view.left .has-post-thumbnail .blog-post-date { margin: 30px 0 0 0 } /* ===== fx.css ===== */ @keyframes textShadow { 0% { text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5), -0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 5% { text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5), -2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 10% { text-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5), -0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 15% { text-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5), -0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 20% { text-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5), -3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 25% { text-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5), -1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 30% { text-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5), -0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 35% { text-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5), -3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 40% { text-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5), -3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 45% { text-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5), -2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 50% { text-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5), -0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 55% { text-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5), -2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 60% { text-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5), -2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 65% { text-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5), -2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 70% { text-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5), -0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 75% { text-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5), -1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 80% { text-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5), -0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 85% { text-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5), -0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 90% { text-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5), -3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 95% { text-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5), -2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } 100% { text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5), -2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; } } @keyframes flicker { 0% { opacity: 0.27861; } 5% { opacity: 0.34769; } 10% { opacity: 0.23604; } 15% { opacity: 0.90626; } 20% { opacity: 0.18128; } 25% { opacity: 0.83891; } 30% { opacity: 0.65583; } 35% { opacity: 0.67807; } 40% { opacity: 0.26559; } 45% { opacity: 0.84693; } 50% { opacity: 0.96019; } 55% { opacity: 0.08594; } 60% { opacity: 0.20313; } 65% { opacity: 0.71988; } 70% { opacity: 0.53455; } 75% { opacity: 0.37288; } 80% { opacity: 0.71428; } 85% { opacity: 0.70419; } 90% { opacity: 0.7003; } 95% { opacity: 0.36108; } 100% { opacity: 0.24387; } } @keyframes led-blink-animation { 25% { background-color: #101010; box-shadow: #000 0 -1px 7px 1px, inset #9A9 0 -1px 9px, #969 0 2px 14px; } 50% { background-color: #101010; box-shadow: #000 0 -1px 7px 1px, inset #9A9 0 -1px 9px, #969 0 2px 14px; } 75% { background-color: #101010; box-shadow: #000 0 -1px 7px 1px, inset #9A9 0 -1px 9px, #969 0 2px 14px; } } @keyframes text-blink-animation { 25% { color: #f5f5f5; } 50% { color: #f5f5f5; } 75% { color: #f5f5f5; } } @-webkit-keyframes shine { 100% { left: 125%; } } @keyframes shine { 100% { left: 125%; } } @keyframes slide { 0% { left: -100px; top: 0; } 50% { left: 120px; top: 0px; } 100% { left: 290px; top: 0; } } @keyframes fade-out { from { opacity: 1 } to { opacity: 0 } } @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes load { 0% { opacity: 0.08; filter: blur(5px); letter-spacing: 3px; } 100% {} } @keyframes gradientShift { 0% { background-position-x: 50%; } 50% { background-position-x: 0%; } 100% { background-position-x: 50%; } } .col-md-8 .post:not(:first-child) { background-size: 150% 100%; /* Vergrößert, um die Bewegung sichtbar zu machen */ /* Endlich statt "infinite": spielt kurz als Intro und stoppt dann, damit der Browser nicht dauerhaft neu zeichnet. */ animation: gradientShift 2s ease-in-out 2; } @media (prefers-reduced-motion: reduce) { .col-md-8 .post:not(:first-child) { animation: none; } } .page_fader.logo { margin: auto; min-width: 450px; text-align: center; } .page_fader.logo .navbar-brand, .page_fader.logo .site-description { display: block; float: none; width: fit-content; margin: 30px auto; padding: 0 50px; } .page_fader.logo .site-logo-area { padding-bottom: 5px } .page_fader.logo .site-logo-area.with-Logo.with-Text>.navbar-brand { margin-bottom: -15px } .animate { margin: 30px auto; animation: load 1.2s infinite 0s ease-in-out; animation-direction: alternate; } #page_fader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; padding: 5%; display: none; justify-content: center; align-items: center; pointer-events: none; animation-duration: 300ms; animation-timing-function: ease-in-out; } #page_fader.fade-out { opacity: 0; animation-name: fade-out; } #page_fader.fade-in { opacity: 1; animation-name: fade-in; } body.fixed_Header .navbar.navbar-static-top, body.fixed_Header .navbar.navbar-fixed-top { backdrop-filter: blur(5px) } .font-size-controls, .cookie-control { backdrop-filter: blur(5px) } /* Style and Class FX */ .content-led { margin: -12px -12px -12px -12px; width: 12px; height: 12px; border-radius: 50%; transition: all 0.2s ease 0s; position: relative; top: -12px; float: right } .content-led.link, .led-red { background-color: #940; box-shadow: #000 0 -1px 7px 1px, inset #600 0 -1px 9px, #F00 0 2px 12px; } .content-led.chat, .led-yellow { background-color: #A90; box-shadow: #000 0 -1px 7px 1px, inset #660 0 -1px 9px, #DD0 0 2px 12px; } .content-led.quote, .led-brightyellow { background-color: #d8fb19; box-shadow: #000 0 -1px 7px 1px, inset #660 0 -1px 9px, #DD0 0 2px 12px; } .content-led.aside, .led-green { background-color: #690; box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px; } .content-led.status, .led-bluegreen { background-color: #337ab7; box-shadow: #000 0 -1px 7px 1px, inset #460 0 -1px 9px, #7D0 0 2px 12px; } .content-led.audio, .led-blue { background-color: #4AB; box-shadow: #000 0 -1px 7px 1px, inset #006 0 -1px 9px, #06F 0 2px 14px; } .content-led.gallery, .led-brightblue { background-color: #818bcf; box-shadow: #000 0 -1px 7px 1px, inset #006 0 -1px 9px, #06F 0 2px 14px; } .content-led.image, .led-darkmagenta { background-color: #a019ca; box-shadow: #000 0 -1px 7px 1px, inset #006 0 -1px 9px, #06F 0 2px 14px; } .content-led.video, .led-royalblue { background-color: #004e9f; box-shadow: #000 0 -1px 7px 1px, inset #006 0 -1px 9px, #06F 0 2px 14px; } .led-grey { background-color: #101010; box-shadow: #000 0 -1px 7px 1px, inset #9A9 0 -1px 9px, #969 0 2px 14px; } .container .post:hover .content-led { animation: led-blink-animation 1s steps(10, start) infinite; } .blog-list-view .content-led { top: 30px; right: 30px } .search .content-led, .single .content-led, .archive .content-led, .blog-fullwidth .content-led, .blog-left-sidebar .content-led, .blog-right-sidebar .content-led, .masonry .content-led { top: 0px; } .blog-post-date span.date { transition: all 0.2s ease 0s; } .lcd { display: block; margin: 1em auto; background: #345; border: 2px solid black; width: 100%; padding: 0.65em 1em; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .2), 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 5px 5px rgba(0, 0, 0, .1); font-weight: bold; font-family: consolas, courier; letter-spacing: 0.1em; font-size: 1em; line-height: 160%; color: #21230e; text-shadow: -1px 2px 1px rgba(0, 0, 0, .1); border-radius: 10px; word-break: break-all; } .lcd small { color: #949782; text-shadow: none; float: right; margin-top: -20px; } .crt { animation: textShadow 1.6s infinite; background-color: #345; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); } .crt p { animation: flicker 0.05s infinite; } /* Content FX */ #blogdetail_btn { transition: all .4s ease 0s } #script_fullscreen, #searchbar_fullscreen { backdrop-filter: blur(5px) } #script_fullscreen, #searchbar_fullscreen { transition: all .5s ease-in-out; transform: translate(0px, -100%) scale(0, 0) } #script_fullscreen.open, #searchbar_fullscreen.open { transform: translate(0px, 0px) scale(1, 1) } .close { transition: all 100ms ease-out 0s; } .container.single.portfolio .port-detail-img img { transition: all 300ms ease-out 0s; } .container.single.portfolio .port-detail-img:hover img { transform: scale(1.20) } .about-section.img, .attachment-section.img { transition: all 200ms ease-out 0s; } .about-section.img img, .attachment-section.img img { transition: all 300ms ease-out 0s; } .about-section.img:hover img, .attachment-section.img:hover img { transform: scale(1.20) } .about-social-icons li>a>i { transition: all .3s ease 0s } .bigborder { backdrop-filter: blur(5px); transition: border 200ms ease-out 0s } .blog-author-social li { transition: background .3s ease-in-out 0s } .blog-post-date { box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; transition: box-shadow 200ms ease-out 0s } .blog-post-date:hover { box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; } .blog-post-detail a { transition: all .3s ease 0s } .blog-post-img { transition: all 200ms ease-out 0s } .blog-post-img img { transition: all 300ms ease-out 0s } .blog-post-img:hover img { transform: scale(1.20) } .blog-post-meta a { transition: all .3s ease 0s } .blog-post-title-wrapper h1 a, .blog-post-title-wrapper-full h1 a { transition: all .3s ease 0s } .blog-switcher-view .blog-post-img { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } .blog-tags a { transition: all .3s ease 0s } .blogdetail-btn a { transition: all .4s ease 0s } .callout-section h3 { transition: all .5s ease 0s } .clients-logo, .partners-logo { transition: background .3s ease-in-out 0s; backdrop-filter: blur(5px) } .cont-btn a { transition: all .4s ease 0s } .contact-detail-area { transition: all .4s ease 0s } .contact-detail-area i { transition: all .1s ease 0s } .comment-img { box-shadow: rgba(0, 0, 0, 0.25) 0px 34px 35px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; transition: box-shadow 200ms ease-out 0s } .comment-img:hover { box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 15px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; } .comment-section .comment { box-shadow: rgba(50, 50, 50, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; backdrop-filter: blur(5px) } .features-section { backdrop-filter: blur(5px) } footer.site { transition: 1s; backdrop-filter: blur(5px) } footer.site div.footer-social-area { transition: max-height 1.2s ease, opacity 5s linear } footer.site i.show-me { transition: all 0.5s ease-in-out 0.3s } footer.site div.footer-copyright { transition: max-height 3s ease, opacity 5s linear } .feature-icon { transition: all .4s ease 0s } .flex_btn { transition: all .3s ease 0s } .flexslider { backdrop-filter: blur(5px) } .footer-blog-post:hover h3 a { transition: all .4s ease 0s } .footer-contact-social li>a>i { transition: all .3s ease 0s } .footer-widget-flicker span { transition: all 200ms ease-out 0s } .footer-widget-flicker span>a>img { transition: all 200ms ease-out 0s } .footer-widget-tags a { transition: all .3s ease 0s } .footer_widget_column>.tagcloud a { transition: all .3s ease 0s } .footer_widget_column>ul>li>a, .footer_widget_column>ul>li>ul>li>a, .footer_widget_column>ul>li>ul>li>ul>li>a, .footer_widget_column>ul>li>a:hover, .footer_widget_column>ul>li>ul>li>a:hover, .footer_widget_column>ul>li>ul>li>ul>li>a:hover { transition: all .3s ease 0s } .head-contact-social li { transition: background .1s ease-in-out 0s } .head-contact-social li>a>i { transition: color .3s ease-in-out 0s } .home-blog-area, .page-blog-area { transition: all .4s ease 0s; backdrop-filter: blur(5px) } .home-blog-area .home-blog-info h2>a, .page-blog-area .home-blog-info h2>a { transition: all .4s ease 0s } .home-blog-area:hover .home-blog-post-img img, .page-blog-area:hover .home-blog-post-img img { transform: scale(1.25) } .page-breadcrumbs { backdrop-filter: blur(5px) } .home-blog-btn a { transition: all .4s ease 0s } .home-blog-post-detail>.comment>a { transition: all .3s ease 0s } .home-blog-post-img { transition: all 200ms ease-out 0s } .home-blog-post-img img { transition: all 300ms ease-out 0s } .home-portfolio-showcase .home-portfolio-showcase-detail h4 { transition: all 180ms ease-in-out 0s } .home-portfolio-showcase .home-portfolio-showcase-detail p { transition: all 180ms ease-in-out 0s } .home-portfolio-showcase-overlay { transition: all .4s ease } .home-portfolio-showcase-overlay-inner { transform: translateY(-50%) } .homepage_mycarousel { backdrop-filter: blur(5px) } .main-portfolio-showcase .main-portfolio-showcase-detail h4 { transition: all 180ms ease-in-out 0s; transition: all 180ms ease-in-out 0s } .main-portfolio-showcase .main-portfolio-showcase-detail p { transition: all 180ms ease-in-out 0s } .main-portfolio-showcase-overlay { transition: all .4s ease } .masonry-item .blog-lg-box:after { transition: .5s opacity ease-in-out } .nav li.menu-item a, .nav li .header-module { transition: all .3s ease-in-out .2s } .nav li.menu-item a:after { transform: scale3d(0, 1, 1); transform-origin: right; transition: transform .3s ease-in-out .2s; } .nav li.menu-item a:hover { transition: all .3s ease-in-out 0s } .nav li.menu-item a:hover:after { transform: scale3d(1, 1, 1); } .nav>li.menu-item>a:after { transform-origin: left; } .nav li.menu-item.active a { transition: none; } a.btn:not(.not), button.btn:not(.not) { backdrop-filter: blur(2px); } .dropdown-menu, .dropdown-menu li { backdrop-filter: blur(5px) !important; transition: all .3s ease-in-out 0s } .navbar-brand { transition: margin 0.3s ease-in-out 0s; } .navbar-brand img { transition: width 0.2s, height 0.2s; } .navbar-wrapper, .wallstreet_subtitle_head, .wallstreet_title_head { transition-timing-function: linear; transition-duration: 0.2s; } .navbar2 li .dropdown-toggle::before { transition: all .3s ease-in-out 0s } .navbar2 li .dropdown-toggle::before { transition: all .3s ease-in-out 0s } .navbar2 ul li>a:after { transition: width .5s ease, background-color .5s ease } .other-service-area { transition: all .4s ease 0s } .other-service-area i { transition: all .3s ease 0s } .other-service-area1 { transition: all 300ms ease-out 0s } .other-service-area1 i { transition: all 600ms ease-out 0s } .page-title-col { transform: translateY(-50%) } .pagetitle-separator-box { transform: rotate(45deg) } .portfolio.portfoliocat .container { backdrop-filter: blur(5px); } .portfolio.portfoliocat .tab-content { transition: all .4s ease 0s } .portfolio-btn a { transition: all .4s ease 0s } .portfolio-detail-info .project-btn { transition: all .4s ease 0s } .portfolio-detail-pagi li a { transition: all .3s ease 0s } .portfolio-section { backdrop-filter: blur(5px) } .portfolio-tabs li a { transition: all .3s ease } .post-content li a { transition: all .3s ease 0s } .post-date { transition: all .4s ease 0s } .post-date span.date { transition: all .4s ease 0s } .post-date span.month { transition: all .4s ease 0s } .post-sidebar-img { transition: all 200ms ease-out 0s } .prelated-project-btn li a { transition: all .3s ease 0s } .show-all-btn { transition: all .4s ease 0s } .show-all-btn a { transition: all .4s ease 0s } .qua_contact_btn { transition: all .4s ease 0s } .edit-link a, .reply a { transition: all .4s ease 0s } .row.with_background { backdrop-filter: blur(5px) } .search-form button[type="submit"] { transition: all .3s ease-in-out } .search-panel input[type="search"] { transition: all 300ms ease } .search_widget_input { transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s } .service-area { transition: background .3s ease-in-out 0s; backdrop-filter: blur(5px) } .service-box { transition: all 300ms ease-out 0s } .service-box img { transition: all 600ms ease-out 0s } .service-box1 img { transition: all 600ms ease-out 0s } .service-btn a { transition: all .4s ease 0s } .service-effect:hover .other-service-area1 i { transform: rotate(360deg) } .service-effect:hover .service-box img { transform: rotate(360deg) } .service1 .service-box i.fa { transition: all .2s linear; transform: scale3d(1, 1, 1) } .service1 .service-box img { transition: all .2s linear } .service1 .service-effect:hover .service-box i.fa { transform: scale3d(1.2, 1.2, 1) } .service1 .service-effect:hover .service-box img { transform: scale3d(1.2, 1.2, 1) } .service2 .service-box i.fa { transition: .4s } .service2 .service-box img { transition: all .2s linear } .service2 .service-effect::before { transition: .5s } .service2 .service-effect:hover .service-box img { transform: rotate(0deg) } .service3 .service-box i.fa { transition: all .2s linear; transform: scale3d(1, 1, 1) } .service3 .service-box img { transition: all .2s linear } .service3 .service-effect { transition: all .25s ease-in } .service3 .service-effect:hover { transform: translateY(-7px) } .service3 .service-effect:hover .service-box i.fa { transform: scale3d(1.1, 1.1, 1) } .service3 .service-effect:hover .service-box img { transform: scale3d(1.1, 1.1, 1) } .service4 .service-box i.fa { transition: all .5s ease-out 0s } .service4 .service-effect { transition: all .25s ease-in } .service4 .service-effect:hover .service-box img { transform: rotate(0deg) } .service4 .service-effect:hover .service-box img, .service4 .service-effect:hover .service-box i.fa { transform: rotate(360deg); transition: .5s all ease } .service5 .service-box i.fa { transition: all .2s linear } .service5 .service-box img { transition: all .2s linear } .service5 .service-effect { transition: .3s } .service5 .service-effect:hover .service-box img, .service5 .service-effect:hover .service-box i { transform: rotate(0deg) } .service5 .service-effect:hover .service-box img:not(.service5 .stop.service-effect:hover .service-box img), .service5 .service-effect:hover .service-box i:not(.service5 .stop.service-effect:hover .service-box i) { transform: rotate(360deg) } .service5 .service-effect:hover p { transition: all .4s ease 0s } .sidebar-widget>.tagcloud a { transition: all .3s ease 0s } .sidebar-widget>ul>li>a, .sidebar-widget>ul>li>ul>li>a, .sidebar-widget>ul>li>ul>li>ul>li>a, .sidebar-widget>ul>li>a:hover, .sidebar-widget>ul>li>ul>li>a:hover, .sidebar-widget>ul>li>ul>li>ul>li>a:hover, .sidebar-widget ul.sidebar-tab.sidebar-widget-tab>li>a:hover { transition: all .3s ease 0s } .sidebar-widget-tags a { transition: all .3s ease 0s } .site-branding-text .site-title .navbar-brand { font-size: unset } .table { animation: float 5s infinite } .team-area { transition: background .3s ease-in-out 0s } .team-area h5 { transition: all .4s ease 0s } .team-area h5>span { transition: all .4s ease 0s } .team-area p { transition: all .4s ease 0s } .team-box { transition: all 300ms ease-out 0s } .team-box img { transition: all 600ms ease-out 0s } .team-img .overlay { backdrop-filter: blur(2px); } .team-effect:hover .team-box img { transform: rotate(360deg) } .team-section1 .team-block .team-img img { transition: all .2s linear; transform: scale3d(1, 1, 1) } .team-section1 .team-block:hover .team-img img { transform: scale3d(0.9, 0.9, 1) } .team-section1 .team-img .overlay .custom-social-icons li>a { transition: .1s } .team-section1.team1 .team-block:hover .team-img img { transform: unset } .team-section1.team2 .team-block:hover .team-img img { transform: scale3d(0.9, 0.9, 1) } .team-social-icons li>a>i { transition: all .3s ease 0s } .team1 .img-holder:hover::before { animation: shine .85s } .team1 .team-img .overlay { transform: translateY(100%); transition: all .2s } .team1 .team-img:before { transform: skewX(-25deg) } .team1 .team-img:hover .overlay { transform: translateY(0) } .team1 .team-img:hover::before { animation: shine .85s } .team3 .team-block .team-img img { transition: all .2s linear; transform: scale3d(1, 1, 1) } .team4 .custom-social-icons { transform: translateX(-100%); transition: all .3s ease } .team4 .team-block:hover .custom-social-icons { transform: translateX(0); transition-delay: .2s } .team4 .team-block:hover .team-img img { transform: none } .team4 .team-details { transition: all .3s ease } .team4 .team-img::before { transition: all .3s ease } .testimonial3 .testimonial-area:before { transform: rotate(-45deg); transform-origin: 80% -30% 0 } .tiled-gallery-item img { transition: all .3s } .tweet-btn a { transition: all .4s ease 0s } .wp-block-search .wp-block-search__input { transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s } .wp-block-tag-cloud a { transition: all .3s ease 0s } .wpcf7-submit { transition: all .4s ease 0s } body a { transition: color .5s ease } button, a.button { transition: box-shadow .5s } a.comment-edit-link:before, a.comment-reply-link:before, input[type="submit"]:before, .btn:before, button:before, a.button:before { transition: all .5s } input#pwbox-1168 { transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s } a.comment-edit-link:not(.not, .swiper-pagination-bullet), a.comment-reply-link:not(.not, .swiper-pagination-bullet), input[type="submit"]:not(.not, .swiper-pagination-bullet), button:not(.not, .swiper-pagination-bullet), .btn:not(.not, .swiper-pagination-bullet), a.button:not(.not, .swiper-pagination-bullet) { transition: all .3s } /* ===== menu/menu.css ===== */ /*! * Theme Menu Css created by Shahid (Scientech) */ /*Menu Section--------------------------------------------------------------------------*/ .navbar-inverse { border: none; padding: 5px 0; background-color: rgba(0, 0, 0, 0.6); padding: 0 } .navbar-inverse .navbar-toggle { border-color: none } .navbar-inverse .navbar-brand { color: #ffffff } .navbar-header .site-logo-area { display: flex; flex-direction: row; flex: 1 1 300px } .navbar-header .site-logo-area .navbar-brand { font-weight: 400; font-size: 40px; height: auto; line-height: 40px; padding: 0 } .navbar-header .site-logo-area.no-Text .navbar-brand { margin-right: 50px } .navbar-header .site-logo-area.with-Logo.no-Text .navbar-brand img { position: absolute } .navbar-header .site-logo-area.with-Logo.with-Text .navbar-brand { margin-right: 10px } .navbar-header .site-logo-area.with-Logo .site-title .navbar-brand { margin-left: 0 } .navbar { border-radius: 0px; margin-bottom: 0px; min-height: 100px } .navbar > .container .navbar-brand { margin-left: 0 } .navbar .navbar-nav > .active > a, .navbar .navbar-nav > .active > a:hover, .navbar .navbar-nav > .active > a:focus { color: #FFFFFF } .navbar .navbar-nav > .open > a, .navbar .navbar-nav > .open > a:hover, .navbar .navbar-nav > .open > a:focus { color: #FFFFFF } .navbar .navbar-nav > li { margin-right: 0px; padding: 0 } .navbar .navbar-nav > li > a { line-height: 20px; padding: 40px 19px; border-radius: 0px 0px 4px 4px; color: #ffffff; font-weight: 400; font-size: 16px } .navbar .navbar-nav > li > a:hover, .navbar .navbar-nav > li > a:focus { color: #FFFFFF } .nav { margin-top: 0px } .navbar-collapse { max-height: 100% } /*Dropdown Menus & Submenus Css----------------------------------------------------------*/ .dropdown > a .glyphicon, .dropdown-menu > a .glyphicon { margin: -10px 0 0 10px; position: relative; top: 2px } .dropdown-menu { background-color: rgba(0, 0, 0, 0.7); min-width: 226px; border-radius: 0px var(--input-base) var(--input-base) var(--input-base); border: 0 none; box-shadow: 2px 5px 16px 0px rgba(0, 0, 0, 0.7), 5px 5px 15px 5px rgba(0,0,0,0); padding: 5px; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #fff } .dropdown-menu > li > a { color: #ffffff; line-height: 20px; padding: 15px 20px; transition: color 0.2s ease-in-out 0s; overflow: hidden; text-overflow: ellipsis; border-radius: var(--input-base); white-space: nowrap } .dropdown-menu > li > a:last-child { border-bottom: 0px; border-bottom: 0 } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { text-decoration: none; background-color: transparent } .dropdown-submenu { z-index: 9999; position: relative } .dropdown-submenu > a .glyphicon { top: 12px } .dropdown-submenu > .dropdown-menu { top: 0; left: 100% !important; margin-top: 0px; margin-left: 0px; border-radius: 0px var(--input-base) var(--input-base) var(--input-base) } .dropdown-submenu:hover > .dropdown-menu { display: block } .dropdown-submenu .pull-left { float: none } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; border-radius: var(--input-base) } .navbar-nav .dropdown-menu { border: solid 1px #fff; } .navbar-nav > li > .dropdown-menu { border-radius: var(--input-base); border: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 15px } .navbar-right .dropdown-menu { right: 0%; } .navbar-left .dropdown-menu { left: 0%; } .uib-datepicker-popup.dropdown-menu li { padding: 0 } .uib-datepicker-popup.dropdown-menu .uib-button-bar { margin-top: 15px } .uib-datepicker-popup.dropdown-menu table tr td { border-radius: 0 } .uib-datepicker-popup.dropdown-menu table tr:last-child td:first-child { border-bottom-left-radius: var(--input-base) } .uib-datepicker-popup.dropdown-menu table tr:last-child td:last-child { border-bottom-right-radius: var(--input-base) } /* ===== menu/tooltips.css ===== */ /*==================================================== CSS Tooltips by Adam Whitcroft https://github.com/AdamWhitcroft/CSS.Tooltips ====================================================*/ /*==================================================*/ /* $Tooltips */ /*==================================================*/ [data-tip] { position: relative; cursor: help; } [data-tip]:before { content: ''; /* hides the tooltip when not hovered */ display: none; border: 5px solid #00c2a9; /* 4 border technique to create the arrow */ border-top-color: #00c2a9; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; position: absolute; top: -11px; left: 20px; z-index: 8; font-size: 0; line-height: 0; width: 0; height: 0; } [data-tip]:after { display: none; content: attr(data-tip); position: absolute; top: -35px; left: -10px; padding: 7px 15px; background: #00c2a9; color: #fff; z-index: 9; font-size: 13px; height: auto; line-height: 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; white-space: nowrap; word-wrap: normal; } [data-tip]:hover:before, [data-tip]:hover:after { display: block; } /*==================================================*/ /* $Coloured Tooltips */ /*==================================================*/ /* Help tooltip */ .help { color: #00b7d8; } .help[data-tip]:before { border-top-color: #00b7d8; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } .help[data-tip]:after { background: #00b7d8; color: #fff; } /* Success tooltip */ .success { color: #51bd6a; } .success[data-tip]:before { border-top-color: #51bd6a; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } .success[data-tip]:after { background: #51bd6a; color: #fff; } /* Alert tooltip */ /* .alert { color:#f9ca64; } .alert[data-tip]:before { border-top-color:#f9ca64; border-right-color:transparent; border-bottom-color:transparent; border-left-color:transparent; } .alert[data-tip]:after { background:#f9ca64; color:#574d36; } */ /* Error tooltip */ /* .error { color:#e1473e; } .error[data-tip]:before { border-top-color:#e1473e; border-right-color:transparent; border-bottom-color:transparent; border-left-color:transparent; } .error[data-tip]:after { background:#e1473e; color:#fff; } */ /*==================================================*/ /* $Gravity */ /*==================================================*/ .tip-below[data-tip]:after { top: 23px; left: 0px; } .tip-below[data-tip]:before { border-top-color: transparent; border-right-color: transparent; border-bottom-color: #1a1a1a; border-left-color: transparent; top: 13px; left: 10px; } .tip-below.help[data-tip]:before { border-top-color: transparent; border-right-color: transparent; border-bottom-color: #00b7d8; border-left-color: transparent; } .tip-below.success[data-tip]:before { border-top-color: transparent; border-right-color: transparent; border-bottom-color: #51bd6a; border-left-color: transparent; } .tip-below.alert[data-tip]:before { border-top-color: transparent; border-right-color: transparent; border-bottom-color: #f9ca64; border-left-color: transparent; } .tip-below.error[data-tip]:before { border-top-color: transparent; border-right-color: transparent; border-bottom-color: #e1473e; border-left-color: transparent; }