/*! Theme Name: Blog Bogo Theme URI: https://themeobject.com/theme/blog-bogo/ Author: Theme Object Author URI: https://themeobject.com/ Description: Blog BOGO is a free responsive and trendy fashion WordPress theme for bloggers. It is ideal for lifestyle, fashion or any kind of personal bloggers and website owners to expose their creative idea. Fashion blogs are not just about visual attractiveness, but also functional as well. Therefore, blog-bogo provides both beautiful design and functionality. blog-bogo allows you to craft professional, top-notch blogging sites in the blink of an eye. It comes with features that are exceptional and engaging. If you are a blogger, then it’s a perfect choice for you if you don’t need to have any experiment to set up your WordPress personal blog. It’s super simple and easy to set up and you will get the high quality, responsive, well crafted blog out of the box to make writers only focus on writing content. Version: 1.0.0 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html Text Domain: blog-bogo Tags: one-column, two-columns, right-sidebar, flexible-header, custom-background, custom-header, custom-logo, custom-menu, editor-style, featured-images, featured-image-header, footer-widgets, microformats, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, photography, 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. blog bogo is based on Underscores https://underscores.me/, (C) 2012-2017 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 https://necolas.github.io/normalize.css/ */ /* ---------------------------------------------------------------- ==> Table Of Content 01 Basics 02 Buttons 03 Header 04 Banner 05 About 06 Service 07 Works 08 Counter 09 Resume 10 Cta 11 Testimonial 12 Blog 13 Contact 14 Footer 15 Top-control ---------------------------------------------------------------- */ /* ---------------------------------------------------------------- [ 01 Start Basics ] -----------------------------------------------------------------*/ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; list-style: none; word-wrap: break-word; } body { font-family: 'Open Sans', sans-serif; font-size:14px; line-height: 1.8; font-weight: 500; letter-spacing: 0.5px; color: #000; overflow-x: hidden; } h1, h2, h3, h4, h5, h6{ font-family: 'El Messiri', sans-serif; color: #000; } img{ max-width: 100%; height: auto; } ul{ padding: 0; list-style: none; } p { margin: 0; } a{ -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } a:hover{ text-decoration: none; outline: none; } .text_white{ color: #fff; } .padding_0{ padding: 0; } .gray_bg{ background: #fafafa; } .dark_bg_1{ background: #000; } .dark_bg_2{ background: #0F1113; } .form-control::-webkit-input-placeholder { color: #666; opacity: 1; } .form-control:-ms-input-placeholder { color: #666; opacity: 1; } .form-control::-ms-input-placeholder { color: #666; opacity: 1; } .form-control::placeholder { color: #666; opacity: 1; } /* START PRELOADER DESIGN */ .preloader { background: #fff; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 99999; } .preloader.dark_preloader{ background: #000; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 99999; } .spinner { width: 50px; height: 50px; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; font-size: 10px; text-indent: -12345px; z-index: 10000; } .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #000; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .dark_preloader .double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; } .double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } /* END PRELOADER DESIGN */ /* Start Section-Padding */ .section_padding{ padding: 100px 0; } .pb_70{ padding-bottom: 70px; } /* End Section-Padding */ /* Start Section-Heading */ .section_heading { padding-bottom: 100px; padding-top: 0; position: relative; } .section_heading:after { position: absolute; content: ""; display: block; height: 30px; width: 3px; bottom: 70px; left: 50%; background-color: #000; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .dark_heading.section_heading:after { position: absolute; content: ""; background-color: #fff; } .section_heading h2 { font-size: 40px; font-weight: 600; color: #000; margin-top: 0; margin-bottom: 10px; } .dark_heading.section_heading h2 { color: #fff; } .section_heading p { margin: 0 auto; margin-bottom: 20px; max-width: 530px; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; width:100%; padding:8px ; font-weight:normal; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { border:1px solid #000; } /* End Section-Heading */ /* ---------------------------------------------------------------- [ End Basics ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ COOMON CSS ] -----------------------------------------------------------------*/ .alignleft{ float:left; margin-right:20px; } .alignright{ float:right; margin-left:20px; } .aligncenter{ display:block; text-align:center; } img,figure{ max-width:100%; height:auto; } .gallery { margin-bottom: 1.5em; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; margin: 0; padding: 5px 10px; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .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%; } figure{ max-width:100%; height:auto; } .gallery-caption { display: block; } .bypostauthor { display: block; } .skip-link { max-width:200px; } /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .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; clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; right: 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. */ #main-content[tabindex="-1"]:focus { outline: 0; } .ow-navigation .nav.navbar-nav > li > a:hover,.ow-navigation .nav.navbar-nav > li > a:focus { color:#ddab03; } /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: inline-block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /* ---------------------------------------------------------------- [ 02 Start Buttons ] -----------------------------------------------------------------*/ /* Start Btn-Style */ .main_btn{ color: #fff; font-size: 14px; margin-top: 30px; text-transform: capitalize; padding: 23px 40px; letter-spacing: 0.6px; font-weight: 600; background: #000; line-height: 10px; border-radius: 30px; border: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out 0s; position: relative; } .dark_bg_btn{ color: #000; background: #fff; } .main_btn:focus, .main_btn:hover { color: #fff; background: #000; } .dark_bg_btn:focus, .dark_bg_btn:hover, .search-submit:focus, .search-submit:hover { color: #000; background: #fff; } .main_btn:before, .main_btn:after{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transition: all 0.5s ease 0s; } .main_btn:hover:before, .main_btn:focus:before{ background: rgba(255, 255, 255, 0.7); left: 60%; right: 60%; } .dark_bg_btn:hover:before{ background: rgba(0, 0, 0, 0.7); left: 60%; right: 60%; } .main_btn:hover:after, .main_btn:focus:after{ background: rgba(255, 255, 255, 0.7); top: 60%; bottom: 60%; } .dark_bg_btn:hover:after, .dark_bg_btn:focus:after{ background: rgba(0, 0, 0, 0.7); top: 60%; bottom: 60%; } .dark_bg_btn:focus{ background:rgba(0,0,0,0.5); } .about_btn .contact_number { background: transparent; border: 1px solid #000; padding: 18px 50px; margin-top: 29px; border-radius: 30px; position: absolute; right: 47%; } .about_btn .dark_cn { background: transparent; color: #fff; border: 1px solid #fff; } .about_btn .contact_number:focus{ background: transparent; border: 1px solid #000; box-shadow: none; } .about_btn .dark_cn:focus{ background: transparent; border: 1px solid #fff; box-shadow: none; } .blog_btn { padding: 20px 30px; } .search-form{ position:relative; } .search-form .search-submit{ position:absolute; } .search-submit{ padding:8px 12px; background:#000; color: #fff; border:none; border:1px solid #000; } /* ---------------------------------------------------------------- [ End Buttons ] -----------------------------------------------------------------*/ #content{ padding:70px 0px; } /* ---------------------------------------------------------------- [ 03 Start Header ] -----------------------------------------------------------------*/ .navbar.navbar-default { background:url(assets/header.jpg) no-repeat center center; background-size:cover; border-bottom:2px solid #CCC; } #header{ display:block; } h4.logo-heading{ margin:0px; padding:0px; } .navbar-default { border: none; border-radius: 0; margin-bottom: 0; width: 100%; background: #fff; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; text-align:center; } .navbar-header{ float:none; display:inline-block; margin:0px auto; padding:50px 0px; } .navbar-collapse.collapse{ background-color: #333; clear:both; text-align:center; padding:5px 0px; } .navbar-brand { padding: 0px } .navbar-nav.navbar-center{ float:none; display:block!important; text-align:center; } .navbar-nav.navbar-center > li{ float:none; display:inline-block; } .navbar-default .navbar-nav > li > a { color: #fff; font-size: 16px; font-weight: 500; padding: 15px 5px; text-transform: capitalize; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; position: relative; font-family: 'Roboto', sans-serif; letter-spacing:2px; text-transform:capitalize; } .navbar-default.dark_bg_menu .navbar-nav > li > a { olor:rgba(255,255,255,0.9); } .navbar-nav li a:before, .navbar-nav li a:after{ display: inline-block; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } .navbar-nav li a:before{ margin-right: 8px; content: '['; -webkit-transform: translate(20px); -moz-transform: translate(20px); transform: translate(20px); } .navbar-nav li a:after{ margin-left: 8px; content: ']'; -webkit-transform: translate(-20px); -moz-transform: translate(-20px); transform: translate(-20px); } .navbar-default .navbar-nav > li > a:hover:before, .navbar-default .navbar-nav > li > a:hover:after, .navbar-default .navbar-nav > li:hover > a:before, .navbar-default .navbar-nav > li:hover > a:after, .navbar-default .navbar-nav > li.active > a:after, .navbar-default .navbar-nav > li.active > a:before{ opacity: 1; -webkit-transform: translate(0px); -moz-transform: translate(0px); transform: translate(0px); } .navbar-default .navbar-nav > li > a:focus:before, .navbar-default .navbar-nav > li > a:focus:after{ opacity: 1; -webkit-transform: translate(0px); -moz-transform: translate(0px); transform: translate(0px); } .navbar-default .navbar-nav > .active >a, .navbar-default .navbar-nav > .active >a:hover, .navbar-default .navbar-nav > .active >a:focus{ color:rgba(255,255,255,0.9); background: none; } .navbar-default.dark_bg_menu .navbar-nav > .active > a, .navbar-default.dark_bg_menu .navbar-nav > .active > a:hover, .navbar-default.dark_bg_menu .navbar-nav > .active > a:focus{ color: #fff; background: none; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color:rgba(255,255,255,0.5); background-color: transparent; } .navbar-default.dark_bg_menu .navbar-nav > li > a:hover, .navbar-default.dark_bg_menu .navbar-nav > li > a:focus { color: #fff; background-color: transparent; } .navbar-default li{ position:relative; } .navbar-default ul.sub-menu{ position:absolute; position: absolute; top: 56px; z-index: -1; opacity: 0; visibility: hidden; width: 230px; text-align: left; border-radius: 3px; background:#CCC; -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out 0s; } .navbar-default ul.sub-menu ul{ left:100%; top:0px; } .navbar-default li:hover > ul.sub-menu, .navbar-default li:focus > ul.sub-menu, .navbar-default li:focus-within > ul.sub-menu{ z-index: 1; opacity: 1; visibility:visible; } .navbar-default ul.sub-menu a{ font-size: 15px; font-weight: 400; line-height: 2; position: relative; margin: 0; padding:10px 12px; text-transform: none; border-bottom: none; display:block; border-bottom:1px solid rgba(255,255,255,0.2); font-size: 14px; font-weight: 500; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; position: relative; text-transform:capitalize; color:rgba(0,0,0,0.4); } .navbar-default ul.sub-menu a:hover{ color:#000; } .menu-top { background: rgba(0, 0, 0, 0) none repeat scroll 0 0 } .navbar-default.sticky_menu { background-color: #fff; box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1); width: 100%; animation: fadeInDown 1s both 0.2s; } .navbar-default.dark_bg_menu.sticky_menu { background-color: #000; box-shadow: 0 1px 20px rgba(255, 255, 255, 0.1); width: 100%; animation: fadeInDown 1s both 0.2s; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background: transparent; background:#DBDBDB; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border: none; } .navbar-default .navbar-toggle .icon-bar { background-color: #000; } .navbar-default.dark_bg_menu .navbar-toggle .icon-bar { background-color: #fff; } .nav-dropdown{ display:none; } @media (max-width: 767px) { .navbar-default{ max-width:100%; display:block; overflow:hidden; } .navbar-toggle{ position:absolute; right:0px; } .navbar-collapse.collapse{ max-width:100%; width:100%; overflow:hidden; margin-top:0px; text-align:left!important; padding:0px; } .navbar-nav.navbar-center{ text-align:left; } .navbar-nav.navbar-center > li{ display:block; border-bottom:1px solid rgba(255, 255, 255, 0.1); } .navbar-nav.navbar-center > li:last-child{ border:none;} .navbar-nav{ margin:0px; } .nav-dropdown{ position:absolute; display:block; right:0px; top:0px; bottom:0px; padding:10px 15px; text-align:center; border-left:1px solid rgba(255, 255, 255, 0.1); line-height:30px; color:#FFF; cursor:pointer; } .navbar-default ul.sub-menu{ z-index: 1; opacity: 1; visibility:visible; position:static; background:none; display:none; width:100%; padding-right: 36px; } .navbar-default ul.sub-menu a{ border:none; color:#FFF; } .navbar-default ul.sub-menu.show{ display:block; } .navbar-nav.navbar-center ul.sub-menu > li{ border:none;} } /* ---------------------------------------------------------------- [ End Header ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 04 Start Banner ] -----------------------------------------------------------------*/ .main_banner{ height: 700px; background-size: cover; background-repeat: no-repeat; } .banner_bg{ background-image: url(../images/banner.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; } .banner_bg:before{ content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(255,255,255, 0.7); } .banner_bg_2{ background-image: url(../images/banner2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; } .banner_bg_2:before{ content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.5); } .parallax_bg{ background-attachment: fixed; } #particles-js { position: absolute; width: 100%; height: 100%; top: 0; } .display_table{ display: table; width: 100%; height: 100%; } .display_table_cell{ display: table-cell; vertical-align: middle; } .banner_content .sm_title { color: #000; font-size: 22px; font-weight: 600; } .banner_bg_2 .sm_title { color: #fff; } .banner_content h1 { color: #000; font-size: 52px; margin: 0 0 5px; } .banner_bg_2 .banner_content h1 { color: #fff; } .banner_content h1 span .fw_300{ font-weight: 300; } .banner_content h1 span .fw_800{ font-weight: 800; } .banner_content .sub_title{ } .banner_content .sub_title span { position: relative; font-weight: 400; color: #666; text-transform: uppercase; font-size: 14px; margin: 0 10px; } .banner_bg_2 .banner_content .sub_title span { position: relative; font-weight: 400; color: #fff; } .banner_content .sub_title span:after { position: absolute; content: ""; top: 10px; bottom: 0; right: -12px; width: 4px; height: 4px; background: #666; border-radius: 50%; } .banner_content .sub_title span:last-child:after { display: none; } .banner_social_link { margin-top: 12px; } .banner_social_link li { display: inline-block; margin: 0 5px; } .banner_social_link a { position: relative; display: block; width: 45px; color: #000; font-size: 22px; line-height: 45px; border-radius: 50%; text-decoration: none; transition: 0.3s; z-index: 0; } .banner_bg_2 .banner_social_link a { color: #fff; } .banner_social_link a:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; border-radius: 50%; -webkit-transform: scale(0); transform: scale(0); transition: 0.3s; z-index: -1; } .banner_bg_2 .banner_social_link a:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; } .banner_social_link a:hover:before { -webkit-transform: scale(1); transform: scale(1); } .banner_social_link a:hover{ color: #fff; } .banner_bg_2 .banner_social_link a:hover{ color: #000; } /* Start Scroll-mouse */ #home .mouse { position: absolute; width: 22px; height: 42px; bottom: 100px; left: 50%; margin-left: -12px; border-radius: 15px; animation: finger 1s infinite 0s; } .mouse i { font-size: 30px; color: #000; } .banner_bg_2 .mouse i { font-size: 30px; color: #fff; } @keyframes intro{ 0%{ opacity: 0; transform: translateY(40px); } 100%{ opacity: 1; transform: translateY(0); } } @keyframes finger{ 0%{ opacity: 1; } 100%{ opacity: 0; transform: translateY(20px); } } /* ---------------------------------------------------------------- [ End Banner ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 05 Start About ] -----------------------------------------------------------------*/ .about_content_area h5{ font-size: 18px; margin-top: 0; font-weight: 500; } .dark_bg_1 .about_content_area h5{ color: #fff; } .about_content_area h3{ font-size: 30px; font-weight: 600; margin: 15px 0; } .dark_bg_1 .about_content_area h3{ color: #fff; } .about_me { margin-top: 30px; } .about_me .email a{ color: #666; } .about_me div { margin-bottom: 20px; } .about_me span { display: inline-block; position: relative; font-size: 15px; font-weight: 600; color: #000; width: 150px; margin-right: 30px; } .dark_bg_1 .about_me span { color: #fff; } .about_me span:after { content: ":"; position: absolute; right: 0; } .about_btn .contact_btn{ position: relative; } /* ---------------------------------------------------------------- [ End About ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 12 Start Blog ] -----------------------------------------------------------------*/ .single_blog{ margin-bottom:50px; } .blog-thumb small { color: #000; font-weight: 600; display: block; } .dark_bg_1 .blog-thumb small { color: #fff; } .blog-thumb small .fa { margin-right: 5px; } .blog-thumb small, .blog-thumb small + span { display: inline-block; vertical-align: middle; } .blog-thumb small + span{ color: #666; font-size: 10px; font-weight: bold; text-transform: capitalize; margin-left: 2px; } .blog-info .entry-title{ padding: 8px 0 12px; font-size: 26px; margin: 0; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; font-family: 'El Messiri', sans-serif; padding-bottom:25px; } .dark_bg_1 .blog-info a h4{ color: #fff; } .blog-info .entry-title a{ color: #000; } .blog-info .entry-title a:hover, .blog-info .entry-title a:focus{ color:#CCC; } .blog-info, .navigation.post-navigation, .comments-area, .navigation.posts-navigation{ padding: 30px; background: #fff; box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1); text-align: center; } .blog-info.text-left { text-align:left; } .dark_bg_1 .blog-info { background: #000; box-shadow: 0 1px 30px rgba(255, 255, 255, 0.2); } .blog-info .posted-on .space_wrap{ font-size:14px; margin:0px 10px; } .blog-info .posted-on a:hover{ color:#000 } .blog-info .posted-on .space_wrap i{ margin-right:10px; } .blog-image{ position:relative; } .blog-image time{ position:absolute; top:20px; right:20px; padding:10px 15px; background:rgba(0,0,0,0.5); color:#FFF; font-size:28px; text-align:center; line-height:1; font-weight:bold; text-transform:uppercase; -webkit-border-radius:4px; border-radius:4px; } .blog-image time span{ display:block; padding:5px 0px; border-top:1px solid #fff; font-size:14px; margin-top:5px; } .single_post_content .entry-summary{ text-align:left; } .entry-summary p{ margin-bottom:25px; } .navigation.post-navigation, .navigation.posts-navigation{ padding:10px } .navigation.post-navigation .nav-links, .navigation.posts-navigation .nav-links{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .navigation.post-navigation .nav-previous, .navigation.post-navigation .nav-next, .navigation.posts-navigation .nav-links div{ width:50%; font-size:16px; } .navigation.post-navigation a, .navigation.posts-navigation .nav-links a{ color:#000; display:block; -webkit-border-radius:3px; padding:20px; } .navigation.post-navigation .nav-previous{ text-align:left; } .navigation.post-navigation .nav-next{ text-align:right; } .navigation.post-navigation a:hover, .navigation.posts-navigation .nav-links a:hover, .navigation.post-navigation a:focus, .navigation.posts-navigation .nav-links a:focus{ background:#E5E5E5; } .comments-area{ text-align:left; } .page-header{ margin-bottom:50px; } /* ---------------------------------------------------------------- [ End Blog ] -----------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } #reply-title, .comments-title { font-size: 22px; margin: 0; } .comments-title, #reply-title { margin-bottom: 30px; font-size: 32px; } ul.post-categories li:last-child:after { display: none; } ol.comment-list { padding: 0; margin: 0 0 30px; list-style: none; } #comments ol { list-style: none; margin-left: 0; padding: 0; } #comments ol.comment-list { padding-top: 35px; position: relative; overflow: hidden; } #comments ol.children { margin-left: 120px; } .says { display: none; } .comment-meta img { width: 85px; height: 85px; object-fit: cover; float: left; border-radius: 50%; margin-right: 20px; } #comments time:before { display: none; } .comment-body { position: relative; } .reply { padding-bottom: 49px; padding-left: 105px; } #comments article { margin-bottom: 30px; clear: both; } #comments ol.comment-list > li:last-child article:last-child, #comments ol.comment-list > li:last-child { border-bottom: none; } #comments ol.comment-list > li { padding-top: 49px; } #comments ol.comment-list > li:first-child { padding-top: 0; } #comments ol.comment-list > li article:last-child .reply { border-bottom: none; padding-bottom: 0; } .reply a { border-radius: 2px; color: #fff; display: inline-block; font-weight: 600; padding: 4px 18px; font-size: 14px; position: relative; border: 2px solid; background-color: #000; border-color: #000; color: #fff; z-index: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .reply a:hover, .reply a:focus { background-color:#DFDFDF; border-color: #DFDFDF; color: #000; } .reply a:hover:before, .reply a:focus:before { background-color: #0e5bd6; } .comment-meta .url, .comment-meta .fn { display: inline-block; text-transform: capitalize; color: #111; font-size: 16px; font-weight: 600; } .comment-meta .url:hover, .comment-meta .url:focus, .comment-metadata a, .comment-metadata a time { color: #0e5bd6; } .comment-metadata a, .comment-metadata time { font-size: 14px; } .comment-metadata a:hover, .comment-metadata a:focus, .comment-metadata a:hover time, .comment-metadata a:focus time { color: #111; } .comment-metadata time { font-weight: 500; } .comment-metadata { display: block; margin-top: 5px; } .comment-content { margin-bottom: 10px; margin-top: 0; padding-left: 105px; } .comment-content p { font-weight: 400; color: #565a5f; margin-bottom: 1em; } .comment-form p{ font-weight:normal; font-size:14px; padding-bottom:15px; position:relative; } .comment-form label{ position:absolute; font-weight:normal; width:90px; left:10px; top:8px; color:#CCC; } .comment-form input, .comment-form textarea{ padding-left:110px; } .comment-form .comment-form-cookies-consent input{ float:left; margin-right:10px; } .comment-form .comment-form-cookies-consent label{ width:calc( 100% - 50px ); position:static; float:left; color:#000; } /* ---------------------------------------------------------------- [ 13 Start Contact ] -----------------------------------------------------------------*/ .contact { overflow: hidden; padding: 0; } .input_padding { overflow: hidden; } .form-control { background: #fafafa; border: 1px solid #fafafa; border-radius: 5px; color: #666; box-shadow: none; font-size: 15px; height: 45px; } .dark_bg_2 .form-control { background: #fff; } .form-control:focus { border-color: #fafafa; box-shadow: none; outline: 0 none; } .dark_bg_2 .form-control:focus { border-color: #fff; } .form-group #submitButton{ width: 100%; } .contact_details { background: #fafafa; padding: 30px 0; border-radius: 10px; } .dark_bg_2 .contact_details { background: #fff; } .single_contact { padding-bottom: 30px; text-align: center; } .single_contact i { color: #000; font-size: 30px; } .single_contact h5{ color: #000; margin: 15px 0 0; font-size: 18px; } .mb0 { margin-bottom: 0; } .pb_0{ padding-bottom: 0; } /* ---------------------------------------------------------------- [ End Contact ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 14 Start Footer ] -----------------------------------------------------------------*/ .site-footer { padding: 30px 0; background:; text-align: center; color: #000; font-size:14px; border-top:1px solid rgba(0,0,0,0.1); } /* ---------------------------------------------------------------- [ End Footer ] -----------------------------------------------------------------*/ /* ---------------------------------------------------------------- [ 15 Start Top-control ] -----------------------------------------------------------------*/ .topcontrol { background: #000 none repeat scroll 0 0; border-radius: 0; bottom: 5px; margin-bottom: 50px; box-shadow: 0 1px 10px 0 rgba(255, 255, 255, 0.3); color: #fff; cursor: pointer; font-size: 30px; opacity: 1; line-height: 40px; filter: alpha(opacity=100); padding: 0 10px; border-radius: 5px; position: fixed; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; width: 40px; height: 40px; z-index: 99; } .topcontrol:hover { background: #fff; color: #000; } /* ---------------------------------------------------------------- [ End Top-control ] -----------------------------------------------------------------*/ /*=================================== ************ widget ********** =====================================*/ #secondary { display:block; padding-left:25px; font-size:14px; } #secondary .widget-title{ display:block; font-family: 'El Messiri', sans-serif; font-size:22px; text-transform:uppercase; font-weight:600; position:relative; font-size:22px; padding-left:26px; margin-bottom:15px; } #secondary .widget-title span{ position:absolute; font-size:18px; left:0px; top:0px; } #secondary .widget{ padding-bottom:30px; } #secondary .widget ul, ul.popular_category_list{ margin:0px; padding:0px; padding-left:26px; } #secondary a{ color:#6F6F6F; font-size:14px; } #secondary a:hover{ color:#000; } #secondary li{ list-style:none; display:block; padding-bottom:8px; } ul.blog-bogo-recent-posts{ margin:0px; padding:0px; } ul.blog-bogo-recent-posts li, #secondary ul.blog-bogo-recent-posts li{ vertical-align:top; list-style: none; display: block; border-bottom: solid 1px #eee; padding-top: 15px; padding-bottom: 15px; } #secondary ul.blog-bogo-recent-posts li:hover{ padding-left:0px; } ul.blog-bogo-recent-posts img{ max-width:60px; float:left; } ul.blog-bogo-recent-posts .recent-text{ width:calc( 100% - 80px ); float:right; } .blog_bogo_author{ display:block; } .widget .about-widget { text-align: center; } .about-widget .about-me-heading { color: #313131; font-size: 18px; font-family: 'PT Serif', serif; font-weight: bold; padding-bottom: 16px; line-height: 1.3; margin-bottom: 19px; position: relative; } .about-widget .about-me-heading::before { content: ""; display: inline-block; width: 60px; position: absolute; margin-left: -30px; left: 50%; bottom: 0; border-top: 1px solid #000; border-top-color: rgb(110, 180, 140); } .widget .about-widget ul.link-profile{ display:block; margin:0px; padding:30px 0px 10px 0px!important; } #secondary ul.link-profile li, .widget .about-widget ul.link-profile li{ display:inline-block; margin:3px; } #secondary ul.link-profile li a{ padding:8px 12px; background:rgba(0,0,0,0.5); color:#FFF; -webkit-border-radius:3px; border-radius:3px; } #secondary ul.link-profile li a:hover{ background:#000; }