/* 
Theme Name: drd-hive
Author: Emerald Dragon
Theme URI: https://www.dragonrealmsdesigns.com/wp-content/themes/drd-hive
Description: DRD Hive is a Dark color theme with honey bee hive concept background in mind. This theme is best suited for gamer theme, but can be modify to fit any other concept. Header and background images can be customize and change to the clan needs. A fully responsive design that gives your blog a late 2000s look. Built on a traditional Content Management System (CMS) concepts that has the three columns traditional formats and has been the base for the creation of Dragon Realm Designs's theme. If you like this theme, get Hive Premium -- Premium Theme features several optional sidebars, center blocks, and top/bottom blocks. (5 left sides, 5 right sides, 5 centers and a top and a bottombox) and 2 header menus, one is a part of the design and can be changed in the customizer. Has a footer text box editable in the customizer as well.
Author URI: https://www.dragonrealmsdesigns.com/
Version: 1.5.1
Requires at least: 5.9
Tested up to: 5.9
Requires PHP: 7.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, three-columns, two-columns, one-column, left-sidebar, right-sidebar, custom-menu, custom-header, custom-background, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: drd-hive
*/

/* 1) Body setup */

body {
     background-attachment: fixed;
    margin: 0 auto;
    background-color: hsl(0, 0%, 0%);
    font-family: 'Play', sans-serif;
    font-size: 17px;
    color: #adadad;
}
.head-section {
    background-image: url(../images/hdr/header1.jpg);
/*    height: 628px; */
    clear: both;
}

#headerlogo2 {
  /*header logo*/
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  margin: 0 auto;
  height: 232px;
  max-width: 100%;
  z-index: 999;
}

#headerlogo2 img {
  object-fit: contain;
  max-height: 232px;
  max-width: 100%;
}


.custom-logo {
  min-height: inherit;
}

/*----- Center Block -----*/

.centerblk {
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  flex-shrink: 0;
  font-size: 0.9em;
  margin: auto;
  padding: 5px 5px;
  border: none;
  box-sizing: border-box;
  list-style: none;
}

.centerblk h2 {
  font-size: 1.5em;
  line-height: 29px;
  min-width: 194px;
  min-height: 33px;
  height: min-content;
  margin: 0 0 20px 0;
  padding: 10px;
  font-weight: bold;
  color: var(--titles2);
  text-shadow: 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000000;
  box-shadow: inset 0px 1px 1px #505050, 0px 0px 1px #000000, 0px 0px 2px #000000, 0px 0px 2px #000000, 0px 0px 2px #000000;
  background-color: #212527;
  box-sizing: border-box;
  text-align: center;
}

.centerblk img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*----- LEFT SIDE BLOCKS -----*/

.sidebar {
  color: rgb(148, 148, 148);
  font-size: 14px;
  padding: 0em .8em .1em .8em;
  font-size: 12px;
  font-weight: bolder;
  color: #12c441;
  background-color: #1e2620;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  border: 2px solid grey;
}

.sidebar img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sidebar h2 {
  font-size: 16px;
  line-height: 29px;
  width: 100%;
  min-height: 33px;
  height: min-content;
  margin: 0px 0px 10px 0px;
  padding: 0;
  font-weight: bold;
  color: hsl(120, 89%, 45%);
  text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 4px #270000, 0px 0px 6px #ff0000;
  background-color: #3f3f3f;
  box-sizing: border-box;
  text-align: center;
}

.sidebar h2 a {
  font-weight: bold;
  color: #10e934;
}

.sidebar li {
  list-style: none;
  padding: 2px 0 30px;
}

.sidebar li li {
  padding: 2px 0px;
}

.sidebar li li::before {
  content: "\bb  ";
}

.sidebar li li li {
  padding: 3px 0 2px 10px;
}

.sidebar li li li::before {
  content: "\21b3  ";
}

.sidebar ul {
  margin: 0px;
  padding: 0;
}

.sidebar ul ul {
  margin: 2px 0 0;
}

.sidebar ul ul ul {
  border-top: 1px dotted #474747;
  margin-bottom: -3px;
}

.sidebar a {
  text-decoration: none;
  color: #838383;
  font-weight: normal;
}

