@import url('reset.css');
@import url('960.css');
@import url('superfish.css');


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

body {
    font-family: sans-serif;
    margin: 0;
    overflow-y: scroll;
    padding-top: 20px;
    padding-bottom: 20px;
    background: url(/resources/template/assets/images/bg.jpg) no-repeat center fixed;
    background-size: cover;
}

a {
    text-decoration: none;
    transition: .2s;

    img {
        transition: .2s;
    }

    &:hover {
        color: red;
    }

    &:hover img {
        opacity: 0.8;
    }
}

a:focus {
    outline: none;
}

p {
    margin-bottom: 10px;
}

hr {
    border: 0 rgba(0, 0, 0, 0.50) dashed;
    border-top-width: 1px;
    clear: both;
    height: 0;
    margin-bottom: 20px !important;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
}

h1 {
    margin-bottom: 10px;
}

h2 {
    margin-bottom: 10px;
}

h3 {
    margin-bottom: 10px;
}

h4 {
    margin-bottom: 10px;
}

h5 {
    margin-bottom: 10px;
}

h6 {
    margin-bottom: 5px;
}

ul {
    margin-bottom: 20px;
}

ul li {
    padding-left: 20px;
    padding-bottom: 5px;

    &:hover {
        background-color: #fff;
        border-radius: 5px;
    }
}

dt {
    margin-top: .8em;
    margin-bottom: .4em;
    font-weight: bold;
}

input[type="text"], textarea {
    border: 1px solid #ccc;
    padding: 6px 5px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    color: #555;
}

input[type="text"]:focus, textarea:focus {
    border-color: #999;
    background-color: #fefefe;
}

.alignleft {
    float: left;
    margin-right: 10px;
}

.alignright {
    float: right;
    margin-left: 10px;
}

.aligncenter .img_frame {
    margin: 0 auto;
}

.center {
    text-align: center;
}

.tar {
    text-align: right;
}

/*-----------------------------------------------*/
/* Button
/*-----------------------------------------------*/

a.button, input[type="submit"] {
    text-decoration: none;
    padding: 6px 12px;
    position: relative;
    display: inline-block;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
    cursor: pointer;
}

a.button span {
    display: inline-block;
    width: 100%;
    height: 100%;
}

a.button.custom {
    color: #fff;
    text-shadow: none;
    border: solid 1px #bbb;
}

a.button.left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
}

a.button.middle {
    border-radius: 0;
    margin: 0;
    border-left: none !important;

}

a.button.right {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin: 0;
    border-left: none !important;
}

/* White */

