@media (prefers-color-scheme: dark) and (max-width: 978px) {
  #sidebar, #page-title, .block-bg, .portadell {
    background: #000 !important;
  }
}


@media (prefers-color-scheme: dark) {

/*

TEXT & HEADINGS COLOR: #aaa
LINKS COLOR: #777
BLOCK BG COLOR: #111
BODY BG COLOR: #333
DEFAULT ACCENT COLOR: #e63600

*/

/*---------------------------------------
	MAIN STRUCTURE
---------------------------------------*/

li.filter.current-cat {
border: 1px solid #6b6b6b;    
}

.folio-wrap {
background-color: rgba(24, 24, 24, 0.87);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.26);
color: #d2d2d2;
}

.folio-wrap:hover {
background-color: rgba(255, 255, 255, 0.75);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
color: #000;
}

.folio-wrap2 {
background-color: rgba(24, 24, 24, 0.95);
box-shadow: 0 0 5px rgba(98, 98, 98, 0.87);
}

#sidebar {
background: rgba(27, 27, 27, 0.96);
box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

#footer-widgets {
background: rgba(17,17,17,0.6);
box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

.inner {
color: #ccc;    
}

/*---------------------------------------
	GENERAL STYLING
---------------------------------------*/

/* ACCORDIONS Y TABS */

.accordionhtml {
box-shadow: 0 0 5px #000;
}

.acc-sec-label {
background: #333333;
border-bottom: 1px solid rgb(139, 139, 139);
}

.acc-sec-content {
background: #464646;
}


.contentabs {
background: #000;
color: #ccc;
border: 1px solid #4a4a4a;
}
.maintabs {
border-bottom: 1px solid #878787;
background-color: #424242;
}
.inputabs:checked + .labeltabs {
background: #747077; 
}

.has-inline-color.has-black-color {
  color: #fff !important;
}

.block-bg {
background-color: rgba(17,17,17,0.95);
box-shadow: 0 0 4px  rgba(0,0,0,0.3);
}

div#previews-wrapper.block-bg {
box-shadow: 0 0 12px rgba(242, 242, 242, 0.83);
}

#page-title {
background: rgba(17,17,17,0.6);
box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

.portadell {
background-color: rgba(0, 0, 0, 0.7);
}

body {
background-color: #333;
color: #ccc;
}

table {
border: 1px solid #3f3f3f;
}

thead, th, td {
border: 2px solid #3f3f3f;    
}

a {
color: #888;
}

.gallery a {
border: 1px solid #666;
}

/* FORMS
--------------------------------*/

#content input[type="text"],
#content textarea,
.contact-form input,
#footer-widgets input[type="text"],
#footer-widgets textarea,
#sidebar input[type="text"],
input[type="password"] ,
#sidebar textarea {
border: 1px solid #333;
background: #000;
box-shadow: inset 0 2px 3px rgba(0,0,0,1);
color: #eee;
}

#content input[type="text"]:focus,
#content textarea:focus,
.contact-form input:focus,
#footer-widgets input[type="text"]:focus,
#footer-widgets textarea:focus,
#sidebar input[type="text"]:focus,
#sidebar textarea:focus,
input[type="password"]:focus {
background: #2c2c2c;
}

input[type="submit"],
button {
color: #eee;
border: 1px solid #555;
text-shadow: 1px 1px 0 #222;
background-color: #444444;
}

input[type="submit"]:hover,
button:hover {
border: 1px solid #777;
background-color: #888888;
}

input[type="submit"]:active,
button:active {
border: 1px solid #777;
background-color: #444444;
}

/* NAVIGATION
--------------------------------*/

.main-menu ul {
background: rgba(17,17,17,0.9);
border: 1px solid #333;
box-shadow: inset 0 0 10px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.3);
}

.main-menu ul li {
border-top: 1px solid #252525; 
}

/*/// CALENDAR ///*/

aside.widget_calendar #wp-calendar th {
background: #333;
}

aside.widget_calendar #wp-calendar tfoot td {
border-top: 2px solid #333;
}

aside.widget_calendar #today {
color: #000;
}

aside.widget_calendar #wp-calendar #today a {
color: #000;
}

/*---------------------------------------
	CONTENT
---------------------------------------*/