.sidebar a:hover {
  color: #530000;
  text-decoration: underline;
}

.sidebar a:active,
.sidebar a:focus {
  color: rgb(255, 255, 255);
}


/*----- RIGHT SIDE BLOCKS -----*/

.sidebar2 {
  color: rgb(148, 148, 148);
  font-size: 14px;
  padding: 0em .8em .1em .8em;
  font-size: 12px;
  font-weight: bolder;
  color: #12c441;
  background-color: #1e2620;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  border: 2px solid grey;
}

.sidebar2 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sidebar2 h2 {
  font-size: 16px;
  line-height: 29px;
  width: 100%;
  min-height: 33px;
  height: min-content;
  margin: 0px 0px 10px 0px;
  padding: 0;
  font-weight: bold;
  color: hsl(120, 89%, 45%);
  text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 4px #270000, 0px 0px 6px #ff0000;
  background-color: #3f3f3f;
  box-sizing: border-box;
  text-align: center;
}

.sidebar2 h2 a {
  font-weight: bold;
  color: rgb(119, 119, 119);
}

.sidebar2 li {
  list-style: none;
  padding: 2px 0 30px;
}

.sidebar2 li li {
  padding: 2px 0px;
}

.sidebar2 li li::before {
  content: "\bb  ";
}

.sidebar2 li li li {
  padding: 3px 0 2px 10px;
}

.sidebar2 li li li::before {
  content: "\21b3  ";
}

.sidebar2 ul {
  margin: 0px;
  padding: 0;
}

.sidebar2 ul ul {
  margin: 2px 0 0;
}

.sidebar2 ul ul ul {
  border-top: 1px dotted #474747;
  margin-bottom: -3px;
}

.sidebar2 a {
  text-decoration: none;
  color: #838383;
  font-weight: normal;
}

.sidebar2 a:hover {
  color: #530000;
  text-decoration: underline;
}

.sidebar2 a:active,
.sidebar2 a:focus {
  color: rgb(255, 255, 255);
}

.post-breadcrumb {
  font-size: 16px;
  line-height: 29px;
  width: 100%;
  min-height: 33px;
  height: min-content;
  margin: 0px 0px 10px 0px;
  padding: 0;
  font-weight: bold;
  color: hsl(120, 89%, 45%);
  text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 4px #270000, 0px 0px 6px #ff0000;
  background-color: #3f3f3f;
  box-sizing: border-box;
  align: center;  
}

.main-site-container {
	max-width: 100%;
}
.main-container {
	min-height: 500px;
	padding: 25px 10px!important;
	background: #000000;
	border: 1px solid #ada8a8;
	/*border-top: none;*/
}
.main-site-content {
	flex-wrap: nowrap;
}
.col-content {
	width: 100%;
  border-top: thin solid #DFDCD9;
  border-right: thin solid #B2B0AE;
  border-bottom: thin solid #B2B0AE;
  border-left: thin solid #DFDCD9;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  border: 2px solid grey; 
}
.aside-container, .col-content, .center-blocks {
    margin-bottom: 25px;
}

.widget {
	list-style-type:none;
	margin:0;
	padding:0;
}


::-webkit-scrollbar {
  width: 15px;
}

/* Track */

::-webkit-scrollbar-track {
  background: hsl(135, 83%, 38%);
  border: 2px solid hsl(152, 84%, 13%);
}

/* Handle */

::-webkit-scrollbar-thumb {
  background: rgb(0, 36, 0);
  border-radius: 8px;
  border: 2px solid hsl(152, 84%, 13%);
  background: linear-gradient(0deg, #1b1b1b 0%, #3d3d3d 100%);
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: hsl(130, 83%, 25%);
  border-radius: 8px;
  border: 2px solid #000000;
  background: linear-gradient(0deg, #1b0000 0%, #460000 100%);
}

.title {
  padding: 0em .8em .1em .8em;
  font-size: 12px;
  font-weight: bolder;
  color: #12c441;
  background-color: #1e2620;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  border: 2px solid green;
  }

  .content {
    background: none;
    color: #b5c208;
    font: 12px;
    padding-top: 5px;
    }

.custom-logo {
  min-height: inherit;
}


.header-area {
  width: 100%;
}

#headerlogo {
  /*header logo*/
    justify-content: center;
    align-items: center;
    padding-left: 50px;
    margin: 0 auto;
    max-width: 100%;
    z-index: 999;
}

#headerlogo img {
  object-fit: contain;
/*  max-height: 150px; */
  max-width: 500px;
}