a.button.white, input[type="submit"] {
    color: #444;
    text-shadow: 0 1px 0 #fff;
    background: #f3f3f3;
    border: solid 1px #bbb;
    background: linear-gradient(to bottom, #F5F5F5 40%, #F1F1F1 70%);
}

a.button.white:hover, a.button.custom:hover, input[type="submit"]:hover {
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

a.button.white:active {
    border-color: #444;
}

/* Grey */

a.button.grey {
    color: #fff;
    text-shadow: none;
    background: #a1a59b;
    border: solid 1px #7b7e77;
    background: linear-gradient(to bottom, #a1a59b, #999d94);
}

a.button.grey:hover {
    border-color: #555;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

a.button.grey:active {
    border-color: #333;
}

/* Black */

a.button.black {
    color: #fff;
    text-shadow: none;
    background: #282828;
    border: solid 1px #1d1d1d;
    background: linear-gradient(to bottom, #282828, #252525);
}

a.button.black:hover {
    border-color: #111;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

a.button.black:active {
    border-color: #000;
}

/* Red */

a.button.red {
    color: #fff;
    background: #ff3131;
    text-shadow: none;
    border: solid 1px #c62626;
    background: linear-gradient(to bottom, #ff3131, #f32837);
}

a.button.red:hover {
    border-color: #851a1a;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

a.button.red:active {
    border-color: #5e1212;
}

/* Purple */

a.button.purple {
    color: #fff;
    background: #c753f2;
    text-shadow: none;
    border: solid 1px #b14ad8;
    background: linear-gradient(to bottom, #c753f2, #c251ec);
}

a.button.purple:hover {
    border-color: #8c3aaa;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

a.button.purple:active {
    border-color: #712f89;
}

/* Pink */

a.button.pink {
    color: #fff;
    background: #f050cc;
    text-shadow: none;
    border: solid 1px #d045b1;
    background: linear-gradient(to bottom, #f050cc, #e84dc5);
}

a.button.pink:hover {
    border-color: #983281;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

a.button.pink:active {
    border-color: #822b6e;
}

/* Orange */

a.button.orange {
    color: #fff;
    background: #ee9c26;
    text-shadow: none;
    border: solid 1px #c88422;
    background: linear-gradient(to bottom, #ee9c26, #ee9d29);
}

a.button.orange:hover {
    border-color: #a0691b;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

a.button.orange:active {
    border-color: #8a5b18;
}

/* Yellow */

a.button.yellow {
    color: #fff;
    background: #f2e40c;
    text-shadow: none;
    border: solid 1px #d4c80b;
    background: linear-gradient(to bottom, #f2e40c, #ecdf0c);
}

a.button.yellow:hover {
    border-color: #aba109;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

a.button.yellow:active {
    border-color: #837c07;
}

/* Green */

a.button.green {
    color: #fff;
    background: #8ce32e;
    text-shadow: none;
    border: solid 1px #74bc26;
    background: linear-gradient(to bottom, #8ce32e, #86da2c);
}

a.button.green:hover {
    border-color: #5a931e;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

a.button.green:active {
    border-color: #477418;
}

/* Blue */

a.button.blue {
    color: #fff;
    background: #328ee8;
    text-shadow: none;
    border: solid 1px #2c7fce;
    background: linear-gradient(to bottom, #328ee7 40%, #3391ec 70%);
}

a.button.blue:hover {
    border-color: #1f5a92;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

a.button.blue:active {
    border-color: #194672;
}

/*-----------------------------------------------*/
/* TABLE
/*-----------------------------------------------*/

.table-scroll-wrapper {
    display: block;
    overflow-x: auto;
    width: 100%;
}


table {
    border-collapse: collapse;
    width: 100%;
    margin: auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

table.weather-table {
    max-width: 700px;
}

caption {
    font-size: 1.5em;
    margin-bottom: 15px;
    font-weight: bold;
}

thead th {
    background-color: #2c3e50;
    color: white;
    padding: 12px;
}

tbody td, tbody th {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

tbody tr:hover {
    background-color: #f1f1f1;
}

th:first-child, td:first-child {
    text-align: left;
}


/*-----------------------------------------------*/
/* Header
/*-----------------------------------------------*/

#header-holder {
    padding: 20px;

    & #header {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;

        & #logo {
            flex: 1 1 160px
        }
    }
}

#nav {
    margin-top: 5px;
    flex: 8;
}

#nav > ul {
}

#nav li {
    margin: 0 10px 0 0;
    background: none;
}

#nav ul li a {
    padding: 10px;
    color: #212121;
    text-shadow: none;
    display: block;
    line-height: normal;
    text-transform: none;
}

#nav ul li .drop-arrow {
    font-size: 13px;
    vertical-align: text-bottom;
    padding-left: 5px;
}

#nav ul li.current_page_item > a, #nav ul li.current_page_parent > a, #nav ul li.current-menu-item > a, #nav ul li.current-post-ancestor > a, #nav ul li.current-page-parent > a {
    color: #212121;
    text-shadow: none;

}

#nav ul li ul.children li.current_page_item > a, #nav ul li ul.sub-menu li.current_page_item > a {
    background: none;
}

#nav ul li a:hover {
    color: #fff;
    text-shadow: 0 1px 0 #000;
    background: black;
}

#nav ul li ul.children li.current_page_item > a:hover, #nav ul li ul.sub-menu li.current_page_item > a:hover {
    color: #fff !important;
}

#nav ul li ul.children li a {
    font-size: 12px;
}


/*-----------------------------------------------*/
/* Content
/*-----------------------------------------------*/


#wrapper {
    box-shadow: 0 0 8px rgba(0, 0, 0, 1);
    border-radius: 20px 20px 0 0;
}

.container_12 {
    /*background-image: url(../images/trans_bg.png);*/
    background: rgb(255 255 255 / 95%);
}

#main {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
}

.notabs {
    padding: 0 10px 0 !important;
}

#setup {
    text-align: center;
    margin: 20px 20px 60px;
}

#main.archives {
    padding-top: 20px;
}

h3#lostinspace {
    margin: 100px 0 150px;
    text-align: center;
}

.entry {
    font-size: 12px;
    text-shadow: 0 1px 0 #fff;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.entry.shortcode {
    margin-left: 0;
}

.entry:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.entry h3.title {
    text-shadow: 0 1px 0 #fff;
    font-size: 24px;
    margin-bottom: 0;
    line-height: 20px;
}

.entry h3.title a, #portfolio h3 a, .portfolio.shortcode h3 a {
    color: #444;
}

.entry .excerpt {
    color: #888;
}

.entry .excerpt .more {
    text-align: right;
}

.entry .excerpt .more a {
    margin-right: 0;
    font-size: 10px;
}

.post_content .meta, .entry .meta {
    padding: 4px 1px;
    font-size: 10px;
    height: 11px;
    color: #999;
    text-shadow: 0 1px 0 #fff;
    margin-bottom: 10px;
}

.post_content .meta .comment, .entry .meta .comment {
    float: right;
}

.post_content .meta .comment a, .entry .meta .comment a {
    color: #999;
}

.post_content.fullwidth {
    padding-right: 10px;
}

#pagination {
    text-align: center;
}

#pagination .first, #pagination .prev, #pagination .current, #pagination .inactive, #pagination .next, #pagination .last {
    text-decoration: none;
    padding: 4px 8px;
    position: relative;
    display: inline-block;
    transition: border-color .218s;
    border-radius: 2px;
    margin-right: 5px;
    color: #444;
    text-shadow: 0 1px 0 #fff;
    background: #f3f3f3;
    border: solid 1px #bbb;
    background: linear-gradient(to bottom, #F5F5F5 40%, #F1F1F1 70%);
}

#pagination .current {
    color: #ccc;
}

#pagination .first:hover, #pagination .prev:hover, #pagination .current:hover, #pagination .inactive:hover, #pagination .next:hover, #pagination .last:hover {
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.search-results h1 span, .search-no-results h1 span {
    color: #999;
}

.nothing-found {
    margin-left: 10px;
}

#copyright {
    padding: 20px 10px;
    color: #252525;
    text-shadow: 0 1px 0 #000;
    clear: both;
}

.tagcloud a {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    padding: 3px 5px;
    margin-right: 3px;
    border: 1px solid #ccc;
}

/*-----------------------------------------------*/
/* PAGE - POST
/*-----------------------------------------------*/

#main-holder h1.big-title {
    font-size: 36px;
    padding: 10px 20px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
    background: transparent url(../images/title_bg.png) repeat center 0;
    text-transform: uppercase;
    margin-bottom: 0;

    & ~ h2 {
        padding: 5px 20px;
    }

    @media screen and (max-width: 600px) {
        & {
            font-size: 25px;
        }
    }

    @media screen and (max-width: 400px) {
        & {
            font-size: 22px;
            word-wrap: break-word;
            word-break: break-word;
        }
    }
}

#main-holder p {
    padding: 20px;
}

