*{
    box-sizing: border-box;
    margin: 0;
    font-family: "Poppins", sans-serif;
}
.container2{
    background-image: url(Images/banner-2.jpg);
    background-color: black;
    background-color: rgb(0, 0, 0, 0.45);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    height: 75vh;
    width: 100%;
}
header{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.cabecalho{
    width: 100%;
    height: 8vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-around;       
}
.font-header{
    font-size: 11px;
    color: white;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
}
.color-header{
    color: #FCDC00;
}
.btn-header{
    display: flex;
    width: 32%;
    justify-content: space-between;
}
.lupa-header{
    height: 2vh;
    cursor: pointer;
}
.image-header{
    padding-right: 15%;
}
.txt-header{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 12%;
    text-align: center;
}
.txt-header > h2{
    color: white;
    font-size: 58px;
    font-weight: 600;
    line-height: 1.2;
}
.txt-header > p{
    font-size: 16px;
    color: white;
    text-align: center;
    font-weight: 300;
    line-height: 1.5;
    margin-top: 1%;
}
.btn-view{
    font-size: 14px;
    text-align: center;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 2%;
    padding: 0.5% 2%;
    background-color: #FFF;
}
#areas {
    width: 100%;
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%;

    .container {
        display: inherit;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 20%;
        height: 220px;
        background-repeat: no-repeat;
        background-size: 100% 100%;

        div {
            display: inherit;
            flex-direction: inherit;
            align-items: inherit;
            justify-content: center;
            width: 85%;
            height: 85%;
            background-color: #222222CC;
            transition: all 0.5s;
            color: white;

            h1 {
                font-size: 18px;
                text-transform: uppercase;
            }

            span {
                width: 65%;
                border: white solid 1px;
                margin: 5% 0;
            }

            p {
                font-size: 14px;
                font-weight: 300;
            }

            &:hover {
                background-color: #FCDC00CC;
            }
        }

        &:first-child {
            background-image: url("Images/cat-post-3.jpg");
        }

        &:nth-child(2) {
            background-image: url("Images/cat-post-2.jpg");
            margin: 0 1%;
        }

        &:last-child {
            background-image: url("Images/cat-post-1.jpg");
        }
    }
}