#headerlogo a:hover,
#headerlogo a:focus,
#headerlogo a:active {
  color: #ffffff;
  text-decoration: none;
}


#blog-name {
  color: #636363;
  font-size: 3.25em;
  font-style: italic;
  text-shadow: 0px 0px 1px #000000, 0px 0px 3px #000000, 0px 0px 4px #1f0000, 0px 0px 5px #380000, 0px 0px 6px #5e0000, 0px 0px 8px #770000;
}

#blog-tagline {
  color: hsl(150, 100%, 16%);
  font-size: 18px;
  text-shadow: 0px 0px 1px #000000, 0px 0px 3px #000000, 0px 0px 4px #1f0000;
}

/*---THEME MAIN HEADER NAV---*/

div.hdmainnav ul {
  padding: 0em .8em .1em .8em;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  border: 2px solid green;   
  max-width: 100%;

  font-size: 16px;
  padding: 12px;
  margin: 0;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  list-style-type: none;
}

.hdmainnav {
  width: 100%;
  padding-top: 20px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 0px 3px #000000, 0px 0px 3px #000000, 0px 0px 3px #000000;
}


div.hdmainnav li {
  padding: 5px 15px 0px 0px;
}

div.hdmainnav a {
  color: #858585;
  text-shadow: 0px 0px 2px #000000, 0px 0px 4px #000000, 0px 0px 6px #1f0000;
}

div.hdmainnav a:hover {
  color: hsl(118, 100%, 16%);
  text-decoration: underline;
  text-shadow: 0px 0px 1px #000000, 0px 0px 3px #000000, 0px 0px 4px #1f0000, 0px 0px 5px #380000, 0px 0px 6px #5e0000, 0px 0px 8px #770000;
}

div.hdmainnav a:focus {
  color: #ffffff;
  background-color: rgb(105, 0, 21);
  padding: 0px;
}

div.hdmainnav .sub-menu {
  left: -9999%;
  position: absolute;
  border-width: 0 1px 1px;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0;
  margin: 0;
  width: max-content;
  z-index: 9999;
}

div.hdmainnav .sub-menu li {
  padding-left: 5px;
  float: none;
  z-index: 9999;
}

div.hdmainnav li:hover>.sub-menu,
div.hdmainnav li:focus-within>.sub-menu {
  left: unset;
}

div.hdmainnav li.menu-item-has-children::before {
  content: " \25be";
}


/*---END MAIN NAV---*/

#header-menu {
  margin-bottom: 15px;
  padding: 15px 0;
  font-size: 14px;
  min-height: 16px;
  height: min-content;
  width: 100%;
  background-color: #1e1e1e;
  box-sizing: border-box;
  border: 2px solid grey;
}

#header-menu-content {
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 16px;
}

#header-menu-content li {
  margin: 0 10px;
  float: left;
  list-style: none;
}

#header-menu-content a {
  color: #777777;
  text-decoration: none;
  text-shadow: 0px 0px 3px #000, 0px 0px 4px #000;
}

#header-menu-content a:hover,
#header-menu-content a:active,
#header-menu-content a:focus {
  color: #878787;
  text-decoration: underline;
}

#header-menu-content .sub-menu {
  left: -9999%;
  position: absolute;
  background-color: #000;
  border-width: 0 1px 1px;
  box-sizing: border-box;
  padding: 5px;
  margin: 0;
  width: max-content;
}

#header-menu-content .sub-menu li {
  float: none;
}

#header-menu-content li:hover>.sub-menu,
#header-menu-content li:focus-within>.sub-menu {
  left: unset;
}

#header-menu-content li.menu-item-has-children::after {
  content: " \25be";
}

#header-menu-content li.menu-item-has-children:hover::after,
#header-menu-content li.menu-item-has-children:focus-within::after {
  content: " \25b4";
}