#breadcrumb {
    padding: 10px 20px;
    background: transparent url(../images/breadcrumb_bg.png) repeat 0 0;
    text-shadow: #fff 0 1px 0;
    color: #636363;
    border-bottom: 1px dashed #ccc;
}

#breadcrumb a {
    color: #404040;

    &:hover {
        color: red;
    }
}

.page_content, .post_content {
    width: 100%;
    margin-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    flex: 1 1 500px;
    margin-bottom: 100px;

    @media screen and (min-width: 795px) {
        & > *:last-child {
            position: sticky;
            top: 10px;
        }
    }


}

.page_content.fullwidth {
    padding-right: 10px;
}

.page_content.left_sidebar {
    padding-right: 10px;
    padding-left: 0;
}

.page_content p, .post_content p {
    clear: both;
    font-size: 17px;
    text-shadow: #fff 0 1px 0;
}

#comment {
    padding: 10px;
    width: 590px;
}

/*-----------------------------------------------*/
/* Slide
/*-----------------------------------------------*/


#slide {
    display: flex;
    @media screen and (max-width: 800px) {
        & {
            display: none;
        }
    }
}

#slide #sleft {
    flex: 1;
    max-width: 300px;
    height: 350px;
    background: rgb(0 0 0 / 90%);

    @media screen and (max-width: 960px) {
        & {
            width: auto;
        }
    }
}

#slide #sleft h1 {
    margin: 35px 0 25px 20px;
    color: #eee;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
    line-height: 1.2em;
    background: none;
}

#slide #sleft h1 span {
    color: #ff3131;
}

#slide #sleft h2 {
    background: none;
    color: #aaa;
    margin: 0 0 0 20px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
    line-height: 1.3em;
}

#slide #sright {
    width: 650px !important;
    height: 350px;
    background: transparent url(../images/slide_bg_right.png) repeat-x 0 0;
}

#slide #sright #texture {
    width: 650px;
    height: 350px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 90;
}


/*-----------------------------------------------*/
/* Boxes
/*-----------------------------------------------*/

#boxes {
    margin-bottom: 15px;
}

#boxes h3 {
    height: 24px;
    padding-top: 5px;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
    background: transparent url(../images/boxes_bg.png) repeat-x center 0;
    text-align: center;
    font-size: 19px;
}

#boxes .grid_4 p {
    margin: 10px 0 0 10px;
    text-shadow: 0 1px 0 #fff;
    font-size: 12px;
}

#boxes .grid_4 img {
    float: right;
    margin: 10px 0 10px 10px;
}

#box1, #box2, #box3 {
    cursor: pointer;
}

#boxes_content {
    width: 940px;
    margin: 15px 0 30px;
}

.box_content {
    display: none;
    font-size: 12px;
    text-shadow: 0 1px 0 #fff;
    padding: 20px 10px 0;
}

/*-----------------------------------------------*/
/* Minitabs
/*-----------------------------------------------*/

.minitabs_container {
    margin-bottom: 20px;
}

ul.minitabs {
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px;
}

ul.minitabs li {
    -webkit-border-top-left-radius: 1px;
    -webkit-border-top-right-radius: 1px;
    -moz-border-radius-topleft: 1px;
    -moz-border-radius-topright: 1px;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
    border: 1px dashed #bbb;
    border-bottom: 0;
    display: inline;
    float: left;
    margin: 0 5px 0 0;
    padding: 1px 1px 0;
    background: none;
}

ul.minitabs a {
    display: block;
    background: transparent url(../images/minitabs_bg.png) repeat 0 0;
    color: #666;
    text-shadow: 0 1px 0 #fff;
    padding: 2px 10px 2px;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    white-space: nowrap;
    margin-bottom: 1px;
}

ul.minitabs a:hover {
    background: transparent url(../images/minitabs_bg.png) repeat 0 0;
    text-shadow: 0 1px 0 #fff;
}

ul.minitabs li a.current {
    background: transparent url(../images/minitabs_bg.png) repeat 0 0;
    color: #ff3131;
    text-shadow: 0 1px 0 #fff;
    cursor: default;
    margin-bottom: 0;
    padding-bottom: 3px;
}

.minitabs_container .panes {
    margin: 0;
    padding: 20px 10px;
    border: 1px dashed #ccc;
    background: transparent url(../images/minitabs_bg.png) repeat 0 0;
    color: #888;
}

.minitabs_container .panes p {
    margin-bottom: 10px;
}

.minitabs_container .panes > div {
    display: none;
    overflow: hidden;
}

/*-----------------------------------------------*/
/* Toggle
/*-----------------------------------------------*/

.toggle_title {
    font-size: 16px;
    text-transform: none;
    background: transparent url(../images/toggle_bg.png) repeat 0 0;
    color: #fff;
    text-shadow: 0 1px 0 #000;
    padding: 10px 15px 5px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #fff;
    cursor: pointer;
}

.toggle_title span {
    float: left;
    margin-right: 15px;
    margin-top: -4px;
    display: inline-block;
    width: 23px;
    height: 23px;
    background: transparent url(../images/toggle-plus.png) no-repeat 0 0;
}

.toggle_title.active span {
    background: transparent url(../images/toggle-minus.png) no-repeat 0 0;
}

.toggle_content {
    border: 1px dashed #ccc;
    padding: 10px;
    margin: 10px 0;
    background: transparent url(../images/minitabs_bg.png) repeat 0 0;
    color: #888;
    text-shadow: 0 1px 0 #fff;
    display: none;
}

/*-----------------------------------------------*/
/* Home - Page
/*-----------------------------------------------*/

#home_content {
    padding: 30px 10px 0;
}


/*-----------------------------------------------*/
/* Sidebar
/*-----------------------------------------------*/


