@font-face 
{
    font-family:AlexBrush;
    src: url('../fonts/alexbrush/AlexBrush-Regular.ttf');

}

body{color:#222; font-family:signika;}

h1>span{color:#222!important; font-family:signika!important;}
a>h6{word-break: break-word;word-wrap: break-word;}


/* Dave Navbarro */
.nav-item.active{border-bottom:2px solid black;}

/**/
/*GENERAL IMPORTANT (links H's p's .elements)*/
a:hover
{
    color:#D3D3D3;
    text-decoration:none;
}

a {color:inherit}
.btn:hover{background-color:grey}
.bg-btnface{background-color:buttonface;}

.article-link:hover .img-captions
{
    background:rgba(32, 32, 32, 0.8);
}
.img-captions-border
{
    border-left:solid rgb(237, 41, 115) 4px; 
}

.img-captions span
{
    font-weight: 300;
    display: block;
    position: relative;
    z-index: 2;
    background: #ffffff;
    color: #222222;
    width: 100%;
}

.post p.h6 { color:rgb(33, 37, 41);}
.post p,.post ul{text-align:left; color: #6c757d}

a>span,a>div, h5{ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}

main a:hover>span{background-color:gray;}
main a:hover>div{border-color:gray; }

main .post a:hover>span{background:inherit;}
main .post a:hover>div{border-color:inherit; background-color:gray;}

.sidebar a:hover>p{color:gray!important;}
.sidebar a:hover>span{background:gray;}
.sidebar a:hover>div{color:black;}

a:hover>h1{color:gray;}
a>h1{transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}

.list-custom>li:before
{
    content:"-";
    padding-right:10px;
    padding-left:22px;
}

main h6{color: #343a40!important;}

.home-header::after {
    content: '';
    display: block;
    position: absolute;
    border-left: 4px solid #ED2973;
    width: 100%;
    height: 34px;
    bottom: 0;
    background: rgba(0,0,0,.3);
    }
.home-header-text 
{
    font-size: 24px;
    width: 90%;
    text-transform: uppercase;
    line-height: 34px;
    transform: translateY(-34px);
    margin-bottom: -24px !important;
}
.home-header-text::first-line 
{
    color: #FFFFFF;
}

.recommended-articles h5{padding-top:0;}
.h1,h1{font-size:2.2rem;}
.h2,h2{font-size:2.0rem;}
.h3,h3{font-size:1.8rem;}
.h4,h4{font-size:1.6rem;}
.h5,h5{font-size:1.4rem;}
.h6,h6{font-size:1.2rem;}
@media only screen and (max-width:575px)
{.img-captions>h3{font-size:1.2rem;}}

@media only screen and (min-width:576px)
{
    .home-header::after {height:50px;}
    .home-header-text { width: 90%; font-size: 40px;line-height: 50px;transform: translateY(-50px);margin-bottom: -40px !important;}
    .h1,h1{font-size:2.4rem;}
    .h2,h2{font-size:2.2rem;}
    .h3,h3{font-size:2rem;}
    .h4,h4{font-size:1.8rem;}
    .h5,h5{font-size:1.6rem;}
    .h6,h6{font-size:1.4rem;}
}
@media only screen and (min-width:768px)
{
    .home-header::after {height:68px}
    .home-header-text { width: 90%; font-size: 54px;line-height: 68px;transform: translateY(-68px);margin-bottom: -54px !important;}
}
@media only screen and (min-width:992px)
{
    .home-header-text { width: 100%;}
    .h6,h6{font-size:1.6rem;}
    .h5,h5{font-size:1.8rem;}
    .h4,h4{font-size:2rem;}
    .h3,h3{font-size:2.2rem;}
    .h2,h2{font-size:2.4rem;}
    .h1,h1{font-size:2.6rem}
}
@media only screen and (min-width:1200px)
{
    .home-header::after {height:78px}
    .home-header-text { width: 100%; font-size: 62px;line-height: 78px;transform: translateY(-78px);margin-bottom: -78px !important;}
}
/*HELPER functional css classes etc*/

.dotted{border-style: dotted;}
.wrap{white-space:normal}
.text-black-20{color:rgba(0,0,0,.2)}
.text-hover-gray:hover{color:grey;}

.flex-grow-2{flex-grow:2;}
.flex-grow-1{flex-grow:1;}
.font-4rem{font-size:4rem;}
.font-3rem{font-size:3rem;}
.font-2rem{font-size:2rem;}

@media only screen and (min-width:576px)
{.font-sm-3rem{font-size:3rem;}}
@media only screen and (min-width:768px)
{.font-md-4rem{font-size:4rem;}}

.w-40{width:40%;}
.w-60{width:60%;}

.square
{
    width: 120px;
    height:120px;
}
.rectbtn
{
    width:100px;
    font-size:1.5rem;
}
.squarebtn
{
    width:56px;
    height:56px;
    font-size:2.5rem;
    padding:0;
}
.top-to-bottom 
{
    border-width: 0px;
    border-style: none;
}
.border-bot{border-bottom:2px solid transparent}

.flex-basis-20{flex-basis:20%;}
.border-left-3{border-left:3px solid #dee2e6; }
.border-4-lgrey{border:9px solid rgb(235,235,235) }
.border-3-lgrey{border:3px solid rgb(235,235,235) }
.border-4-left-tran{border-left:4px solid transparent;}
@media only screen and (min-width:567px)
{
    .top-to-bottom 
    {
        border-width: 3px;
        border-style: solid;
        -webkit-border-image: 
          -webkit-gradient(linear, 0 0, 0 100%, from(rgb(235,235,235)), to(rgba(0, 0, 0, 0))) 1 100%;
        -webkit-border-image: 
          -webkit-linear-gradient(rgb(235,235,235), rgba(0, 0, 0, 0)) 1 100%;
        -moz-border-image:
          -moz-linear-gradient(rgb(235,235,235), rgba(0, 0, 0, 0)) 1 100%;    
        -o-border-image:
          -o-linear-gradient(rgb(235,235,235), rgba(0, 0, 0, 0)) 1 100%;
        border-image:
          linear-gradient(to bottom, rgb(235,235,235), rgba(0, 0, 0, 0)) 1 100%;   
    }
}
@media only screen and (max-width:767px)
{
    .border-left-3{border-left:3px solid transparent; }
}


@media only screen and (max-width: 991px)
{
    .border-right{border:none!important;}
    .border-bot{border-bottom:0.5px solid #D3D3D3;}
    .border-top-mobile{border-top:0.5px solid #D3D3D3;}
}
.img-captions
{
    transition: color .15s ease-in-out,background-color .3s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background:rgba(0,0,0,0.4);
    bottom: 0px;
}
.img-captions-border-grey
{
    border-left:solid rgb(53,53,53) 4px;
}
/*trolololo  breakpoints ;*/
@media only screen and (min-width:992px)
{
    .w-lg-20{width:20%;}
    .logo-caption
        {
            top:75px;
            right:100px;
        }
}
@media only screen and (min-width:767px)
{ 
    .w-md-50{width:50%!important}
    .w-md-85{width:85%!important;}
    
    .flex-md-grow-5{-ms-flex-positive: 5 !important;
                    flex-grow: 5 !important;}
    .w-15-md{width:15%!important}
}
@media only screen and (min-width:768px) and (max-width: 991px)
{
    .w-md-lg-75{width:75%!important}  
}
.h-40px{height:40px;}
/**/
.firstnmbr h4 span{color: #bd2130 !important;}
.firstnmbr a h2 span{color: #bd2130 !important;}

aside a h1{text-transform:uppercase}

article h2
{
    display:inline;
    font-weight: 300;
    text-transform: uppercase;
    color: #6c757d !important;
}

article h2>strong {font-weight:500; color:#222;}
article h2 span
{
    
    font-weight: 700 !important;
    padding-right: 0.5rem !important;
}

.sidebar .rank h4
{
    font-weight: 300;
    text-transform: uppercase;
    color: #6c757d !important;
}

.sidebar .rank h4>span
{
    
    font-weight: 700 !important;
    padding-right: 0.5rem !important;
}


/* text-black-20 font-alexbrush display-3 display-sm-1 */
.logo h1{
    color:rgba(0,0,0,.2);
    font-family:AlexBrush;
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2;
}
/* h6 position-absolute logo-caption font-weight-bold text-uppercase */
.logo h1 span{
    margin-top: 0;
    margin-bottom: 0.5rem;
    position: absolute !important;
    top:60px;
    right:60px;
    font-weight: 700 !important;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
  font-size: 1rem;
}


.logo-big h1{
    color:rgba(0,0,0,.2);
    font-family:AlexBrush;
    font-size: 6rem;
  font-weight: 300;
  line-height: 1.2;
}

.logo-big h1 span{
    /* h6 position-absolute logo-caption font-weight-bold text-uppercase */
    margin-top: 0;
    margin-bottom: 0.5rem;
    position: absolute !important;
    top:75px;
    right:100px;
    font-weight: 700 !important;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: inherit;
    font-size: 1.5rem;
}

.pagi a{
    padding: 10px 20px;
    background: #f0f0f0;
}

.pagi a:hover{
    color: #ffffff;
    background: #808080;
    transition: .8s;
}

.btn-archive{
    background: #808080;
}

.tags a{
    display: inline-block;
    text-decoration: underline;
}
.tags a:hover{
    color: #bd2130;
}

.tags {
    padding: 10px 20px;
    background: #f0f0f0;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  #comments .card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-bottom: none;
  }
  
  #comments .card{
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.002);
  }
  #commentform textarea, #commentform #author, #commentform #email, #commentform #url, input.comment-captcha {
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.002);
    width: 100%;
  }

  #submit{
    width: 100%;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 15px;
    padding-bottom: 15px;
    display: block;
    background: rgba(0, 0, 0, 0.002);
  }
  #submit:hover{
    -webkit-box-shadow: 0 1px 1px rgba(128, 128, 128, 0.18);
    box-shadow: 0 1px 1px rgba(128, 128, 128, 0.18);
    cursor: pointer;
  }
  
  .chip {
    display: inline-block;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
    height: initial;
    min-height: 25px;
    line-height: 25px;
    margin-bottom: 0rem;
    margin-right: .5rem;
    padding: 0px 10px;
    font-weight: 300;
    background: transparent;
    box-shadow: none;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  .chip.btn:hover{
    background: transparent;
    -webkit-box-shadow: 0 1px 1px rgba(128, 128, 128, 0.18);
    box-shadow: 0 1px 1px rgba(128, 128, 128, 0.18);
    color: #222222;
    transition: .5s;
  }

  .chip.btn a:hover{
    color: #222222;
    transition: .5s;
  }
  #comments .children .media .card-block {
    background: rgba(0, 0, 0, 0.02);
    padding: .75rem;
  }
  
  #comments .media p {
    margin-bottom: .1rem;
  }
  #reply-title small {
    display: block;
    color: #e1e1e1;
}

    .error-heading{
        color: #222222;
        font-size: 150px !important;
        text-align: center;
        position: relative;
    }
    .error-heading small{
        color: #D3D3D3;
        font-size: .5em;
        line-height: 1;
        display: block;
        margin-top: -75px;
        opacity: 0.9;

    }

    .widget-category-list{
        background: rgba(0, 0, 0, 0.02);
        text-transform: uppercase;
        font-weight: 300;
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .widget-category-list li a:hover{
        color: #222222;
        text-decoration: underline;
    }