#nav-menu {
  margin-bottom: 15px;
  padding: 15px 0;
  font-size: 14px;
  min-height: 16px;
  height: min-content;
  width: 100%;
  background-color: #ec1414;
  box-sizing: border-box;
  border: 2px solid grey; 
}

#nav-menu-content {
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 16px;
}

#nav-menu-content li {
  margin: 0 10px;
  float: left;
  list-style: none;
}

#nav-menu-content a {
  color: #777777;
  text-decoration: none;
  text-shadow: 0px 0px 3px #000, 0px 0px 4px #000;
}

#nav-menu-content a:hover,
#nav-menu-content a:active,
#nav-menu-content a:focus {
  color: #878787;
  text-decoration: underline;
}

#nav-menu-content .sub-menu {
  left: -9999%;
  position: absolute;
  background-color: #000;
  border-width: 0 1px 1px;
  box-sizing: border-box;
  padding: 5px;
  margin: 0;
  width: max-content;
}

#nav-menu-content .sub-menu li {
  float: none;
}

#nav-menu-content li:hover>.sub-menu,
#nav-menu-content li:focus-within>.sub-menu {
  left: unset;
}

#nav-menu-content li.menu-item-has-children::after {
  content: " \25be";
}

#nav-menu-content li.menu-item-has-children:hover::after,
#nav-menu-content li.menu-item-has-children:focus-within::after {
  content: " \25b4";
}

/** ------------------------------------------footer section starts------------------------------------------*/

#footer {
  width: 100%;
/*  min-width: 1271px; */
  margin: auto;
}

.footer-area {
  width: 100%;
  height: 150px;
  background-image: url(images/footer.jpg);
  background-color: hsl(0, 100%, 1%);
}


/* The content box in the footer */

.fcontent {
  color: #757575;
  width: 100%;
  height: 150px;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 15px;
  text-decoration: none;
  text-shadow: 0px 0px 3px #000000, 0px 0px 3px #000000, 0px 0px 3px #000000;
  text-align: center;
  overflow: auto;
}

.fcontent a {
  color: #200000 !important;
  text-decoration: none;
  text-shadow: 0px 0px 3px #000000, 1px 1px 3px #000000, 0px 0px 3px #000000;
}

.fcontent a:hover {
  color: #ffffff !important;
  text-decoration: none;
}

.fcontent a:focus {
  color: #ffffff !important;
  text-decoration: none;
}


/* end content box */

.footer-copyright {
  width: 100%;
  height: 50px;
  background-color: #2e2e2e;
  padding: 3px;
}


/* Footer copyright text settings */

#footer-content {
  color: #a3a3a3;
  font-size: 12px;
  padding: 0px;
  margin: 5px 0px 0px 0px;
  text-align: center;
  text-shadow: 0px 0px 2px #000000, 0px 0px 2px #000000, 0px 0px 2px #000000;
}

#footer-content a:hover,
#footer-content a:active,
#footer-content a:focus {
  color: #fff;
}

i {
  color: hsl(355, 89%, 48%);
  display: inline-block;
}  

i.fa.fa-hive {
  float: left;
  align-content: center;
  color: green;
  display: inline-block;
}  

/** ------------------------------------------footer section ends------------------------------------------*/
@media (max-width: 768px)
{
	.main-site-container {
		padding-left: 0;
		padding-right: 0;
	}
		
	.main-site-content {
		flex-wrap: wrap;
	}

  .site-header, .member-menu {
    display: none !important;
  }
	/**
	 * CSS below will pevent images breaking the layout.
	 */
	img {
		max-width: 100% !important;
		height: auto;
	}

   	/**
	 * This will make center content display on top when viewing on a mobile.
	 */
	.col-content {
		order: 1;
   	}
	/**
	 * This will make the left blocks disaply directly under the center content.
	 * We do not need to change the order of the right blocks at all, So their order stays as "order-3"
	 */
	.sidebar-left {
		order: 2;
	}
	.sidebar-right {
		order: 3;
	}

	/**
	 * Force the side blocks to "100%" width
	 */
	.col-sidebar {
		padding: 0 !important;
		width: 100% !important;
	}

	.aside-container {
		width: 100% !important;
		
	}

}