#sidebar {
    --sidebar-wrap-size: 795px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-shadow: #fff 0 1px 0;
    color: #888;
    flex-basis: 250px;

    @media screen and (max-width: 795px) {
        & {
            flex-direction: unset;
            flex: 1 150px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

    }

}

#sidebar a {
    display: block;
    color: #666;
    transition: .2s;
}


/*-----------------------------------------------*/
/* Sidebar Widget
/*-----------------------------------------------*/

#sidebar .widget {
    padding: 10px;
    background: transparent url(../images/widget_sidebar_bg.png) repeat 0 0;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    border-radius: 10px;

    @media screen and (max-width: 795px) {
        & {
            flex: 1 1 180px;
        }

    }
}

#sidebar .widget:last-of-type {
    margin-bottom: 0 !important;
}

#sidebar .widget h4 {
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 15px;
    text-shadow: #fff 0 1px 0;
    color: #666;
}

#sidebar .widget .textwidget {
    padding-left: 15px;
}

#sidebar .widget_nav_menu ul ul {
    padding-left: 20px;
}

#sidebar .widget .recentpost ul {
    margin-bottom: 0;
}

#sidebar .widget .recentpost li {
    margin-bottom: 10px;
    line-height: 15px;
}

#sidebar .widget_search input {
    width: 250px;
}

#sidebar .widget .recentpost .thumb_widget, #footer .widget .recentpost .thumb_widget {
    float: right;
    margin-left: 10px;
    color: #444;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    padding: 2px;
    margin-top: 12px;
}

#sidebar .widget .recentpost .desc, #footer .widget .recentpost .desc {
    font-size: 11px;
    margin-bottom: 20px;
    margin-top: 3px;
}

#footer .widget .recentpost h5, #sidebar .widget .recentpost h5 {
    font-size: 13px !important;
    font-weight: normal;
    line-height: 1em;
    margin-bottom: 2px;
}

#sidebar .widget .recentpost span.date {
    font-size: 10px;
    color: #999;
}

#sidebar .hb_flickr_widget .flickr_badge_image {
    float: left;
    margin: 0 17px 10px 0;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

#sidebar .hb_flickr_widget .flickr {
    padding: 0 0 0 20px;
}

#sidebar .hb_tweet_widget #twitter_update_list, #footer .hb_tweet_widget #twitter_update_list {
    padding: 0 10px;
    color: #777;
    margin-left: 0;
    margin-bottom: 0;
}

#sidebar .hb_tweet_widget #twitter_update_list {
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

/*-----------------------------------------------*/
/* Footer
/*-----------------------------------------------*/

#footer {
    padding: 15px 0 10px;
    background: transparent url(../images/footer_bg.png) repeat 0 0;
    font-size: 11px;
    overflow: auto;
    margin-bottom: 20px;
    clear: both;
}

#footer ul li {
    background: transparent url(../images/bullet-dot-red.png) no-repeat 0 2px;
}

#footer .widget h6 {
    text-transform: uppercase;
    color: #ccc;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
    background: transparent url(../images/footer_bg_title.png) repeat-x center bottom;
    padding: 0 0 5px 10px;
    margin-bottom: 10px;
    font-size: 14px;
}

#footer .widget .textwidget {
    padding: 0 10px;
    line-height: 16px;
    color: #777;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}


#footer .hb_flickr_widget .flickr_badge_image {
    float: left;
    margin: 0 7px 7px 0;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}


#footer .hb_flickr_widget .flickr {
    padding: 0 0 0 10px;
}

#sidebar .hb_flickr_widget .flickr_badge_image img, #footer .hb_flickr_widget .flickr_badge_image img {
    width: 60px;
    height: 60px;
    filter: alpha(opacity=60);
    opacity: 0.6;
    border: 1px solid #282828;
}

#footer .hb_recentpost_widget .recentpost {
    padding: 0 10px;
}

#footer .hb_recentpost_widget .recentpost ul {
    margin-bottom: 0;
    margin-left: 0;
}

#footer .hb_recentpost_widget .recentpost h5 a {
    font-size: 14px;
    color: #ddd;
    font-weight: normal;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}

#footer .hb_recentpost_widget .recentpost span.date {
    font-size: 10px;
    color: #777;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}

#footer .hb_recentpost_widget .recentpost ul li {
    margin-bottom: 10px;
    clear: both;
}


#footer .hb_tweet_widget #twitter_update_list {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}

#sidebar .hb_tweet_widget #twitter_update_list li, #footer .hb_tweet_widget #twitter_update_list li {
    margin-bottom: 15px;
    line-height: 14px;
    padding-left: 35px;
}

#footer .hb_tweet_widget #twitter_update_list li {
    background: transparent url(../images/quote.png) no-repeat 0 3px;
}

#sidebar .hb_tweet_widget #twitter_update_list li {
    background: transparent url(../images/quote-black.png) no-repeat 0 3px;
}

#sidebar .hb_tweet_widget #twitter_update_list li span, #footer .hb_tweet_widget #twitter_update_list li span {
    display: block;
    margin-bottom: 3px;
}

#sidebar .hb_tweet_widget #twitter_update_list li a, #footer .hb_tweet_widget #twitter_update_list li a {
    color: #555;
}

#sidebar .hb_tweet_widget #twitter_update_list li span a, #footer .hb_tweet_widget #twitter_update_list li span a {
    color: #aaa;
}

.hb_social_widget ul {
    margin-left: 10px;
    margin-right: 10px;
}

.hb_social_widget ul li {
    float: left;
    margin-right: 10px;
    padding-left: 0;
    background: none;
}

.hb_social_widget ul li:last-of-type {
    margin-right: 0;
}

.hb_subnav_widget ul {
    margin-bottom: 0;
}


/*-----------------------------------------------*/
/* Loading Stuff
/*-----------------------------------------------*/

