/* Theme Name: Biogenic Theme URI: http://theme-essentials.com/themes/biogenic Author: Theme Essentials Author URI: http://theme-essentials.com Description: Biogenic is designed with full-featured customize-able sections to easily style how your site looks to your visitors. It includes a top header area that allows for a site info text and social media icons. Customize-able header hero, welcome section, team section and testimonials sections are also included. Links, images, text and buttons can me modified in the theme customizer. Biogenic utilized Bootstrap 3.3.6 for awesome responsive performance and clean styling. There are 4 custom footer widget areas and a custom contact info widget to be placed where you like. For the bloggers, the entry header and footer are styled with the author avatar and arranged for great featured image display. Version: 1.0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: biogenic Tags: two-columns, right-sidebar, custom-header, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, grid-layout, footer-widgets, blog, portfolio This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. Biogenic is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Elements # Header # Navigation ## Menus # Accessibility # Alignments # Clearings # Widgets # Content ## Posts and pages ## Asides ## Comments # Infinite scroll # Media ## Captions ## Galleries # WooCommerce # Easy Digital Downloads # Footer --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ table, th, td { border: 2px solid #CDCFDF; } table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin: 0 0 1.75em; table-layout: fixed; /* Prevents HTML tables from becoming too wide */ width: 100%; } caption, th, td { font-weight: normal; text-align: left; } th { border-width: 0 1px 1px 0; font-weight: 400; } td { border-width: 0 1px 1px 0; } th, td { padding: 5px 5px; } input[type="search"] { height: 40px; vertical-align: middle; -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; font-weight: 300; width: 175px; } input[type="submit"] { -webkit-appearance: button; cursor: pointer; color: #f2f2f2; background-color: #128f76; border: 1px solid #128f76; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; white-space: nowrap; padding: 11px 20px; font-size: 16px; font-weight: 400; line-height: 1.42857143; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="submit"]:hover { background-color: #11715E; border-color: #0F5F4F; } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ .top-header { border-bottom: 1px solid #E1E1E1; } .top-header-text { float: left; margin-left: 20px; } .top-header-text p { margin: 0; font-size: 14px; } .top-header-text a { color: #fff; text-decoration: none; } @media screen and (max-width: 760px) { .top-header-text { float: none; margin: 0; text-align: center; } } .top-socials { margin-right: 30px; } .top-socials a { padding-left: 10px; text-decoration: none; } .top-socials .fa { color: #fff; } .f_left { float: left; } .f_right { float: right; } .clear { clear: both; } .header-image { position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; } .no-header-image { display: none; } /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ .logo { float: left; } /*header menu css*/ .toggle { display: block; } .toggleMenu { display: none; } .toggle a { width: 100%; color: #ffffff; background: url(images/mobile_nav.png) no-repeat right center #128f76; padding: 10px 10px; font-size: 16px; } .toggle a:hover { color: #ffffff !important; } .sitenav { display: none; } .nav-container { width: 100%; z-index: 999; background-color: #fff; position: relative; border-bottom: 1px solid #C2C2C2; padding: 0 95px 0 50px; } .sitenav { padding: 0; text-align: right; float: right; } .sitenav ul { float: right; margin: 0; padding: 0; font-weight: 600; font-size: 17px; } .sitenav ul ul { -webkit-box-shadow: 0px 5px 15px 0px rgba(125, 120, 125, 1); -moz-box-shadow: 0px 5px 15px 0px rgba(125, 120, 125, 1); box-shadow: 0px 5px 15px 0px rgba(125, 120, 125, 1); } .sitenav ul li { display: inline-block; margin: 0; position: relative; text-align: center; } .sitenav ul li a { padding: 25px 7px; display: block; color: #333; border-top: 1px solid transparent; } .sitenav ul li ul li { display: block; position: relative; float: none; top: -1px; } .sitenav ul li ul li a, .fixed-header .sitenav ul li ul li a { display: block; padding-top: 7px; padding-bottom: 7px; position: relative; top: 1px; text-align: left; color: #333; border-top: 1px solid #ccc; } .sitenav ul li a:hover, .sitenav ul li.current_page_item a { color: #128f76; text-decoration: none; -webkit-transition: color 0.3s; transition: color 0.3s; } .sitenav ul li ul { display: none; z-index: 9999; position: relative; } .sitenav ul li:hover > ul { display: block; width: 200px; position: absolute; left: 0; top: 60px; text-align: left; background-color: #fff; } .sitenav ul li:hover ul li ul { display: none; position: relative; } .sitenav ul li:hover ul li:hover > ul { display: block; position: absolute; left: -200px; top: 1px; } @media screen and (max-width: 760px) { .toggleMenu { display: block; } .nav-container { padding: 0; } .sitenav { float: none; margin: 0; position: relative; overflow-x: hidden; background-color: #fff; border-radius: 0; top: 0; border-bottom: none; } .sitenav ul { color: #000; width: 100% !important; float: none !important; font-size: 14px; font-weight: 400; margin: 0; padding: 0; } .sitenav ul ul { -webkit-box-shadow: unset; -moz-box-shadow: unset; box-shadow: unset; } .sitenav ul li { border-top: 1px #ccc solid; display: block; float: none; text-align: left; border-bottom: none !important } .sitenav ul li a { padding: 5px 10px !important; display: block; color: #222; border: none; } .sitenav ul li a:hover, .sitenav ul li.current_page_item a { color: #128f76; border: none !important; } .sitenav ul li ul, .sitenav ul li ul ul { display: block !important; } .sitenav ul li ul li a:before { content: "\00BB \00a0"; } .sitenav ul li ul li a { padding-left: 20px !important; } .sitenav ul li ul li a, .fixed-header .sitenav ul li ul li a { border: none; } .sitenav ul li ul li ul li a { padding-left: 30px !important; } .sitenav ul li ul li ul li ul li a { padding-left: 40px !important; } .sitenav ul li:hover > ul { background: none !important; box-shadow: none; } .sitenav ul li:hover > ul { background: transparent !important; width: auto !important; display: block; position: relative !important; left: 0; right: 0; top: 0; padding: 0; } .sitenav ul li:hover ul li ul, .sitenav ul li:hover ul li:hover > ul, .sitenav ul li:hover ul li:hover > ul li ul { background: transparent !important; display: block; position: relative !important; right: 0; left: 0; top: 0; } .sitenav ul li:hover ul li:hover ul, .sitenav ul li:hover ul li:hover ul li:hover ul { left: 0 !important; } } .fixed-header .top-header { display: none; } .fixed-header .top-header-logo { padding: 12px 12px 12px 23px; } .fixed-header .nav-container { position: fixed; top: 0; width: 100%; -moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, .18); -webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, .18); box-shadow: 0px 2px 3px rgba(0, 0, 0, .18); } .fixed-header .sitenav ul li a:hover, .fixed-header .sitenav ul li.current_page_item a { color: #128f76; text-decoration: none; -webkit-transition: color 0.3s; transition: color 0.3s; } .fixed-header .sitenav ul li a { padding: 18px 7px; } .fixed-header .logo { float: left; z-index: 999; padding: 0; color: #333; } .admin-bar .fixed-header .nav-container { top: 32px; } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 20px 5px; overflow: hidden; } .post-nav-box { margin: 15px 0; padding: 1em 0; margin-bottom: 1em; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .page-links { margin-top: 20px; padding: 1em 0; margin-bottom: 1em; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; clear: both; font-size: 18px; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; font-size: 18px; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; font-size: 18px; } .paging-navigation ul { margin: 15px 0; } .paging-navigation li { display: inline; font-size: 18px; } a.page-numbers, span.page-numbers { padding: .3em .7em; color: #333; } a:hover.page-numbers, a:focus.page-numbers { color: #333; } .paging-navigation .current { font-weight: bold; color: #222; } .read-more { margin: 10px 0 15px 0; } /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- # Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } @media (max-width: 1199px) { .clearit { clear: left; } } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; } .widget-area { padding-top: 15px; padding-left: 30px; } .widget-title { font-size: 20px; padding-bottom: 3px; border-bottom: 2px solid #C1CACE; width: 275px; } .widget ul, .widget ol { padding: 0; margin-left: 0.8em; list-style-type: none; } .widget li li { margin-left: .5em; } .widget li:before { padding-right: 7px; font-family: 'fontawesome'; font-size: 16px; content: "\f0da"; color: #777; clear: both; } .widget_nav_menu a, .widget_pages a { display: inline-block; padding: 3px 0; border-bottom: solid 1px #ccc; } .widget_rss .rss-date, .widget_rss cite { display: block; font-size: 85%; } /* Make sure select elements fit in widgets. */ .widget select { max-width: 100%; } .content-widgets { clear: both; padding: 1.5em 0; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ #page-grid { padding-top: 30px; padding-bottom: 30px; } /*-------------------------------------------------------------- ## Sections --------------------------------------------------------------*/ hr.primary { max-width: 75px; border-color: #128f76; border-width: 3px; } .hero-content { padding-top: 150px; padding-bottom: 175px; text-align: center; color: #EFEFEF; font-weight: 300; background-position: center; background-size: cover; background-repeat: no-repeat; } .hero-content h1 { font-size: 38px; text-shadow: 3px -2px 2px rgba(150, 150, 150, 1); } .hero-content h2 { padding-top: 10px; font-size: 34px; text-shadow: 3px -2px 2px rgba(150, 150, 150, 1); } .hero-buttons { padding-top: 30px; } .hero-buttons #button1 { margin-right: 25px; } @media (max-width: 768px) { .hero-content { padding-top: 75px; padding-bottom: 125px; } .hero-content h1 { font-size: 32px; } .hero-content h2 { font-size: 28px; } .hero-buttons { padding-top: 20px; } .hero-buttons #button1 { margin-left: 15px; margin-right: 10px; } } .welcome-section { padding: 75px 0; font-size: 18px; } .welcome-section h1 { text-transform: uppercase; font-size: 30px; font-weight: 600; } .services-section { padding: 80px 0 90px 0; } .services-section h1 { text-transform: uppercase; font-size: 26px; font-weight: 600; } .service-box { margin-top: 30px; clear: both; } .service-box a { color: inherit; } .service-box a:hover { text-decoration: none; text-shadow: 2px 2px #ccc; } .service-box p { padding-top: 5px; } .team-section { padding: 80px 0; } .team-section h1 { text-transform: uppercase; font-size: 26px; font-weight: 600; } .team-member { margin-top: 20px; margin-bottom: 30px; } .team-member img { margin: 0 auto; border: 7px solid #fff; opacity: 0.9; } .team-member h3 { margin-top: 10px; margin-bottom: 0; text-transform: none; } .team-member p { margin-top: 5px; } .team-member a { color: inherit; } .team-member a:hover { text-decoration: none; text-shadow: 2px 2px #ccc; } .testimonials-section { padding: 80px 0 95px 0; font-size: 16px; } @media (max-width: 768px) { .xs-padding { padding-left: 15%; padding-right: 15%; } } .testimonials-section h1 { text-transform: uppercase; font-size: 26px; font-weight: 600; } .testimonials-section .testimonial-box { margin-top: 30px; padding: 15px; background-color: #FAFAFA; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; } .testimonials-section .testimonial-box q { font-style: italic; } .testimonials-section .testimonial-box p { font-weight: 600; margin: 8px 0 5px 0; } .testimonial-box .client-info { margin-top: 20px; } .testimonial-box .client-name { margin-left: 20px; padding-top: 10px; } .testimonial-box .client-img { margin-right: 20px; } .client-img img { opacity: 0.7; border: 1px solid #d3d3d3; } /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ .sticky { display: block; } .hentry { margin: 0 0 1.5em; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-content, .entry-content, .entry-summary { margin: 1.5em 0 0; } .author.vcard img { border-radius: 10px; margin-right: 2px; } .entry-meta { padding-bottom: 12px; } .posted-on:before { padding-right: 3px; padding-left: 6px; font-family: 'fontawesome'; font-size: 18px; content: "\f274"; } .more-link { font-weight: 600; padding-top: 5px; } .more-link:after { padding-top: 1px; padding-left: 5px; font-family: 'fontawesome'; font-size: 18px; content: "\f0da"; clear: both; } .cat-links:before { padding-top: 1px; padding-right: 5px; padding-left: 2px; font-family: 'fontawesome'; font-size: 18px; content: "\f115"; clear: both; } .comments-link:before { padding-right: 5px; padding-left: 7px; font-family: 'fontawesome'; font-size: 18px; content: "\f27b"; } .edit-link:before { padding-top: 1px; padding-right: 3px; padding-left: 6px; font-family: 'fontawesome'; font-size: 18px; content: "\f040"; } .category-list { margin-top: 5px; } .category-list a { color: #333; font-size: 13px; } .entry-content { margin-top: 12px; } .continue-reading > a > i { padding-left: 5px; } .comment-author .avatar { border: 1px solid #ccc; border-radius: 5px; margin-bottom: -4px; } .comment-form textarea { margin-bottom: 7px; } .cats-and-tags { display: inline-block; } .entry-footer { margin: 0 0 12px 0; font-size: 14px; } .entry-footer ul { padding: 0; margin: 0; font-size: 13px; list-style-type: none; } .entry-footer li { display: inline-block; margin-right: 1em; } .entry-footer i { margin-right: 5px; } /*-------------------------------------------------------------- ## Asides --------------------------------------------------------------*/ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .bypostauthor { display: block; } .reply { margin-top: -7px; margin-left: 5px; } .reply:before { display: block; float: left; padding-right: 3px; font-family: 'fontawesome'; font-size: 18px; content: "\f045"; clear: both; } .comment-body { margin-top: 10px; } .comment-list { background: #f9f9f7; border: solid 1px #ccc; border-radius: 10px; padding: 25px; } .comment-metadata:before { padding-right: 3px; padding-left: 4px; font-family: 'fontawesome'; font-size: 14px; content: "\f274"; } .comment-metadata { font-size: 14px; padding-top: 5px; } .comment-form p label { display: block; } .comment-form textarea { width: 80%; } /*-------------------------------------------------------------- # Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */ .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Media --------------------------------------------------------------*/ .post-thumbnail img { margin-top: 7px; margin-left: 5px; } .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } .wp-caption .wp-caption-text { margin: 0; } .wp-caption-text { text-align: center; } ..wp-caption .wp-caption-text, .gallery-caption { padding: 0.5em 1em; font-size: 14px;; font-family: 'Open Sans', sans-serif; background: #f9f9f7; border: solid 1px #ccc; border-radius: 5px; } /*-------------------------------------------------------------- ## Galleries --------------------------------------------------------------*/ .gallery { margin: 0 -1.1666667% 1.75em; } .gallery-item { display: inline-block; max-width: 33.33%; padding: 0 1.1400652% 2.2801304%; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-1 .gallery-item { max-width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-icon img { margin: 0 auto; border: 2px solid #ccc; } .gallery-caption { color: #686868; display: block; font-size: 13px; font-style: italic; line-height: 1.6153846154; padding-top: 0.5384615385em; } .gallery-columns-6 .gallery-caption, .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; } /*-------------------------------------------------------------- # Woocommerce --------------------------------------------------------------*/ .woocommerce-shop { clear: both; padding-right: 20px; margin-bottom: 20px; } .woocommerce form .form-row-last, .woocommerce-page form .form-row-last { float: none; } /*-------------------------------------------------------------- # Easy Digital Dowloads --------------------------------------------------------------*/ .edd_download_buy_button { margin-top: 10px; } .edd_download_purchase_form { margin-top: 10px; } .panel-grid { padding-top: 7px; margin-bottom: 10px; } #edd_checkout_wrap { padding-top: 10px; } .edd-no-purchases { padding-top: 10px; } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .site-footer { padding: 0; color: #fff; font-weight: 300; font-size: 14px; } .site-footer a { color: #fff; } .site-footer .widget { margin-left: 7%; } .site-footer .widget-title { padding-top: 15px; padding-bottom: 4px; font-size: 18px; border-bottom: 1px solid #fff; width: 200px; } .footer-widgets { background: #3E3E3E; padding: 10px 0 20px 5%; } .footer-widgets .fa { font-size: 13px; padding-right: 4px; } .footer-widgets .footer-lrc { margin-left: 7%; } .footer-lrc h2 { padding-top: 15px; padding-bottom: 4px; font-size: 18px; border-bottom: 1px solid #fff; width: 200px; } .footer-lrc p { margin: 4px 0; } .footer-lrc ul, .footer-lrc ol { padding: 0; margin-left: 0.8em; list-style-type: none; } .footer-lrc li li { margin-left: .5em; } .footer-lrc li:before { padding-right: 7px; font-family: 'fontawesome'; font-size: 16px; content: "\f0da"; color: #777; clear: both; } .site-info { padding: 20px 0; text-align: center; clear: both; background-color: #303030; }