/*
Theme Name: Aflatoon
Theme URI: https://itnicks.com/themes/aflatoon/
Author: itNicks
Author URI: https://itnicks.com/
Description: Clean, simple and elegant, Sarall is WordPress Theme suitable for any kind of blog, personal, travel, fashion, food, photography, publishing or tutorial blog sites. Using Sarall Theme Options you can customize your blog the way you want very easy!
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sarall
Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

/**
 * Typography
 */
a { color: #0080ff; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
input[type="button"], input[type="reset"], input[type="submit"], button { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
.clearfix::after { content: ""; clear: both; display: table; }
body { font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 300; color: #333; text-shadow: none; }
h1 { font-size: 2rem; }
h2, h3 { font-size: 1.5rem; }
h4, h5, h6 { font-size: 1rem; }
hr { border: 0 none; background: #ccc; height: 1px; }
table tr { border-top: 1px #ddd solid; }
table thead tr { border-top: 0 none; }
table caption { border-bottom: 1px #ddd solid; font-weight: bold; }
table td, table th { padding: 8px; text-align: left; }
table caption { padding: 8px; }
table th { font-weight: 400; }
blockquote { padding: 20px; font-family: "Raleway"; font-size: 1.125rem; font-weight: 300; background-color: #eee; }

/**
 * Icons CSS
 */
.icon { display: inline-block; fill: currentColor; height: 24px; position: relative; top: -0.0625em; vertical-align: middle; width: 24px; }

/**
 * Form Elements
 */
input, textarea, button, select { border: 0 none; border-bottom: 1px solid; padding: 10px 15px; font-size: 1rem; font-family: "Raleway"; }
input[type="button"], input[type="submit"], input[type="reset"], button { border: 1px solid; border-radius: 24px; background: none; cursor: pointer; }
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, button:hover { background-color: #333; color: #fff; }
input[type="file"] { font-size: 0.875rem; background-color: #f5f5f5; border: 0 none; border-radius: 24px; }
textarea { background-color: #f5f5f5; }

/**
 * Search form
 */
.search-submit .screen-reader-text { display: none; }

/**
 * Wordpress core classes
 */
.wp-caption { max-width: 100%; text-align: center; }
.wp-caption-text, .gallery-caption { font-size: 0.688rem; padding: 0 5px; text-align: center; }

.gallery-item { display: inline-block; vertical-align: top; margin: 10px; text-align: center; }
.gallery-columns-1 .gallery-item { width: calc(99% - 20px); }
.gallery-columns-2 .gallery-item { width: calc(49% - 20px); }
.gallery-columns-3 .gallery-item { width: calc(32% - 20px); }
.gallery-columns-4 .gallery-item { width: calc(24% - 20px); }
.gallery-columns-5 .gallery-item { width: calc(19% - 20px); }
.gallery-columns-6 .gallery-item { width: calc(16% - 20px); }
.gallery-columns-7 .gallery-item { width: calc(14% - 20px); }
.gallery-columns-8 .gallery-item { width: calc(12% - 20px); }
.gallery-columns-9 .gallery-item { width: calc(11% - 20px); }

.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float:right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.bypostauthor {}

/**
 * Layout
 */
#page-wrap { padding: 40px; background-color: #fff; }
#secondary.widget-area { float: left; width: calc(25% - 40px); margin-left: 40px; }
.with-sidebar .site-main { float: left; width: 75%; }
.with-sidebar .main-404 { float: none; width: 100%; }
#site-content { overflow: hidden; }
#site-content:after { content: ""; clear: both; display: table; }

/**
 * Header
 */
.site-header { display: flex; align-items: center; margin-bottom: 40px; }
.site-logo { margin-right: 20px; }
.site-logo img { max-width: 72px; }
.site-title { font-family: "Anton"; font-weight: normal; text-transform: uppercase; font-size: 2rem; line-height: 1.5; }
.site-title a { color: #000; }
.site-description { font-size: 0.875rem; color: #666; line-height: 1.5; }
.site-header .site-nav { margin-left: auto; }

/**
 * Dropdown Nav
 */
.top-menu, .top-menu ul { list-style: none; margin: 0; padding: 0; }
.top-menu li { position: relative; float: left; }
.top-menu li li { float: none; }
.top-menu ul { position: absolute; width: 200px; opacity: 0; visibility: hidden; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; z-index: 999; }
.top-menu ul ul { left: 100%; top: 0; }
.top-menu li:hover > ul { opacity: 1; visibility: visible; }
.top-menu li a { display: block; padding: 18px; text-transform: uppercase; color: #333; font-weight: 300; line-height: 1.5; }
.top-menu li a:hover { color: #0080ff; }
.top-menu li li { background-color: #333; }
.top-menu li li a { color: #999; font-size: 0.813rem; }
.top-menu li li a:hover { color: #fff; }
.top-menu > li.current-menu-item > a { color: #0080ff; }

/**
 * Responsive menu
 */
#responsive-nav-container { margin-bottom: 30px; display: none; }
.responsive-btn-container { text-align: center; }
.responsive-btn-container a { color: #333; display: inline-block; padding: 8px 0; }
.responsive-menu, .responsive-menu ul { list-style: none; margin: 0; padding: 0; }
.responsive-menu li { text-align: center; border-top: 1px #bbb dashed; }
.responsive-menu li a { display: inline-block; padding: 8px 0; text-transform: uppercase; font-size: 0.813rem; color: #333; font-weight: 400; line-height: 1.5; }
.responsive-menu li a:hover { color: #0080ff; }
.responsive-menu > li.current-menu-item > a { color: #0080ff; }
.responsive-menu ul { display: none; }
.nav-child-ind { width: 16px; height: 16px; cursor: pointer; margin-left: 10px; color: #666; }
.site-nav-responsive-menu, #nav-close-btn { display: none; }


/**
 * Post content
 */
article.post, article.page { line-height: 1.5; margin-bottom: 40px; }
.sticky {}
.post-thumbnail { margin-bottom: 20px; }
.post-thumbnail img { width: 100%; }
.entry-header { text-align: center; margin-bottom: 30px; }
.entry-title, .entry-title a { color: #000; }
.entry-title { text-transform: uppercase; font-size: 2rem; }
.entry-meta { font-size: 0.75rem; text-transform: uppercase; margin-top: 10px; color: #666; font-weight: 400; }
.entry-meta a { color: #666; border-bottom: 1px #999 dotted; }
.entry-date.updated { display: none; }
.entry-meta .entry-comment-link:before, .entry-meta .cat-links:before { content: '-'; padding-right: 2px; margin: 0 10px; }
.entry-meta .cat-links .screen-reader-text { display: none; }
.entry-content { line-height: 1.7; }
.entry-content > * { margin-bottom: 15px; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content > *:last-child:after { content: ""; clear: both; display: table; }
.entry-content ul, .entry-content ol { list-style-position: inside; margin-left: 1.5em; }
.entry-content ul { list-style: circle; }
.entry-content ol { list-style: decimal; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { font-family: "Raleway"; font-weight: 300; }
.main-404 .entry-content, .not-found .entry-content { text-align: center; }

.more-link { display: inline-block; font-size: 0.75rem; text-transform: uppercase; padding: 7px 15px; border: 1px #333 solid; color: #333; border-radius: 24px; }
.more-link:hover { background-color: #333; color: #fff; }

.page-links { margin-top: 30px; }
.page-links:before { content: ""; clear: both; display: table; }
.page-links .page-number { display: inline-block; padding: 6px 10px; line-height: 1; margin-right: 5px; background-color: #333; color: #fff; border: 1px #333 solid; border-radius: 50%; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
.page-links a .page-number { background: none; color: #333; }
.page-links a:hover .page-number { background-color: #333; color: #fff; }

.entry-footer { margin-top: 30px; }

/**
 * Navigation/Pagination
 */
.navigation.pagination { line-height: 1.5; margin-bottom: 30px; padding-top: 30px; }
.navigation.pagination h2.screen-reader-text { display: none; }
.navigation.pagination .page-numbers { display: inline-block; font-size: 0.75rem; border: 1px #333 solid; padding: 8px 15px; background-color: #333; color: #fff; border-radius: 24px; margin-right: 5px; margin-bottom: 10px; text-transform: uppercase; }
.navigation.pagination a.page-numbers { background: none; color: #333; }
.navigation.pagination a.page-numbers:hover { background-color: #333; color: #fff; }
.navigation.pagination .page-numbers.dots { border: 0 none !important; background: none !important; color: #333 !important; }

.navigation.post-navigation { line-height: 1.5; }
.navigation.post-navigation .screen-reader-text { display: none; }
.navigation.post-navigation .nav-links { display: table; width: 100%; }
.navigation.post-navigation .nav-next, .navigation.post-navigation .nav-previous { display: table-cell; width: 50%; vertical-align: top; text-transform: uppercase; }
.navigation.post-navigation .nav-previous { text-align: left; }
.navigation.post-navigation .nav-previous:before { content: '\2190'; margin-right: 10px;}
.navigation.post-navigation .nav-next { text-align: right; }
.navigation.post-navigation .nav-next:after { content: '\2192'; margin-left: 10px; }
.navigation.post-navigation .nav-previous:before, .navigation.post-navigation .nav-next:after { font-size: 26px; color: #666; display: inline-block; vertical-align: middle; }

/**
 * Widget Area
 */
.widget { margin-bottom: 40px; }
.widget .search-submit { display: none; }
.widget .search-field { width: 95%; }
.widget > * { margin-bottom: 15px; }
.widget > *:last-child { margin-bottom: 0; }
.widget-title { font-family: "Raleway"; font-weight: 300; }
.widget ul ul { margin-left: 15px; }
.widget ul li { margin-bottom: 10px; }
.widget ul li li:first-child { margin-top: 10px; }
.widget a { color: #333; }

/**
 * Comment form
 */
.comment-respond { margin-bottom: 40px; }
.comment-respond * { margin-bottom: 15px; line-height: 1.5; }
.comment-respond label { display: block; font-weight: 400; text-transform: uppercase; }
.comment-respond .comment-form-cookies-consent label { display: inline-block; text-transform: none; }

/**
 * Comments
 */
.comments-title, #reply-title { font-family: "Raleway"; font-weight: 300; }
.comments-title { margin-bottom: 20px; }
.comment-author * { display: inline-block; vertical-align: middle; text-transform: uppercase; }
.comment-author .avatar { margin-right: 20px; border-radius: 50%; }
.comment-author .says { display: none; }
.comment-metadata { margin-left: 84px; font-size: 0.75rem; text-transform: uppercase; color: #666; margin-bottom: 20px; }
.comment-metadata a { color: #666; }
.comment-metadata .edit-link a:before { content: "-"; padding: 0 10px;  }
.comment-awaiting-moderation { margin-bottom: 20px; margin-left: 84px; color: #ff8000; font-style: italic; font-weight: 400; }
.pingback .comment-edit-link { margin-left: 20px; }
.comment-content { padding-left: 84px; line-height: 1.7; clear: both; }
.comment-content > * { margin-bottom: 15px; }
.comment-content > *:last-child { margin-bottom: 0; }
.comment-content > *:last-child:after { content: ""; clear: both; display: table; }
.comment-content ul, .comment-content ol { list-style-position: inside; margin-left: 1.5em; }
.comment-content ul { list-style: circle; }
.comment-content ol { list-style: decimal; }
.comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 { font-family: "Raleway"; font-weight: 300; }
#comments { margin-bottom: 40px; }
.comment-list .pingback .comment-body { line-height: 1.7; clear: both; }
.comment-body .reply { padding-left: 84px; margin-top: 20px; }
.comment-reply-link { display: inline-block; line-height: 1; padding: 8px 12px; border: 1px solid; font-size: 0.75rem; color: #333; border-radius: 24px; }
.comment-reply-link:hover { background-color: #333; color: #fff; }
#cancel-comment-reply-link { font-size: 0.75rem; }
.comment-list .comment-respond { margin-top: 40px; margin-left: 84px; }
.comment-list .comment, .comment-list .pingback { border-top: 1px #bbb dashed; padding: 20px 0; }
.comment-list .comment .comment { margin-top: 20px; margin-left: 20px; }
.no-comments { margin-top: 20px; margin-left: 84px; font-style: italic; border-bottom: 1px dashed; padding-bottom: 3px; display: inline-block; }

.comments-pagination { margin-top: 30px; }
.comments-pagination h2.screen-reader-text { display: none; }
.comments-pagination .page-numbers { display: inline-block; padding: 10px; line-height: 1; margin-right: 5px; background-color: #333; color: #fff; font-size: 0.75rem; border: 1px #333 solid; border-radius: 5px; }
.comments-pagination a.page-numbers { background: none; color: #333; }
.comments-pagination a.page-numbers:hover { background-color: #333; color: #fff; }
.comments-pagination .page-numbers.dots { background: none !important; color: #333 !important; border: 0 none !important; }

/**
 * Footer
 */
#site-footer { line-height: 1.5; }
#site-footer .footer-credit { font-size: 0.813rem; text-align: center; }

/**
 * Repsonsive media css
 */
@media all and ( max-width: 920px ){
    .site-header { display: block; text-align: center; margin-bottom: 20px; }
    .site-logo { margin: 0; margin-bottom: 10px; }
    .site-header .site-nav { display: none; }
    #responsive-nav-container { display: block; }
    .link-more, .navigation.pagination, .page-links { text-align: center; }
    .navigation.post-navigation .nav-next, .navigation.post-navigation .nav-previous { vertical-align: middle; }
    .with-sidebar .site-main { float: none; width: 100%; }
    #secondary.widget-area { float: none; display: none; }
}