#loading {
    width: 16px;
    height: 11px;
    background: transparent url(../images/loading.gif) no-repeat 0 0;
    position: absolute;
    top: 175px;
    left: 320px;
    display: none;
}

/*-----------------------------------------------*/
/* NIVO SLIDER
/*-----------------------------------------------*/

#nivo {
    position: relative;
    width: 650px;
    height: 350px;
    background: url(../images/loading.gif) no-repeat 50% 50%;
}

#nivo img {
    /*display: none;*/
}

/* The slices and boxes in the Slider */
.nivo-slice {
    display: block;
    position: absolute;
    z-index: 5;
    height: 100%;
}

.nivo-box {
    display: block;
    position: absolute;
    z-index: 5;
}

/* Caption styles */
.nivo-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #000;
    color: #fff;
    opacity: 0.8; /* Overridden by captionOpacity setting */
    width: 100%;
    z-index: 8;
}

.nivo-caption p {
    padding: 5px;
    margin: 0;
    text-shadow: 0 1px 0 #000;
}

.nivo-imageLink {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 98;
}

.nivo-caption a {
    display: inline !important;
}

.nivo-html-caption {
    display: none;
}

.nivo-directionNav a {
    position: absolute;
    top: 45%;
    z-index: 99;
    cursor: pointer;
}

.nivo-prevNav {
    left: 0;
}

.nivo-nextNav {
    right: 0;
}

.nivo-controlNav {
    text-align: center;
    position: absolute;
    bottom: 8px;
    right: 4px;
    z-index: 1000;
}

.nivo-controlNav a {
    position: relative;
    z-index: 99;
    cursor: pointer;
    display: block;
    width: 10px;
    height: 10px;
    background: url(../images/nivo-bullets.png) no-repeat;
    text-indent: -9999px;
    border: 0;
    margin-right: 5px;
    float: left;
}

.nivo-controlNav a.active {
    background-position: 0 -10px;
}

.nivo-controlNav a.active {
    font-weight: bold;
}


/*-----------------------------------------------*/
/* SHORTCODE COLUMN
/*-----------------------------------------------*/
.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth {
    position: relative;
    margin-right: 4%;
    float: left;
}

.one_half {
    width: 48%;
}

.one_third {
    width: 30.6666%;
}

.two_third {
    width: 65.3332%;
}

.one_fourth {
    width: 22%;
}

.two_fourth {
    width: 48%;
}

.three_fourth {
    width: 74%;
}

.one_fifth {
    width: 16.8%;
}

.two_fifth {
    width: 37.6%;
}

.three_fifth {
    width: 58.4%;
}

.four_fifth {
    width: 79.2%;
}

.one_sixth {
    width: 13.3333%;
}

.two_sixth {
    width: 30.6666%;
}

.three_sixth {
    width: 47.9998%;
}

.four_sixth {
    width: 65.3332%;
}

.five_sixth {
    width: 82.6665%;
}

.last {
    margin-right: 0 !important;
    clear: right;
}

.sep.line {
    border-top: 1px dashed #fff;
    border-bottom: 1px dashed #ccc;
    margin: 15px 0;
}

.sep.space {
    margin: 15px 0;
}

/*-----------------------------------------------*/
/* Typography Shortcode
/*-----------------------------------------------*/
blockquote {
    font-size: 16px;
    padding: 10px 20px 10px 45px;
    background: transparent url(../images/quote-black.png) no-repeat 0 3px;
}

blockquote p {
    margin-bottom: 8px;
    line-height: 20px;
}

blockquote.alignleft {
    margin: 10px 20px 0 0 !important;
    width: 220px;
}

blockquote.alignright {
    margin: 10px 0 0 20px;
    width: 220px;
}

blockquote cite {
    color: #666;
    font-size: 12px;
    margin-left: 15px;
    font-style: normal;
}

/*-----------------------------------------------*/
/* Code Shortcode
/*-----------------------------------------------*/
.code, .pre {
    border: 1px solid #ccc;
    padding: 10px;
    background: rgba(255, 255, 255, 0.5);
    white-space: pre-wrap; /* Preserve whitespace and wrap text */
    overflow: auto;
    text-shadow: #fff 0 1px 0;
    font-size: 11px;
    display: block;
    margin-bottom: 20px;
}

.code {
    padding: 20px 4px;
    background: #F2F3F5 url("../images/code_bg.gif") repeat scroll 0 0;
    line-height: 20px;
}

.pre {
    padding: 20px 4px;
    line-height: 20px;
}

