/* 
    Author      : baymax
    Date        : 09/24/19
    Url         : https://houraday.com/
    Github      : na
    File Name   : custom.css
    Description : Blog Website
    Version     : 0.1
*/


@media (min-width: 768px) {
    body {
      font-size: 1.2rem;
  }
}

/* BRANDING */
/*
* GREEN         #0AA049
* LIGHT GRAY    #eeeeee
*/

body {
  background-color: #f2f2f2;
  color: #6f6f6f;
}

/* Heading tag */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
}
.had-font {
  font-family: 'Open Sans', sans-serif;
}
/* Custom UI */
.brand-green-color {
  color: #0AA049;
}
.white-bg {
  background-color: #fff;
  border: 1px solid #eceaea;
}

.btn-light-gray {
  color: #fff;
  background-color: #dadada;
  border-color: #d6d4d4;
}
 .btn-light-gray:hover, .btn-light-gray:focus {
  color: #0AA049;
  background-color: #fff;
  border-color: #0AA049;
}

.bg-dark-grad {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,2b2b2b+100 */
  background: #000000; /* Old browsers */
  background: -moz-linear-gradient(top,  #000000 0%, #2b2b2b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #000000 0%,#2b2b2b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #000000 0%,#2b2b2b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2b2b2b',GradientType=0 ); /* IE6-9 */

}

/* post tag button */
.houraday-post-tag .feather-tag {
  fill: #0AA049;
}
.houraday-post-tag {
  text-decoration: none !important;
  padding: 6px 7px;
  margin-right: 0;
  margin-bottom: 4px;
  line-height: 100%;
  display: inline-block;
  color: #0AA049 !important;
  background-color: #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  font-size: .8em !important;
  border: 1px solid #0AA049;
}
.houraday-post-tag:hover,
.houraday-post-tag:focus {
  color: #fff !important;
  background-color: #0AA049;
  border: 1px solid #fff;
}
.houraday-post-tag:hover .feather-tag,
.houraday-post-tag:focus .feather-tag {
  fill: #fff;
}
/* post cat button */
.houraday-post-category {
  text-decoration: none !important;
  padding: 6px 7px;
  margin-right: 0;
  margin-bottom: 4px;
  line-height: 100%;
  display: inline-block;
  color: #0AA049 !important;
  background-color: #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  font-size: .8em !important;
  border: 1px solid #0AA049;
}
.houraday-post-category:hover,
.houraday-post-category:focus {
  color: #0AA049 !important;
  background-color: #eeeeee;
  border: 1px solid #0AA049;
}
.houraday-post-category .feather-folder-plus {
  fill: #fff;
}
.houraday-post-category:hover .feather-folder-plus,
.houraday-post-category:focus .feather-folder-plus {
  fill: #0AA049;
}

/* mobile toggler */
.toggler-menu-button {
  background-color: #0AA049;
}
.houraday-btn-link {
  padding: 6px 7px;
  margin-right: 0;
  margin-bottom: 4px;
  line-height: 100%;
  display: inline-block;
  color: #DADADA;
  -webkit-border-radius: 3px;
  font-size: 12px !important;
}



/* =============== Page header =================== */
  
/* Site Logo, Branding */  
.header-logo {
  max-width: 150px;
}

/* Home Page Carousel */  
 

/* =============== Main Page Content =================== */

/* # Secondary (Sidebar) */
aside#secondary {
  background-color: #fff;
  border: 1px solid #eceaea;
}

#secondary .widget {
  margin-bottom: 3em;/* 16px = 1rem */
  margin-bottom: 46px;
}

#secondary .widget > h2 {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 25px;
  margin-top: 0;
  color: #636467;
}
.widget ul {
  padding: 0;
  line-height: 18px;
  font-size: 14px;
}
.widget ul,
.widget ol {
  margin-top: 0;
  margin-bottom: 10px;    
}
.widget ul li {
  list-style: none;
  border-bottom: 1px solid #F2F2F2;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.widget a {
  color: #abaaaa;
}


/* =============== Page Footer =================== */
.footer-menu-box a.nav-link {
  color: #FFF;
}


/* Extra */

@media (max-width: 575.98px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 

    /* testing line here TODOS: to be removed */
    /* background-color: green; */

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

    /* testing line here TODOS: to be removed */
    /* background-color: orange; */

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

}