header {
    padding: 15px 0;
    background-color: #ff4073;
    position: static;
    max-height: 100%;
}

section {
    margin-bottom: 20px;
}

header form#search-form {
    display: block;
    width: 100%;
}

header form#search-form input {
    background-color: transparent;
    border: 0;
    border-left: 2px solid #fff;
    padding: 0 10px;
    height: 30px;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
}

header form#search-form button[type="submit"] {
    width: 30px;
    background-image: url('../images/icons/search.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 25px auto;
    border: 0;
    cursor: pointer;
}

section#apresentation {
    padding: 50px 0;
}

section#apresentation h1 {
    font-family: 'Raleway-Black';
    font-size: 3em;
    line-height: 1em;
    letter-spacing: 5px;
    color: #01d4cb;
}

section#apresentation h1 + span {
    font-family: 'Raleway-Black';
    font-size: 1.5em;
    line-height: 1em;
    color: #404040;
    display: block;
    margin: 15px 0;
}

section#apresentation .breadcrumb {
    list-style: none;
    display: flex;
}

section#apresentation .breadcrumb  li {
    font-family: 'Raleway-Medium';
    text-transform: uppercase;
    margin-right: 10px;
    display: flex;
    align-items: center;
    line-height: 1em;
    font-size: 0.8em;
}

section#apresentation .breadcrumb  li a {
    color: #404040;
}

section#apresentation .breadcrumb  li:not(.active):after {
    content: '>';
    line-height: 1em;
    display: block;
    position: relative;
    top: -1px;
    margin-left: 10px;
}

section#categories ul.categories-list {
    list-style: none;
    display: flex;
}


section#categories ul.categories-list li {
    margin-right: 30px;
}

section#categories ul.categories-list li > a {
    font-family: 'Raleway-Medium';
    color: #01d4cb;
    text-transform: uppercase;
}

section#blog .posts article.post {
    padding: 0;
    margin-bottom: 50px;
}

section#blog .posts article.post>.post-image {
    max-height: 160px;
}

section#blog .posts article.post .post-image img {
    transition: all 0.5s ease-in-out;
}

section#blog .posts article.post:hover .post-image img {
    transform: scale(1.1);
}

section#blog .posts article.post>.post-title {
    color: #404040;
}

section#post {
    margin-top: 50px;
}

section#post h1.post-title {
    font-family: 'Raleway-Black';
    font-size: 2em;
    color: #404040; 
    margin-bottom: 15px;
}

section#post span.post-published {
    font-family: 'Raleway-Medium';
    display: flex;
    align-items: center;
}

section#post span.post-published:before {
    content: '';
    display: block;
    width: 25px;
    height: 8px;
    background-color: #01d4cb;
    margin-right: 10px;
} 

section#post article.post-content {
    margin: 30px 0;
}

section#post article.post-content img {
    margin-bottom: 15px;
}

section#post article.post-content .post-text p {
    font-family: 'Raleway-Medium';
    font-size: 15px;
    line-height: 1.5em;
    color: #505050;
    margin-bottom: 20px;
}

section#post .prev-post,
section#post .next-post {
    display: flex;
    transition: opacity 0.3s ease-in-out;
}

section#post .prev-post:hover,
section#post .next-post:hover {
    opacity: 0.8;
}

section#post .prev-post i,
section#post .next-post i {
    font-size: 4em;
    color: #c0c0c0;
}

section#post .prev-post i {
    margin-right: 15px;
}

section#post .next-post i {
    margin-left: 15px;
}

section#post .prev-post  span,
section#post .next-post  span {
    display: block;
}

section#post .prev-post span:first-child,
section#post .next-post span:first-child {
    text-transform: uppercase;
    color: #c0c0c0;
    font-size: 0.8em;
    line-height: 1.5em;
}

section#post .prev-post span:last-child,
section#post .next-post span:last-child {
    color: #404040;
    font-family: 'Raleway-Black';
    font-size: 0.9em;
}

section#post .prev-post span
{
    text-align: left;
}

section#post .next-post span {
    text-align: right;
}

section#post #post-coment {
    margin-top: 50px;
}

section#post #post-coment h1 {
    font-family: 'Raleway-Medium';
    margin-bottom: 20px;
    font-size: 2em;
    color: #404040; 
}

section#post #post-coment form input:not([type="submit"]), 
section#post #post-coment form textarea {
    border: 1px solid #bebebe;
}

.box {
    border: 2px solid #bebebe;
    border-radius: 2px;
    padding: 20px;
}

.box span.title {
    text-transform: uppercase;
    font-size: 1.2em;
    letter-spacing: 5px;
    display: block;
    text-align: center;
    font-family: 'Raleway-Black';
}

.box ul {
    list-style: none;
    margin-top: 30px;
}

.box ul.categories-list li {
    color: #01d4cb;
    text-transform: uppercase;
    margin-top: 20px;
    font-family: 'Raleway-Medium';
}

.box ul.categories-list li > a {
    color: inherit;
}

.box ul.categories-list li > a > i {
    margin-right: 5px;
}

.box ul.recentes-list li {
    font-size: 0.8em;
    margin-bottom: 20px;
}

.box ul.recentes-list li:not(:last-child) {
    border-bottom: 1px solid #bebebe;
}   

.box ul.recentes-list li:not(:last-child) > div {
    margin-bottom: 10px;
}

.box ul.recentes-list li a .thumbnail {
    width: 60px;
    height: 60px;
    overflow: hidden;
    margin: 0 10px 10px 0;
}

.box ul.recentes-list li span.recente-title {
    font-family: 'Raleway-Black';
    color: #404040;
    transition: color 0.3s ease-in-out;
}

.box ul.recentes-list li:hover span.recente-title {
    color: #01d4cb;
} 

.box ul.recentes-list li .post-info {
    margin-top: 5px;
}

.box ul.recentes-list li .post-info .post-category {
    color: #01d4cb;
}

@media(min-width: 768px) {
    section#apresentation {
        background: #fff url('../images/backgrounds/blog.png') no-repeat right center;
    }
}

@media(max-width: 767.98px){
    section#apresentation {
        background-color: #f6f6f6;
        padding: 30px 0;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    section#blog .posts article.post>.post-title {
        min-height: 60px;
    }

    section#blog .posts article.post {
        margin-bottom: 40px;
    }
}

@media (max-width: 575.98px) {
    section#blog .posts article.post>.post-title {
        min-height: 40px;
    }

    section#blog .posts article.post {
        margin-bottom: 30px;
    }

    section#blog .posts article.post>.post-image {
        max-height: 200px;
    }

    .box ul.recentes-list li {
        font-size: 1.2em;
    }

    section#post {
        margin-top: 30px;
    }
}