/*
Theme Name: Blogan
Theme URI: https://rumblethemes.com/items/blogan/
Author: Rumble Themes
Author URI: https://www.rumblethemes.com
Description: This theme is very minimalist and suitable for personal website.
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: two-columns, custom-menu, editor-style, featured-images, post-formats, sticky-post, threaded-comments, translation-ready
Text Domain: blogan

Blogan Wordpress Theme, Copyright (C) 2016, Blogan
Blogan is distributed under the terms of the GNU GPL
*/

/**
 * Table of Contents
 *
 * 1.0 - Normalize
 * 2.0 - Typography
 * 3.0 - Elements
 * 4.0 - Forms
 * 5.0 - Navigation
 *      5.1 - Links
 *      5.2 - Menus
 * 6.0 - Accessibity
 * 7.0 - Alignments
 * 8.0 - Clearings
 * 9.0 - Widgets
 * 10.0 - Content
 *      10.1 - Posts and Pages
 *      10.2 - Comments
 * 11.0 - Media
 *      11.1 - Caption
 *      11.2 - Galleries
 * 12.0 - Main Content
 * 13.0 - Responsive
 */


/*------------------------------------------------------
    1.0 Normalize
--------------------------------------------------------*/
html {font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {margin: 0; }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {display: block; }
audio, canvas, progress, video {display: inline-block; vertical-align: baseline; }
audio:not([controls]) {display: none; height: 0; }
[hidden], template {display: none; }
a {background-color: transparent; }
abbr[title] {border-bottom: 1px dotted; }
b, strong {font-weight: 700; }
small {font-size: 80%; }
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup {top: -0.5em; }
sub {bottom: -0.25em; }
img {border: 0; }
svg:not(:root) {overflow: hidden; }
figure {margin: 0; }
hr {-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
code, kbd, pre, samp {font-size: 1em; }
button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0; }
select {text-transform: none; }
button {overflow: visible; }
button, input, select, textarea {max-width: 100%; }
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] {cursor: default; opacity: .5; }
button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0; }
input[type="checkbox"], input[type="radio"] {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: 0.4375em; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto; }
input[type="search"] {-webkit-appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; }
fieldset {border: 1px solid #d1d1d1; margin: 0 0 1.75em; min-width: inherit; padding: 0.875em; }
fieldset > :last-child {margin-bottom: 0; }
legend {border: 0; padding: 0; }
textarea {overflow: auto; vertical-align: top; }
optgroup {font-weight: bold; }
/*------------------------------------------------------
    2.0 Typography
--------------------------------------------------------*/
body, button, input, select, textarea {color: #58585B; font-family: 'Open Sans', sans-serif; font-size: 15px; line-height: 1.75; font-weight: 400;}
h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', sans-serif; font-weight: 700; margin: 0; text-rendering: optimizeLegibility; }
p {margin: 0 0 1.75em; }
dfn, cite, em, i {font-style: italic; }
blockquote {border: 0 solid #58585B; border-left-width: 4px; color: #686868; font-size: 16px; font-style: italic; line-height: 1.4736842105; margin: 0 0 1.4736842105em; padding: 0 0 0 1.263157895em; }
blockquote, q {quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {content: ""; }
blockquote p {margin-bottom: 1.4736842105em; }
blockquote cite, blockquote small {color: #58585B; display: block; font-size: 16px; line-height: 1.75; }
blockquote em, blockquote i, blockquote cite {font-style: normal; }
blockquote strong, blockquote b {font-weight: 400; }
blockquote > :last-child {margin-bottom: 0; }
address {font-style: italic; margin: 0 0 1.75em; }
code, kbd, tt, var, samp, pre {font-family: Inconsolata, monospace; }
pre {border: 1px solid #d1d1d1; font-size: 16px; font-size: 1rem; line-height: 1.3125; margin: 0 0 1.75em; max-width: 100%; overflow: auto; padding: 1.75em; white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
code {background-color: #d1d1d1; padding: 0.125em 0.25em; }
abbr, acronym {border-bottom: 1px dotted #d1d1d1; cursor: help; }
mark, ins {background: #007acc; color: #fff; padding: 0.125em 0.25em; text-decoration: none; }
big {font-size: 125%; }
/*------------------------------------------------------
    3.0 Elements
--------------------------------------------------------*/
html {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after {/* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
body {background: #F1F1F2; /* Fallback for when there is no custom background color defined. */}
hr {background-color: #d1d1d1; border: 0; height: 1px; margin: 0 0 1.75em; }
ul, ol {margin: 0 0 1.75em 1.25em; padding: 0; }
ul {list-style: disc; }
ol {list-style: decimal; margin-left: 1.5em; }
li > ul, li > ol {margin-bottom: 0; }
dl {margin: 0 0 1.75em; }
dt {font-weight: 700; }
dd {margin: 0 0 1.75em; }
img {vertical-align: middle; }
del {opacity: 0.8; }
table, th, td {border: 1px solid #d1d1d1; }
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: 700; }
td {border-width: 0 1px 1px 0; }
th, td {padding: 0.4375em; }
/* Placeholder text color -- selectors need to be separate to work. */
::-webkit-input-placeholder {color: #686868; font-family: "Open Sans", "Helvetica Neue", sans-serif; }
:-moz-placeholder {color: #686868; font-family: "Open Sans", "Helvetica Neue", sans-serif; }
::-moz-placeholder {color: #686868; font-family: "Open Sans", "Helvetica Neue", sans-serif; opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ }
:-ms-input-placeholder {color: #686868; font-family: "Open Sans", "Helvetica Neue", sans-serif; } 
/*------------------------------------------------------
    4.0 Form
--------------------------------------------------------*/
button,button.navbar-toggle, input[type="button"], input[type="reset"], input[type="submit"] { border: 0px;  font-size: 12px; line-height: 1; padding: .6em 1em .6em; border-radius: 5px; }
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { box-shadow: none; }
button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { box-shadow: none; border-radius: 5px; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea, textarea.form-control { border-radius: 5px; color: #666; border: 0px; background-color: #F1F1F2; }
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus, textarea.form-control:focus { box-shadow: none; border: 0px; color: #111; }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"] { padding: 5px; }
textarea { padding-left: 3px; width: 100%; }
/*------------------------------------------------------
    5.0 Navigation
--------------------------------------------------------*/
/*------------------------------------------------------
    5.1 Links
--------------------------------------------------------*/
a { color: #58585B; text-decoration: none; -webkit-transition: color 0.25s ease-in; -moz-transition: color 0.25s ease-in; -ms-transition: color 0.25s ease-in; -o-transition: color 0.25s ease-in; transition: color 0.25s ease-in; }
a:hover, a:focus, a:active { color: #00ADEF; outline: 0; text-decoration: none;}
/*------------------------------------------------------
    5.2 Menus
--------------------------------------------------------*/
.navbar{border: 0 none; transition: all 0.4s; -webkit-transition: all 0.4s; font-size: 14px; }
.navbar-default {background-color: transparent; }
.navbar-brand {padding: 5px 15px; }
.navbar-nav > li {margin-top: 15px; margin-bottom: 15px; }
.navbar-nav > li > a{border-right: 1px solid rgba(0, 0, 0, 0.3); padding: 0 15px; }
.navbar-nav > li:last-child > a {border-right: 0px; }
.navbar-nav > li > a:hover, .navbar-nav li > a:focus {background-color: transparent; }
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {background-color: transparent; border-color: rgba(0, 0, 0, 0.3); }
.navbar-nav > li > .dropdown-menu, .dropup .dropdown-menu {border: 0px; border-radius: 3px; }
.navbar-nav > li > .dropdown-menu { margin-top: 10px; }
.search-bar input {background-color: #FFFFFF; border-radius: 3px; box-shadow: none; }
.navbar-default .navbar-toggle .icon-bar { color: #F1F1F2; }
/* Breadcrumb */
.breadcrumb {margin-left: 0px; padding: 0px; background-color: transparent; border-radius: 0px; }
.breadcrumb li, .breadcrumb li a {font-size: 14px; font-weight: 400;}
.breadcrumb > li + li:before { font-family: 'FontAwesome'; content:'\f105'; margin: 0 7px;}
/* Pagination */
.pagination li a, .pagination li span {color: #00ADEF; border:0px;}
.pagination, .pagination li:first-child a, .pagination li:first-child span, .pagination li:last-child a, .pagination li:last-child span{font-size: 14px; }
.pagination .active a, .pagination .active a:focus, .pagination .active a:hover, .pagination .active span, .pagination .active span:focus, .pagination .active span:hover {background-color: #00ADEF;border-color: #00ADEF;}

/*------------------------------------------------------
    6.0 Accessibility
--------------------------------------------------------*/
.screen-reader-text {clip: rect(1px, 1px, 1px, 1px); position: absolute; 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; 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. */ }
/*------------------------------------------------------
    7.0 Alignments
--------------------------------------------------------*/
.alignleft {float: left; margin: 0.375em 1.75em 1.75em 0; }
.alignright {float: right; margin: 0.375em 0 1.75em 1.75em; }
.aligncenter {clear: both; display: block; margin: 0 auto 1.75em; }
blockquote.alignleft {margin: 0.3157894737em 1.4736842105em 1.473684211em 0; }
blockquote.alignright {margin: 0.3157894737em 0 1.473684211em 1.4736842105em; }
blockquote.aligncenter {margin-bottom: 1.473684211em; }
/*------------------------------------------------------
    8.0 Clearings
--------------------------------------------------------*/
.clear:before, .clear:after, blockquote:before, blockquote:after {content: ""; display: table; }
.clear:after, blockquote:after {clear: both; } 
/*------------------------------------------------------
    9.0 Widgets
--------------------------------------------------------*/
.widget .meta-card span{font-size: 12px; font-weight: normal; margin-right: 5px;}
aside.widget {margin-bottom: 1.5em; }
aside.widget ul { color: #00ADEF; }
.widget-title span { color: #444; font-size: 22px; }
.widget-area :last-child, .widget :last-child {margin-bottom: 20px; }
aside.widget .title h3.widget-title:empty {margin-bottom: 0; font-size: 16px; font-size: 1rem; letter-spacing: 0.046875em; line-height: 1.3125; margin: 0 0 1.75em;}
#wp-calendar {width: 100%; max-width: 37.5rem; margin-left: auto; margin-right: auto; }
#wp-calendar caption {color: #333; padding: 1rem; text-align: center; font-weight: 700; }
#wp-calendar thead th {font-size: 80%; font-weight: bold; padding: 0.25rem; text-transform: uppercase; text-align: center; }
#wp-calendar tbody td {background: #f5f5f5; text-align: center; position: relative; padding: 0.5rem; }
#wp-calendar tbody td:hover {background: #fff; }
#wp-calendar tbody .pad {background: none; }
#wp-calendar tfoot #next {font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev {font-size: 10px; text-transform: uppercase; padding-top: 10px; }
.widget .tagcloud a { background-color: #00ADEF; padding: 3px 5px; border-radius: 2px; color: #FFFFFF; }

/*------------------------------------------------------
    10.0 Content
--------------------------------------------------------*/
/*------------------------------------------------------
    10.1 Post and Page
--------------------------------------------------------*/
.sticky { display: block }
.blog-post-card {margin-bottom: 40px; }
.blog-post{background-color: #FFFFFF; border-radius: 5px; padding: 5px;}
.blog-post h2 {margin-bottom: 10px; }
.blog-post h2 a {font-size: 24px; }
.blog-post .post-media {position: relative; overflow: hidden; z-index:1;}
.blog-post .post-media a img {width: 100%; height: auto; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
.blog-post .post-media:hover a img {-moz-transform: scale(1.2) rotate(-5deg); -webkit-transform: scale(1.2) rotate(-5deg); transform: scale(1.2) rotate(-5deg); }
.blog-post .content {padding: 20px; color: #58585B; font-size: 14px; line-height: 1.4; }
.blog-post .content .readmore {margin-left: 10px; }
.blog-post .content .readmore img {background-color: #A2A2A2; width: 25px; height: auto; padding: 5px; border-radius: 25px; -moz-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; }
.blog-post .content .readmore img:hover {background-color: #00ADEF; }
.blog-post .content .action {display: flex; font-size: 14px; margin-top: 50px; }
.blog-single .blog-post { padding: 20px; }
.blog-single .blog-post header { margin-bottom: 20px; }
.blog-single .blog-post header > h1 { margin: 0px; line-height: 1.1;}
.blog-single .blog-post h1 {font-size: 28px; line-height: 1.25; margin-top: 2em; margin-bottom: 1em; }
.blog-single .blog-post h2 {font-size: 23px; line-height: 1.2173913043; margin-top: 2.4347826087em; margin-bottom: 1.2173913043em; }
.blog-single .blog-post h3 {font-size: 19px;  line-height: 1.1052631579; margin-top: 2.9473684211em; margin-bottom: 1.4736842105em; }
.blog-single .blog-post h4, .blog-single .blog-post h5, .blog-single .blog-post h6 {font-size: 16px; line-height: 1.3125; margin-top: 3.5em; margin-bottom: 1.75em; }
.blog-single .blog-post h4 {letter-spacing: 0.140625em; text-transform: uppercase; }
.blog-single .blog-post h6 {font-style: italic; }
.blog-single .blog-post h1:first-child, .blog-single .blog-post h2:first-child, .blog-single .blog-post h3:first-child, .blog-single .blog-post h4:first-child, .blog-single .blog-post h5:first-child, .blog-single .blog-post h6:first-child {margin-top: 0; }


.blog-post .content .action .meta-day {position: relative; padding-right: 8px; margin-right: 8px; }
.blog-post .content .action .meta-day .meta-separator {position: absolute; right: 0; top: 20%; border-right: 1px solid rgba(0, 0, 0, 0.3); width: 1px; height: 12px; }
.post-meta {padding: 30px 0; }
.show-meta {margin:0px; list-style: none; text-align: right; }
.show-meta li {padding: 8px 0; line-height: 1.4; font-size: 14px; }
.show-meta li label {display: block; margin-bottom: 0px; color: #58585B; }
.show-meta li .post_tags .tag, .show-meta li .p-category a {padding-left: 10px; }
.show-meta .format {background-color: #D1D2D4; padding: 8px; border-radius: 5px; }
/*------------------------------------------------------
    10.2 Comments
--------------------------------------------------------*/
.comment-row h3{ font-size: 18px; margin: 20px 0; padding: 20px 0; border-bottom:1px solid #ededed; }
.comment-row .commentlist{ padding: 0px; list-style: none; margin:0px; }
.comment-row ul { list-style: none; }
.comment-row .comment-body{ margin-bottom: 25px; position: relative; border-bottom: 1px solid #ededed; padding-bottom: 15px;}
.comment-meta a { font-size: 13px; font-weight: 700;}
.bypostauthor > .comment-body .comment-author .avatar { border: 2px solid #00ADEF; }
.comment-body .comment-author .avatar {float: left; margin-right: 20px; border-radius: 50%;}
.comment-body .comment-author .title { display: flex; align-items: center; justify-content: space-between; }
.comment-body .comment-author cite.fn, 
.comment-body .comment-author cite.fn a{ font-size: 16px; font-style: normal; font-weight: 700; text-transform: capitalize;} 
.comment-body .comment-author .says { display: none;}
.comment-body p{ font-size: 14px; }
.comment-reply-title { position: relative; }
.comment-reply-title #cancel-comment-reply-link { position: absolute; right: 10px; top: 20px; color: red; }
.comment-reply .cancel-comment-reply{ padding-left: 20px; font-size: 16px; }
.comment-reply #commentform{padding-bottom: 20px; }
.comment-reply #commentform p{font-size: 15px; }
.comment-action { display: flex; align-items: center; right: 0; top: 0; position: absolute;}
.comment-reply-link, .comment-edit-link { font-size: 14px; color: #757575; }
.comment-edit-link:after { content: '/'; padding: 0 7px;}
.commend-respond { padding: 15px; }
.form-submit input[type=submit]#comment-submit {background-color: #00ADEF; font-size: 16px; color: #fff; }
/*------------------------------------------------------
    11.0 Media
--------------------------------------------------------*/
.blog-single .blog-post .wp-smiley, .entry-summary .wp-smiley, .comment-content .wp-smiley, .textwidget .wp-smiley {border: none; margin-top: 0; margin-bottom: 0; padding: 0; }
.entry-attachment {margin-top: 20px;}
.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {max-width: 100%; height: auto; }
/*------------------------------------------------------
    11.1 Caption
--------------------------------------------------------*/
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }
/*--------------------------------------------------------------
    11.2 Galleries
--------------------------------------------------------------*/
.gallery { margin-bottom: 1.5em }
.gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; }
.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% }
.gallery-caption { display: block }
/*----------------------------------------------------------
    12.0 Main Content
----------------------------------------------------------*/
.footer-credit { padding: 20px 0; margin-top: 50px; font-size: 14px;}
.footer-credit a { font-weight: 700; }
.footer-credit .credit { text-align: right; }
/* Aboutme Widget */
.blogan-aboutme-widget .about-w .about-author-pp img {border-radius: 5px; }
.blogan-aboutme-widget .about-w .about-data > .about-name{color: #00ADEF; margin-bottom: 10px; }
.blogan-aboutme-widget .about-w .about-social > ul {list-style: none; }
.blogan-aboutme-widget .about-w .about-social > ul li {float: left; margin: 0 5px; }
.blogan-aboutme-widget .about-w .about-social > ul li:first-child {margin-left: 0px; }
.blogan-aboutme-widget .about-w .about-social > ul li img {width: 30px; height: auto; }
/*----------------------------------------------------------
    13.0 Responsive
----------------------------------------------------------*/
@media screen and ( min-width: 767px ) {
    .open > .dropdown-menu {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);  
      
    }
    .dropdown-menu {
      -webkit-transform-origin: top;
      transform-origin: top;
      -webkit-animation-fill-mode: forwards;  
      animation-fill-mode: forwards; 
      -webkit-transform: scale(1, 0);
      transform: scale(1, 0);
      display: block;
      
      transition: all 0.2s ease-out;
      -webkit-transition: all 0.2s ease-out;
    }
    .dropup .dropdown-menu {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;  
    }
}