/*
Theme Name: BHD Storage Solutions Theme Final
Author: The 23digital Team
Author URI: https://www.23digital.com.au/
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: 23digital
*/

/* Bolg ********************************/

.topbar_section { margin-bottom: 25px; }
.topbar_section .topbar_left { float: left }
.topbar_section .topbar_right { float: right }
.topbar_section .form-control, .topbar_section .topbar_title { display: block; width: 100%; height: 45px !important; padding: 0 15px; font-size: 16px; line-height: 1.5; color: #333; background-color: #fff; border: 2px solid #ddd; border-radius: 0; position: relative; padding-right: 30px; font-weight: 600 }
.topbar_section .select_arrow i, .topbar_section .topbar_title i.fas { right: 10px !important; }
.topbar_section .topbar_title { line-height: 41px; min-width: 160px; }
.topbar_open { position: absolute; z-index: 10; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.3); padding: 20px 20px 20px 20px; max-width: 310px; width: 100%; }
.topbar_open ul { margin: 0; padding: 0; }
.topbar_open ul li:before { display: none }
.topbar_open ul li a { color: #333; display: block; font-size: 15px; }
.archives_open.topbar_open { right: 15px; }
.topbar_open ul li.selected a, .topbar_open ul li.active a { color: #000 }
.topbar_section .form-control:focus { outline: none; box-shadow: none; }
.blog_detail_page .topbar_open { bottom: 46px; }
.blog_detail_page .topbar_section { margin: 10px 0 0 0; padding: 20px 0 0 0; border-top: 1px solid #ccc; }
.stories_box_section { border-top: 1px solid #ddd; margin: 40px 0 0 0; padding: 40px 0 0 0; }
.stories_box_section:first-child { margin-top: 0 !important; }
.stories_box { height: 210px; position: relative; padding: 0 0 0 239px; display: flex; align-items: center; flex-wrap: nowrap; }
.stories_box .stories_img_main { position: absolute; left: 0; top: 0; width: 210px; height: 210px; }
.stories_box .stories_img_main:before { content: ""; opacity: 0; z-index: 1; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; border-radius: 0; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s;    background: rgba(0,0,0,0.6);}
.stories_box .stories_img_main .stories_img { position: relative; display: block; overflow: hidden; padding-bottom: 100%; }
.stories_box .stories_img_main .stories_img img { position: absolute; left: 50%; right: 0; top: 50%; transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: auto; height: 100%; }
.stories_box .stories_img_main .stories_img:before { content: ""; z-index: 2; margin: 0 auto; width: 3px; height: 100%; opacity: 0; pointer-events: none; background: #fff; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; }
.stories_box .stories_img_main .stories_img:after { content: ""; z-index: 2; margin: 0 auto; width: 100%; height: 3px; opacity: 0; pointer-events: none; background: #fff; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; }
.stories_box .stories_content_main .stories_title_main { padding: 0 0 5px 0; margin-bottom: 10px; }
.stories_box .stories_content_main .stories_title_main .stories_title { font-size: 18px; color: #000; font-weight: 600; line-height: normal; transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; }
.stories_box .stories_content_main .stories_text { position: relative; overflow: hidden; height: 60px; }
.stories_box .stories_content_main .stories_text p { margin: 0; line-height: 30px;display: none; }
.stories_btn_main { margin-top: 12px; }
.date_main { font-size: 16px; font-weight: 400; color: #666; margin: 5px 0 0 0; position: relative; padding: 0 0 0 25px; }
.date_icon { background-position: -330px -55px; width: 18px; height: 19px; display: inline-block; margin-right: 10px; position: absolute; left: 0; top: 1px; }
.blog_detail_main { border-top: 1px solid #ddd; margin-top: 0; padding-top: 20px; }
.blog_detail_title .date_main { margin-top: 15px; }
/* .blog_detail_content img { float: none; width: 100%; max-width: 100%; margin: 20px 0; } */
.date_main svg {width: 19px;display: inline-block;vertical-align: middle;position: absolute; left: 0;top: -5px;}
.date_main svg path {fill: #000;}
.topbar_open ul li { padding: 0; line-height: 1.5; }
.topbar_open ul li + li { margin-top: 12px; }
.blog_detail_title {padding: 20px 0 30px 0;}
.blog_detail_content object {
    width: 100%;
    height: 1250px;
}

/* End of Blog ********************************************/

.blog_listing_page .latest_post_click i.fas,
.blog_listing_page .archives_click i.fas { pointer-events: none; font-size: 24px; color: #606060; position: absolute; right: 15px !important; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.blog_listing_page .latest_post_click,
.blog_listing_page .archives_click { padding-right: 40px; font-size: 15px; color: #495057; font-weight: 400; border: 1px solid #bbb; cursor: pointer; }

@media (max-width:1024px) {
.blog_detail_content object {    width: 100%;    height: 500px;	overflow-x: scroll;}	
}
@media (max-width:575px) {
.topbar_section .topbar_right { margin-top: 10px; }
.topbar_section .topbar_left, .topbar_section .topbar_right { float: left !important; width: 100%; }
.topbar_section { margin-bottom: 25px; max-width: 320px; margin: 0 auto 15px; }
.stories_box_section:first-child { margin-top: 0 !important; border: 0; padding-top: 15px; }
.topbar_open { position: relative; max-width: 100%; box-shadow: none; border: 2px solid #ddd; border-top: 0; }
.archives_open.topbar_open { right: 0; }
.stories_box { height: auto; position: relative; padding: 0; display: block; align-items: inherit; }
.stories_box .stories_img_main { position: relative; left: 0; top: 0; width: 100%; height: auto; margin: 0 0 20px 0; }
.stories_box_section { margin: 25px 0 0 0; padding: 30px 0 0 0; }
.stories_box_section { margin: 25px auto 0 auto; max-width: 320px; }     
.topbar_section .topbar_right { margin-top: 10px; }
.topbar_section .topbar_left, .topbar_section .topbar_right { float: left !important; width: 100%; }
.topbar_section { max-width: 320px; margin: 0 auto 15px; padding: 0 0 15px 0; }
.topbar_open { position: relative; max-width: 100%; box-shadow: none; border: 2px solid #ddd; border-top: 0; }
.archives_open.topbar_open { right: 0; }
}

@media (min-width: 1025px) {
.stories_box:hover .stories_img_main:before { opacity: 1; }
.stories_box:hover .stories_img_main .stories_img:before { height: 50px; opacity: 1; }
.stories_box:hover .stories_img_main .stories_img:after { width: 50px; opacity: 1; }
.stories_box:hover .stories_content_main .stories_title_main .stories_title { color: #606060; }

}