/*-----------------------------------------------*/
/* Hightlight Shortcode
/*-----------------------------------------------*/
.highlight {
    padding: 1px 3px;
    text-shadow: none;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

.highlight.red {
    background-color: #ffcccf;
    color: #A14A40;
}

.highlight.blue {
    background-color: #D7E7F5;
    color: #5E6984;
}

.highlight.yellow {
    background-color: #FFF9CC;
    color: #736B4C;
}

.highlight.green {
    background-color: #E2F2CE;
    color: #466840;
}

.highlight.dark {
    background: transparent url(../images/title_bg.png) repeat 0 0;
    color: #fff;
    text-shadow: #000 0 1px 0;
}

/*-----------------------------------------------*/
/* List Shortcode
/*-----------------------------------------------*/

ul.list-attach li {
    background: transparent url(../images/bullet-attach.png) no-repeat 0 0;
}

ul.list-delete li {
    background: transparent url(../images/bullet-delete.png) no-repeat 0 0;
}

ul.list-go li {
    background: transparent url(../images/bullet-go.png) no-repeat 0 0;
}

ul.list-help li {
    background: transparent url(../images/bullet-help.png) no-repeat 0 0;
}

ul.list-info li {
    background: transparent url(../images/bullet-info.png) no-repeat 0 0;
}

ul.list-plus li {
    background: transparent url(../images/bullet-plus.png) no-repeat 0 0;
}

ul.list-star-mini li {
    background: transparent url(../images/bullet-star-mini.png) no-repeat 0 0;
}

ul.list-star li {
    background: transparent url(../images/bullet-star.png) no-repeat 0 0;
}

ul.list-tag-blue li {
    background: transparent url(../images/bullet-tag-blue.png) no-repeat 0 0;
}

ul.list-tag-green li {
    background: transparent url(../images/bullet-tag-green.png) no-repeat 0 0;
}

ul.list-tag-pink li {
    background: transparent url(../images/bullet-tag-pink.png) no-repeat 0 0;
}

ul.list-tag-purple li {
    background: transparent url(../images/bullet-tag-purple.png) no-repeat 0 0;
}

ul.list-tag-red li {
    background: transparent url(../images/bullet-tag-red.png) no-repeat 0 0;
}

ul.list-tag-yellow li {
    background: transparent url(../images/bullet-tag-yellow.png) no-repeat 0 0;
}

ul.list-tick li {
    background: transparent url(../images/bullet-tick.png) no-repeat 0 0;
}

ul.customlist li {
    background-position: 0 1px;
    padding-left: 25px;
}

/*-----------------------------------------------*/
/* Videos
/*-----------------------------------------------*/
.video {
    margin-bottom: 20px;
}


/*-----------------------------------------------*/
/* Images
/*-----------------------------------------------*/

.img_frame, .thumbnail img {
    position: relative;
    padding: 4px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.img_styled {
    margin-bottom: 10px;
}

.img_size_small {
    margin: 0 10px 10px 0;
}

.img_size_medium {
    margin: 0 15px 15px 0;
}

.img_size_large, .img_size_fullwidth {
    margin-bottom: 20px;
}

.thumbnail img {
    margin-bottom: 15px;
    max-width: 100%;
}

.post_content .thumbnail img {
}

.overlay_glass {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: #fefefe url(../images/glass.png) no-repeat center center;
    filter: alpha(opacity=0);
    opacity: 0;
    cursor: pointer;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    & > h1, h2, h3, h4, h5, h6 {
        flex: 1 100%;
        text-align: center;
    }
}

.gallery .gallery-row {
    display: block;
    clear: both;
    overflow: hidden;
    margin: 0;
}

.gallery .gallery-item {
    flex: 1 130px;
    text-align: center;
    transition: .2s;
    justify-items: center;

    &:hover {
        scale: 1.05;
    }
}

.gallery .gallery-image-wrap {
    overflow: hidden;
    position: relative;
}

.gallery .gallery-item img, .gallery .gallery-item img.thumbnail {
    display: block;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.gallery-caption {
    margin-left: 0;
}

.gallery .col-0 {
    width: 100%;
}

.gallery .col-1 {
    width: 100%;
}

.gallery .col-2 {
    width: 50%;
}

.gallery .col-3 {
    width: 33.33%;
}

.gallery .col-4 {
    width: 25%;
}

.gallery .col-5 {
    width: 20%;
}

.gallery .col-6 {
    width: 16.66%;
}

.gallery .col-7 {
    width: 14.28%;
}

.gallery .col-8 {
    width: 12.5%;
}

.gallery .col-9 {
    width: 11.11%;
}

.gallery .col-10 {
    width: 10%;
}

.gallery .col-11 {
    width: 9.09%;
}

.gallery .col-12 {
    width: 8.33%;
}

.gallery .col-13 {
    width: 7.69%;
}

.gallery .col-14 {
    width: 7.14%;
}

.gallery .col-15 {
    width: 6.66%;
}

.gallery .col-16 {
    width: 6.25%;
}

.gallery .col-17 {
    width: 5.88%;
}

.gallery .col-18 {
    width: 5.55%;
}

.gallery .col-19 {
    width: 5.26%;
}

.gallery .col-20 {
    width: 5%;
}

.gallery .col-21 {
    width: 4.76%;
}

.gallery .col-22 {
    width: 4.54%;
}

.gallery .col-23 {
    width: 4.34%;
}

.gallery .col-24 {
    width: 4.16%;
}

.gallery .col-25 {
    width: 4%;
}

.gallery .col-26 {
    width: 3.84%;
}

.gallery .col-27 {
    width: 3.7%;
}

.gallery .col-28 {
    width: 3.57%;
}

.gallery .col-29 {
    width: 3.44%;
}

.gallery .col-30 {
    width: 3.33%;
}

/*-----------------------------------------------*/
/* Dropcaps
/*-----------------------------------------------*/

.dropcap1 {
    float: left;
    font-size: 36px;
    margin: 4px 10px 2px 0;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: transparent url(../images/title_bg.png) repeat 0 0;
    color: #fff;
    text-shadow: 0 1px 0 #fff;
    padding: 12px 6px;
}

.dropcap2 {
    float: left;
    font-size: 36px;
    margin-right: 10px;
    margin-top: 8px;
}

.dropcap3 {
    float: left;
    font-size: 36px;
    margin-right: 10px;
    margin-top: 8px;
    font-style: italic;
}

/*-----------------------------------------------*/
/* BOXES
/*-----------------------------------------------*/
.info, .error, .notice, .success, .message {
    border: 1px solid #bbb;
    margin-bottom: 20px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

.message_box_content {
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

.info {
    background: #D7E7F5;
    color: #5E6984;
    border-color: #AACEE6;
}

.error {
    background: #FDE9EA;
    color: #A14A40;
    border-color: #FDCED0;
}

.notice {
    background: #FFF9CC;
    color: #736B4C;
    border-color: #FFDB4F;
}

.success {
    background: #E2F2CE;
    color: #466840;
    border-color: #BFE098;
}

.message {
    background: transparent url(../images/message_bg.png) repeat 0 0;
    color: #666;
    text-shadow: 0 1px 0 #fff;
    border-color: #ccc;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.info a {
    color: #5E6984 !important;
}

.error a {
    color: #A14A40 !important;
}

.notice a {
    color: #736B4C !important;
}

.success a {
    color: #466840 !important;
}

/*-----------------------------------------------*/
/* Comments
/*-----------------------------------------------*/

#comments {
    margin: 20px 0 10px 1px;
    padding: 35px 0 0;
}

#commentform a {
    text-shadow: 0 1px 0 #fff;
}

#comments h3, #respond h3 {
    font-weight: normal;
    font-size: 16px;
    padding: 30px 0 15px 0;
    margin: 0 0 0 0;
}

#comments h3 {
    padding-top: 0;
}

#comments .image {
    float: left;
    height: 61px;
    margin-bottom: 25px;
}