#midSection {
    width: 100%;
    height: 250vh;
    display: flex;
    justify-content: center;

    #leftColumn {
        display: inherit;
        flex-direction: column;
        width: min-content;
        margin-right: 3%;

        .row {
            display: inherit;
            height: 480px;
            margin-bottom: 1%;
            width: min-content;

            div {
                display: inherit;
                flex-direction: column;

                &:first-child {
                    width: 35%;
                    text-align: right;
                    margin-right: 15px;

                    p {
                        color: #222222;
                        font-size: 14px;

                        .yellow {
                            color: #FCDC00;
                        }
                    }

                    span:not(.yellow) {
                        color: #777777;
                        font-size: 14px;
                        margin: 5%;

                        &:hover {
                            color: #FCDC00;
                        }
                    }

                    svg {
                        width: 16px;
                        height: 16px;
                    }
                }

                &:nth-child(2) {
                    width: min-content;

                    h1 {
                        color: #222222;
                        font-size: 24px;
                        font-weight: 600;
                        margin: 5% 0 2.5% 0;
                    }

                    p {
                        color: #777777;
                        font-size: 14px;
                        margin-bottom: 2.5%;
                    }

                    a {
                        width: max-content;
                        height: min-content;
                        color: #222222;
                        font-size: 14px;
                        padding: 10px 38px;
                        transition: all .5s;
                        text-decoration: none;

                        &:hover {
                            background-color: #FCDC00;
                        }
                    }
                }
            }
        }

        #pageSelect {
            display: inherit;
            justify-content: center;
            align-items: center;

            ul {
                display: inherit;
                justify-content: center;
                width: 100%;

                li {
                    list-style: none;
                    color: #8a8a8a;
                    padding: 10px;
                    margin: 0 5px;

                    &:nth-child(3),
                    &:hover {
                        color: white;
                        background-color: #FCDC00;
                    }
                }
            }
        }
    }

    #rightColumn {
        display: inherit;
        flex-direction: column;
        align-items: center;
        width: 18.25%;

        &>div {
            width: 90%;
            display: inherit;
            flex-direction: inherit;
            align-items: inherit;
            margin-bottom: 20%;
        }

        #search {
            background-color: #FCDC00;
            border: none;
            border-radius: 26px;
            height: 41px;
            width: 90%;
            margin: 5% 0 20% 0;
        }

        #author {

            text-align: center;


            img {
                margin-bottom: 15%;
            }

            h1 {
                color: #222222;
                font-size: 18px;
                font-weight: 600;
            }

            span {
                color: #777777;
                font-size: 14px;
                margin: 6% 0 4% 0;
            }

            #icons {
                width: 40%;
                height: 14px;
                display: inherit;
                margin-bottom: 4%;

                svg {
                    fill: black;
                }
            }

            p {
                color: #777777;
                font-size: 14px;

            }
        }

        #posts {

            h1 {
                display: inherit;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 41px;
                background-color: #FCDC00;
                margin-bottom: 5%;
            }

            &>div {
                display: inherit;
                width: 100%;
                height: min-content;
                margin-top: 4%;

                div {
                    margin-left: 10px;

                    h2 {
                        color: #222222;
                        font-size: 14px;
                        font-weight: 600;
                    }

                    span {
                        color: #777777;
                        font-size: 12px;
                    }
                }
            }
        }

        &>img {
            width: 90%;
            margin-bottom: 10%;
        }

        #categories {
            h1 {
                display: inherit;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 41px;
                background-color: #FCDC00;
                margin-bottom: 5%;
            }

            ul {
                width: 100%;

                li {
                    width: inherit;
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10%;

                    p {
                        color: #777777;
                        font-size: 14px;
                    }
                }
            }
        }

        #news {
            h1 {
                display: inherit;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 41px;
                background-color: #FCDC00;
                margin-bottom: 5%;
            }

            p {
                width: 90%;
                text-align: center;
                color: #777777;
                font-size: 14px;
                margin: 5% 0 10% 0;
                line-height: 24px;
            }

            &>div {
                display: inherit;
                width: 100%;
                justify-content: center;
                margin-bottom: 5%;

                input[type="email"] {
                    height: 38px;
                    width: 100%;
                    border: none;
                }

                input[type="button"] {
                    width: 100px;
                    height: 38px;
                    background-color: #FCDC00;
                    border: none;
                }

            }

            span {
                width: 90%;
                color: #777777;
                font-size: 14px;
                text-align: center;
            }
        }

        #tags {
            flex-direction: row;
            flex-wrap: wrap;

            h1 {
                display: inherit;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 41px;
                background-color: #FCDC00;
                margin-bottom: 5%;
            }

            span {
                padding: 2px 10px;
                border: 1px solid #eee;
                color: #222222;
                font-size: 12px;
                margin: 0 8px 5px 0;

                &:hover {
                    background-color: #FCDC00;
                }
            }
        }
    }

}

#followSection {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 5% 0;
    #follow {
        margin-top: 4%;
        padding: 18px 28px;
        font-weight: 600;
        font-size: 14px;
        text-transform: uppercase;
        color: #222222;
        background-color: #FCDC00;
        margin-bottom: 3%;
    }
}

.imgs-instagram{
    margin-bottom: 0;
    display: flex;
    display: flex;
    align-items: end;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 1;
}
.imgs-instagram > img{
    width: 15vw;
}
footer{
    height: 50vh;
    background-color: #04091e;
    display: flex;
    align-items: center;
}
.div-footer{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    padding-left: 10%;
}
.footer1{
    display: flex;
    flex-direction: column;
    text-align: left;
}
.footer1 > h2{
    color: #FFF;
    font-size: 18px;
}
.footer1 > p{
    color: #777777;
    font-size: 14px;
    margin-top: 10%;
}

.footer2{
    display: flex;
    flex-direction: column;
    text-align: left;
}
.footer2 > h2{
    color: #FFF;
    font-size: 18px;
}
.footer2 > p{
    color: #777777;
    font-size: 14px;
    margin-top: 10%;
    margin-bottom: 5%;
}
.input-btn{
    display: flex;
}
.input-btn > input{
    height: 5vh;
    width: 20vw;
}
.enviar-btn{
    display: flex;
    width: 13%;
    height: 4.95vh;
    background-color: #FCDC00;
    margin-left: -1%;
    justify-content: center;
    align-items: center;
}
.enviar-btn > svg{
    height: 4vh;
}

.footer3{
    display: flex;
    flex-direction: column;
    text-align: left;
    padding-right: 15%;
}
.footer3 > h2{
    color: #FFF;
    font-size: 18px;
}
.footer3 > p{
    color: #777777;
    font-size: 14px;
    margin-top: 20%;
    margin-bottom: 10%;
}
.logos-footer{
    display: flex;
    fill: #FFF;
    align-items: center;
    justify-content: space-around;
}