.entry-meta {
color: #777;
}

.entry-title,
.entry-title a {
color: #ccc;
text-shadow: 0px 1px 1px rgba(247, 244, 255, 0.62);
}

.entry-title:hover,
.entry-title a:hover {
text-shadow: 0px 1px 1px rgba(32, 32, 34, 0.61);
}

pre {
color: #ccc;
border: 1px solid #7b7b7b;
background: #333;
}

.author-avatar {
border: 1px solid #333;
}

/* LINK FORMAT
--------------------------------*/

.entry-link {
background: #000;
border-bottom: 1px solid #222;
}

/* PORTFOLIO / RECENT WORK
--------------------------------*/

#filtering-links li.filter.current a,
#filtering-links li.filter:hover a {
background-color: #111;
border: 1px solid #333;
box-shadow: inset 0 0 3px rgba(0,0,0,0.05);
}

#filtering-links li.cat-item.current a,
#filtering-links li.cat-item:hover a {
background-color: #111;
border: 1px solid #333;
box-shadow: inset 0 0 3px rgba(0,0,0,0.05);
}

.folio-grid .folio-item:hover,
.folio-fully .folio-item:hover,
.folio-masonry .folio-item:hover,
.home-composition .folio-item:hover,
.folio-grid .folio-item.folio-hover,
.folio-fully .folio-item.folio-hover,
.folio-masonry .folio-item.folio-hover,
.home-composition .folio-item.folio-hover {
background: #000;
}

.folio-grid .folio-item .folio-title,
.folio-fully .folio-item .folio-title,
.folio-masonry .folio-item .folio-title,
.home-composition .folio-item .folio-title {
background: #333;
background-color: rgba(0,0,0,0.7);
border: 1px solid #000;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.folio-grid .folio-item .folio-title h2,
.folio-fully .folio-item .folio-title h2,
.folio-masonry .folio-item .folio-title h2,
.home-composition .folio-item .folio-title h2 {
color: #fff;
}

.folio-grid .folio-item .folio-title h4,
.folio-fully .folio-item .folio-title h4,
.folio-masonry .folio-item .folio-title h4,
.home-composition .folio-item .folio-title h4 {
color: #666;
}

/* SINGLE PORTFOLIO
--------------------------------*/

#folio-sidebar aside > span {
border-top: 1px solid #333;
}

#folio-sidebar aside.folio-skills a {
color: #ccc;
}

#folio-sidebar aside .live-btn {
background: #333;
color: #999;
box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}

#folio-sidebar aside .live-btn:hover {
color: #fff;
}

/* RECENT POSTS
--------------------------------*/

.recent-posts .recent-post-wrap img.attachment-recent-thumb {
border: 1px solid #333;
background: #111;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.12);
}

.recent-work-row .recent-button,
.recent-posts .recent-button {
background: #333;
color: #999;
box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}

.recent-work-row .recent-button:hover,
.recent-posts .recent-button:hover {
color: #fff;
}

.gridnav-label {
background: rgba(17,17,17,0.6);
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

/* PAGINATION
--------------------------------*/

.pagination {
background: rgba(17,17,17,0.6);
box-shadow: 0 0 4px rgba(0,0,0,0.1);
}

.pagination .page-numbers,
.pagination .pages,
.post-page-numbers {
border-right: 1px solid #000;
background-color: #111;
box-shadow: 0 0 2px rgba(0,0,0,0.1);
}

.pagination .pages {
color: #777;
}

.pagination .page-numbers:hover,
.post-page-numbers:hover {
border-right: 1px solid #222;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.pagination .page-numbers:active,
.post-page-numbers:active {
border-right: 1px solid #0A0C11;
background-color: #000;
box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
}

.pagination .page-numbers.current:hover,
.pagination .page-numbers.dots:hover,
.pagination .page-numbers.current:active,
.pagination .page-numbers.dots:active {
background-color: #111;
border-right: 1px solid #000;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

/* RELATED POSTS
--------------------------------*/

#related-posts ul li img, #related-poste ul li img {
border: 1px solid #333;
background-color: #111;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.12);
}

#related-posts ul li h6, #related-poste ul li h6 {
color: #ccc;
}

/* COMMENTS (NATIVO & SOPORTE PARA DISQUS)
--------------------------------*/

div#disqus_thread {
background-color: rgba(17,17,17,0.6);
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

#comments .comment-avatar {
border: 6px solid #333;
}