#comments .image img {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    padding: 2px;
}

#comments .image a {
    float: left;
    height: 61px;
}

#comments ol {
    margin: 5px 10px 30px;
}

#comments ol.pinglist li {
    padding: 0;
    margin: 0;
    border: none;
    width: 100%;
}

#comments ol.pinglist li a {
    font-weight: normal;
}

#comments h3.pingheader {
    margin: 30px 0 15px 0;
}

#comments ol, #comments ul {
    float: left;
    background: transparent url(../images/comment_bg.png) repeat 0 0;
}

#comments ol ul {
    width: 460px;
    float: left;
    border-left: 1px dashed #ccc;
    margin: 15px 0 0 30px;
    padding: 15px 0 0 50px
}

#comments ul.children {
    background: none;
}

#comments ol li.depth-1 > ul.children {
    margin-bottom: 20px !important;
}

#comments .children .image {
    margin-left: -10px;
}


#comments ol ul ul {
    width: 428px;
    margin: 8px 0 0 20px;
}

#comments ol ul ul ul {
    width: 409px;
}

#comments ol ul ul ul ul {
    width: 355px;
}

#comments ol ul ul ul ul ul {
    width: 302px;
}

#comments ol .line {
    display: none;
}

#comments ol ul .line {
    display: block;;
    width: 30px;
    height: 50px;
    position: absolute;
    border-bottom: 1px dashed #ccc;
    margin: -15px 0 0 -59px;
}

#cancel-comment-reply-link {
    color: #ff3131 !important;
}

#comments ol ul li {
    padding: 17px 0 17px 0;
    border: none;
}

#comments ol ul .details {
    margin: 0 0 0 20px;
    float: left;
    width: 390px;
}

#comments ol ul ul .details {
    width: 310px;
}

#comments ol ul ul ul .details {
    width: 230px;
}

#comments ol ul ul ul ul .details {
    width: 198px;
}

#comments ol ul ul ul ul .details {
    width: 150px;
}

#comments ol li {
    padding: 10px 10px 0 10px;
    border-bottom: 1px dashed #ccc;
    float: left;
    text-shadow: #fff 0 1px 0;
    margin: 10px 10px 10px;
    background: none;
}

#comments ol li:last-of-type {
    border-bottom: none;
}

#comments .details {
    margin: 0 0 0 20px;
    float: left;
    width: 470px;
    color: #777;
}

#comments .details .name span.date {
    font-size: 11px;
    color: #999;
    font-style: italic;
}

#comments .details .name span.date a {
    color: #999;
    font-size: 11px;
}

#comments .details .name a {
    font-size: 12px;
}

#comments .details .name {
    margin: 0 0 10px 0;
}

#comments .details .name span.author a:hover {
    text-decoration: underline;
}

#comments .details .name span.author a, #respond a, ol.pinglist li a, #comments .details .name span.author {
    color: #444;
}

/* respond -------------- */

#respond {
    border-top: none;
    border-bottom: none;
    margin: 1px 0 0 1px;
}

#respond h3 {
    padding-bottom: 0;
}

#respond.contact {
    border: none;
    margin: 1px 0 0 1px;
    padding: 25px 25px 0 10px;
}

#respond form {
    display: block;
    float: left;
    margin: 0 10px;
}

#respond.contact form {
    margin: 0;
}

ol #respond form {
    margin: 0;
}

ol #respond {
    border: none;
    padding: 30px 0 0 0;
    float: left;
}

ol #respond, ol #respond h3 {
    width: 550px;
}

ol #respond textarea {
    width: 540px;
}

ol ul #respond, ol ul #respond h3 {
    width: 460px;
}

ol ul #respond textarea {
    width: 450px;
}

ol ul ul #respond, ol ul ul #respond h3 {
    width: 400px;
}

ol ul ul #respond textarea {
    width: 295px;
}

ol ul ul #respond {
    width: 390px;
}

ol ul ul #respond p {
    width: 400px;
}

ol ul ul ul #respond, ol ul ul ul #respond h3 {
    width: 310px;
}

ol ul ul ul #respond textarea {
    width: 270px;
}

ol ul ul ul #respond {
    width: 310px;
}

ol ul ul ul #respond p {
    width: 310px;
}

#respond p {
    float: left;
    margin: 0 0 10px 0;
}

#respond input[type="submit"] {
    margin: 10px 0 0;
}

#respond input[type="text"] {
    margin: 0 18px 0 0;
    width: 190px;
    float: left;
}

#respond textarea {
    margin: 0 0 0 0;
    width: 500px;
    float: left;
}

#respond label, .cancel-comment-reply {
    width: 100px;
    display: block;
    float: left;
    padding: 5px 0 0 0;
    color: #999;
    text-shadow: 0 1px 0 #fff;
    font-size: 11px;
}

.cancel-comment-reply {
    padding: 10px 0 10px 0;
    width: 300px;
}

#respond.contact label {
    width: 400px;
    display: block;
    float: left;
    padding: 0 0 10px 0;
}

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

