article > header {
    border-bottom: solid 1px #ccc;
    padding: 10px;
    margin: 5px 0;
}

/*#region article.content-details */
article.content-details {
    background: #FFF;
}

article.content-details > header {
}

article.content-details > header > h1 {
    font-size: 20px;
    margin: 0;
}


article.content-details > div {
}

article.content-details > div > div[data-type=meta] {
    margin: 0 15px;
}

article.content-details > div > div[data-type=image] {
    text-align: center;
}

article.content-details > div > div[data-type=image] > img {
    width: 100%;
}

article.content-details > div > div[data-type=video] {
    text-align: center;
}

article.content-details > div > div[data-type=video] > video {
    width: 100%;
}

article.content-details > div > div[data-type=content] {
    padding: 0 15px;
    margin-top: 15px;
}

article.content-details > div > div[data-type=share] {
    border-top: solid 1px silver;
    text-align: left;
    padding: 10px;
}

article.content-details > div > div[data-type=tags] {
    padding: 10px;
}

article.content-details > div > div[data-type=tags] > a {
    border: solid 1px silver;
    display: inline-block;
    font-size: 12px;
    background: #f8f8f8;
    line-height: 23px;
    margin: 5px 0 0 5px;
    padding: 0 10px;
    color: #83868a;
    border: 1px solid #e5e5e5;
    transition: all .2s ease-in-out 0s;
}

article.content-details > div > div[data-type=tags] > a:hover {
    color: #23527c;
    text-decoration: underline;
}

/*#endregion */

/*#region ul.path */
ul.path {
    background: #F9F9F9;
    margin: 0;
    padding: 10px 20px;
    list-style-type: none;
    width: 100%;
}

ul.path > li {
    margin: 0;
    display: inline-block;
}

ul.path > li > a {
    font-size: 14px;
    display: block;
}

ul.path > li:last-child {
    float: right;
    text-decoration: none;
}

ul.path > li > a {
    text-decoration: none;
}


html[dir='rtl'] ul.path > li:last-child {
    float: left;
}

html[dir='rtl'] i.fx-right::before{
    transform: rotate(180deg);
}

/*#endregion */

/*#region ul.similars */

ul.similars {
    border: solid 1px #FFF;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
}

ul.similars > li {
    display: inline-block;
    width: 20%;
    position: relative;
    float: left;
    overflow: hidden;
    padding: 5px;
}

ul.similars img {
    width: 100%;
    height: 100%;
}

ul.similars > li a {
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

ul.similars > li a span {
    color: #000;
    bottom: 0px;
    width: 100%;
    display: block;
    padding: 1px;
    font-size: 12px;
    text-decoration: none;
}


/*#endregion */

/*#region ul.side */

ul.side {
    border: solid 1px #FFF;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
}

ul.side > li {
    display: inline-block;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 5px;
    margin-bottom: 15px;
    border: solid 1px #ccc;
    padding: 10px;
}

ul.side img {
    width: 100%;
    height: 100%;
}

ul.side > li a {
    width: 100%;
    text-decoration: none;
}

ul.side > li a span {
    color: #000;
    width: 100%;
    display: block;
    padding: 1px;
    font-size: 16px;
    text-decoration: none;
}

ul.side > li i {
    color: #ccc;
    width: 100%;
    display: block;
    font-size: 12px;
}



/*#endregion */

/*#region ul.socials */
ul.socials {
    padding: 0;
    margin: 0;
    display: inline-block;
}

ul.socials > li {
    float: left;
    margin: 0 2px;
    list-style-type: none;
}

ul.socials > li > a {
    display: block;
    width: 37px;
    height: 100%;
    font-size: 25px;
    color: #FFF;
    padding: 4px;
    text-align: center;
    transition: all linear .2s .01s;
}

ul.socials > li > a.fa-facebook {
    background: #3B5998;
}

ul.socials > li > a.fa-google-plus {
    background: #DC4E41;
}

ul.socials > li > a.fa-twitter {
    background: #1DA1F2;
}

ul.socials > li > a.fa-pinterest {
    background: #CA3737;
}

ul.socials > li > a.fa-linkedin {
    background: #1686B0;
}

ul.socials > li > a.fa-telegram {
    background: #33AAE0;
}

ul.socials > li > a.fa-instagram {
    background: #CD307B;
}

ul.socials > li:hover > a {
    opacity: .7;
    text-decoration: none;
    margin-top: -5px;
}
/*#endregion */

/*#region responsive */

/* Monitor */
@media (min-width: 768px) and (max-width: 992px) {
}

/* Tablet */
@media (min-width: 576px) and (max-width: 768px) {
    article.content-details img {
        width: 100%;
    }

    article.content-details > div > div[data-type="content"] {
        padding: 0;
    }
}

/* Phone */
@media (max-width: 576px) {
    ul.path a {
        font-size: 12px !important;
        ;
    }

    ul.path > li:first-child {
        display: none;
    }

    article.content-details > header {
        font-size: 15px;
    }

    article.content-details > div > div[data-type="content"] {
        padding: 0;
    }

    article.content-details img {
        width: 100%;
    }

    article > header {
        font-size: 15px;
    }
}

/*#endregion */