#comments .comment-date {
color: #9c9c9c;
}

#comments .comment-date a {
color: #777;
}

#comments .comment-content {
background-color: #222;
}

#comments .comment-content footer .comment-reply-link,
#comments .comment-content footer .comment-edit-link {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

#comments #respond {
background-color: #222;
}

#comments #respond #cancel-comment-reply-link {
background: #444;
color: #999;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

#comments #respond .required {
color: red;
}

#comments #comment_nav_below a {
color: #111;
background: #999;
}

#comments #comment_nav_below a:hover {
color: #ccc;
background: #444 !important;
}

/*---------------------------------------
	WIDGETS
---------------------------------------*/

aside.widget > span:first-child {
border-top: 1px solid #333;
}

aside.widget ul ul {
border-left: 1px solid #333;
}

aside.widget.widget_rss h3 a {
color: #ccc;
}

.tagcloud > a {
border: 1px solid #252525;
background: #000;
box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

aside.widget.widget-posts-thumbs .wid_thumb {
background-color: #000;
box-shadow: 2px 2px 5px rgba(182, 182, 182, 0.3);
}

aside.widget.widget-posts-thumbs .wid_thumb img {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

aside.widget.widget-posts-thumbs h2 {
color: #ccc;
}

aside.widget.widget-posts-thumbs .wid_post_meta {
color: #777;
}

aside.widget.widget_calendar #calendar_wrap {
border: 1px solid #000;
background: rgba(17,17,17,0.5);
box-shadow: 0 0 3px rgba(0,0,0,0.08), inset 0 1px 0 #333;
}

aside.widget.widget_calendar #wp-calendar {
color: #ccc;
}

aside.widget.widget_calendar #wp-calendar th {
background: #333;
}

aside.widget.widget_calendar #wp-calendar tbody a {
color: #111;
}

aside.widget.widget_calendar #wp-calendar tfoot td {
border-top: 2px solid #333;
}

.jonilar_widget_cat_recent_posts div div ul li a, .jonilar_widget_cat_recent_posts .entry-content, .jonilar_widget_cat_recent_posts .home-temp .entry-content,
.widget-posts-thumbs div div ul li a, 
.widget-posts-thumbs .entry-content, 
.widget-posts-thumbs .home-temp .entry-content {
color: #ccc;    
}

/*---------------------------------------
	SHORTCODES
---------------------------------------*/

/* DIVIDERS
---------------------*/

.hdivider a {
background: rgba(17,17,17,0);
}

/* NOTIFICATION BOXS
---------------------*/

.box a {
color: #000;
}

.successBox {
border: 1px solid #3aaa35;
background: #091709;
color: #3aaa35;
}

.errorBox {
border: 1px solid #fa3a45;
background: #46050b;
color: #ccc;
}

.warningBox {
border: 1px solid #ff9d09;
background: #462b05;
color: #ffc978;
}

.infoBox {
border: 1px solid #76a9d8;
background: #132639;
color: #76a9d8;
}

.ideaBox {
border: 1px solid #c223a8;
background: #2c0725;
color: #ccc;
}

.generalBox {
border: 1px solid #adadad;
color: #fff;
background: #3d3d3d;
}


blockquote {
background: #3b3b3b;
}

/*---------------------------------------
    WOOCOMMERCE
---------------------------------------*/

.social-wrapper .cart-contents a {
background: #888;
color: #000;
}

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
border-color: #666;
}

.woocommerce table.shop_table td,
.woocommerce-page table.shop_table td {
border-color: #666;
}

.woocommerce .cart-collaterals .cart_totals table,
.woocommerce-page .cart-collaterals .cart_totals table {
border-bottom: 3px solid #888;
}

.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce-page .cart-collaterals .cart_totals table th {
border-top: 1px solid #666 !important;
}

.woocommerce .cart-collaterals .cart_totals table td,
.woocommerce-page .cart-collaterals .cart_totals table td {
border-top: 1px solid #666 !important;
}

.page-template-home-composition aside.widget.widget_text .textwidget {
background: #000 !important;
}

}