#portfolio {
    margin: 10px 10px 0;
}

#portfolio h3, .portfolio.shortcode h3 {
    font-size: 24px;
}

#portfolio h3.mini_title {
    font-size: 16px;
    margin-bottom: 5px;
}

#portfolio .desc {
    margin-top: 10px;
    font-size: 11px;
}

#portfolio #filters {
    margin-bottom: 40px;
    text-align: right;
}

#portfolio #filters a.current {
    font-weight: bold;
}

#portfolio .two_third, #portfolio .one_half, #portfolio .one_third, #portfolio .one_fourth {
    margin-bottom: 40px;
}

#portfolio .thumbnail, .portfolio.shortcode .thumbnail {
    border: 5px solid #fff;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    position: relative;
}

#portfolio .thumbnail a.overlay, .portfolio.shortcode .thumbnail a.overlay {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fefefe;
    filter: alpha(opacity=0);
    opacity: 0;
    cursor: pointer;
}

#portfolio .thumbnail h3, .portfolio.shortcode .thumbnail h3 {
    filter: alpha(opacity=0);
    opacity: 0;
    background-color: #000;
    color: #fff;
    line-height: 1em;
    text-shadow: none;
    position: absolute;
    top: 50px;
    text-align: center;
    padding: 10px 10px 8px;
    cursor: pointer;
    font-weight: normal;
    font-size: 16px;
}

#portfolio .thumbnail h3 a, .portfolio.shortcode .thumbnail h3 a {
    color: #fff;
}

#portfolio .thumbnail .meta, .portfolio.shortcode .thumbnail .meta {
    position: absolute;
    bottom: 50px;
    background-color: #444;
    padding: 5px 10px;
    font-size: 10px;
    color: #fff;
    text-shadow: none;
    filter: alpha(opacity=0);
    opacity: 0;
}

#portfolio .thumbnail .meta a, .portfolio.shortcode .thumbnail .meta a {
    color: #fff;
}

#portfolio .thumbnail .meta .category, .portfolio.shortcode .thumbnail .meta .category {
    float: right;
}

#portfolio .thumbnail .meta .time, .portfolio.shortcode .thumbnail .meta .time {
    float: left;
}

#portfolio .one_col, .portfolio.shortcode .one_col {
    position: relative;
    height: 250px;
}

#portfolio .one_col h3, .portfolio.shortcode .one_col h3 {
    margin-top: 5px;
    margin-bottom: 10px;
}

#portfolio .one_col h3 a, .portfolio.shortcode .one_col h3 a {
    text-shadow: 0 1px 0 #fff;
}

#portfolio .one_col .project_desc, .portfolio.shortcode .one_col .project_desc {
    color: #999;
    text-shadow: 0 1px 0 #fff;
    line-height: 17px;
    padding-left: 10px;
}

.portfolio.shortcode .one_col .project_desc {
    color: #666;
}

#portfolio .one_col .meta, .portfolio.shortcode .one_col .meta {
    width: 272px;
    padding-left: 10px;
    font-size: 10px;
    position: absolute;
    bottom: 5px;
}

#portfolio .one_col .time, .portfolio.shortcode .one_col .time {
    float: left;
}

#portfolio .one_col .category, .portfolio.shortcode .one_col .category {
    float: right;
}

#portfolio .one_col .category a, #portfolio .one_col .meta, .portfolio.shortcode .one_col .category a, .portfolio.shortcode .one_col .meta {
    color: #999;
    text-shadow: 0 1px 0 #fff;
}

#portfolio .two_third .thumbnail, .portfolio.shortcode .two_third .thumbnail {
    width: 590px;
    height: 240px;
}

#portfolio .two_third .thumbnail h3, #portfolio .two_third .thumbnail .meta, .portfolio.shortcode .two_third .thumbnail h3, .portfolio.shortcode .two_third .thumbnail .meta {
    width: 570px;
}

#portfolio .one_half .thumbnail, .portfolio.shortcode .one_half .thumbnail {
    width: 430px;
    height: 200px;
}

#portfolio .one_half .thumbnail h3, #portfolio .one_half .thumbnail .meta, .portfolio.shortcode .one_half .thumbnail h3, .portfolio.shortcode .one_half .thumbnail .meta {
    width: 410px;
}

.portfolio.shortcode.normal .one_half .thumbnail {
    width: 280px;
    height: 140px;
}

.portfolio.shortcode.normal .one_half .thumbnail h3, .portfolio.shortcode.normal .one_half .thumbnail .meta {
    width: 260px;
}

#portfolio .one_third .thumbnail, .portfolio.shortcode .one_third .thumbnail {
    width: 270px;
    height: 140px;
}

#portfolio .one_third .thumbnail h3, #portfolio .one_third .thumbnail .meta, .portfolio.shortcode .one_third .thumbnail h3, .portfolio.shortcode .one_third .thumbnail .meta {
    width: 250px;
}

#portfolio .one_fourth .thumbnail, .portfolio.shortcode .one_fourth .thumbnail {
    width: 195px;
    height: 100px;
}

#portfolio .one_fourth .thumbnail h3, #portfolio .one_fourth .thumbnail .meta, .portfolio.shortcode .one_fourth .thumbnail h3, .portfolio.shortcode .one_fourth .thumbnail .meta {
    width: 175px;
}

.portfolio_item {
    margin-bottom: 30px;
}

/*-----------------------------------------------*/
/* Sitemap
/*-----------------------------------------------*/

.sitemap a {
    color: #666;
}

/*-----------------------------------------------*/
/*relative posts
/*-----------------------------------------------*/
.related_posts_thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    & li {
        flex-basis: 150px;
        margin: 0;
        padding: 5px;
        display: block;
        background-color: #ededed;
    }
}