/* -----------------------------------------------------------
                            GABARITO
----------------------------------------------------------- */
* {
    /* border: red 1px solid; */
}

/* -----------------------------------------------------------
                            RESET
----------------------------------------------------------- */
body, ul, h1, h2, h3, p, li, a  {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Fira Sans Condensed', sans-serif;
    text-decoration: none;
    font-weight: normal;
}

body {
    min-width: 100vh;
    line-height: 1.5;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* -----------------------------------------------------------
                        MENU SOCIAL HEADER
----------------------------------------------------------- */

.menu-social nav {
    position: fixed;
}

.menu-social ul {
    display: flex;
    justify-content: flex-end;

    background-color: #e64946;
}

.menu-social ul li {
    margin: 5px 10px;
}

.menu-social ul li img {
    width: 17px;
}

/* -----------------------------------------------------------
                        HEADER
----------------------------------------------------------- */
.header-logo {
    padding: 20px;
}

.header-logo h1,
.header-logo h2 {
    font-family: 'Oswald', 'sans-serif';
    font-size: 50px;
    font-weight: 800;

    color: #e64946;

    text-transform: uppercase;
}

.header-logo h2 {
    color: #292929;

    font-weight: 600;
    font-size: 22.5px;
}

/* -----------------------------------------------------------
                        MENU SITE HEADER
----------------------------------------------------------- */

.menu-site ul {
    display: flex;
    justify-content: flex-end;

    background-color: #292929;
}

.menu-site ul li {
    border-right: #555 1px solid;
    box-sizing: border-box;
}

.menu-site ul li:first-child {
    border-left: #555 1px solid;
}

.menu-site li a {
    display: block;

    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 500;

    text-transform: uppercase;

    color: #FFF;
    
    padding: 15px 25px;

    transition-property: background-color;
    transition-duration: .5s;
}

.menu-site li a:hover {
    background-color: #e64946;
    cursor: pointer;

    transition-property: background-color;
    transition-duration: .5s;
}

/* -----------------------------------------------------------
                        MAIN CONTENT
----------------------------------------------------------- */
main {
    display: flex;
    justify-content: space-around;

    box-sizing: border-box;
    padding: 20px;
    max-width: 100%;

    /* background-color: coral; */
}

.all-news {
    box-sizing: border-box;
    padding-right: 20px;
    margin: 0;
    width: 70%;

    /* background-color: cornflowerblue; */
}

.popular-videos {
    box-sizing: border-box;
    width: 30%;
    padding: 20px;

    background-color: whitesmoke
}
/* -----------------------------------------------------------
                        HEADLINE
----------------------------------------------------------- */
.all-news .headline h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 300%;
    font-weight: 600;

    margin-bottom: 20px;
}

.all-news .headline {
    margin-bottom: 30px;
}

.all-news .headline .news-title,
.news-title {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 130%;
    font-weight: 800;

    text-transform: uppercase;

    margin: 15px 0 10px;

    color: #353535;
}

p.summary {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 18px;
    font-weight: 300;
    text-align: justify;
}

.headline h4 {
    margin: 20px 0 0;
}

.source {
    display: inline-block;
}

p.source {
    font-weight: 900;
    line-height: .8;
    text-transform: uppercase;
    color: #e64946;
    border-right: #292929 1px solid;
    padding-right: 8px;
    margin-right: 3px;
}

a.source {
    font-weight: 500;
    color: #555;
}

a.source:hover {
    font-weight: 500;
    color: #292929;
}

/* -----------------------------------------------------------
                        NEWS GRID
----------------------------------------------------------- */
.news-grid {
    display: flex;
    justify-content: space-between;
}

.news {
    margin-top: 20px;
    width: 50%;
    /* background-color: cornflowerblue; */
}

.news:first-child {
    margin-right: 40px;
}

.category-title {
    font-weight: 600;
    font-size: 1.2em;

    border-bottom: 4px #e64946 solid;

    margin-bottom: 25px;
}

.news-grid .news-title {
    font-size: 120%;
    margin: 10px 0 5px;
}

.news p.summary {
    font-size: 16px;
}

.news h4,
.covid-map h4 {
    margin: 15px 0 0;
}

.covid-map,
.covid-podcast {
    margin-top: 30px;
}

.covid-map iframe,
.covid-podcast iframe {
    border: 0;   
    width: 100%;
    height: 400px;
}

.covid-podcast .news-title {
    margin-top: 0;
}

.covid-podcast iframe {
    height: 170px;
    margin-bottom: -15px;
}

.covid-podcast p.summary:not(:last-child) {
    margin-bottom: 35px;
}

/* -----------------------------------------------------------
                        POPULAR VIDEOS
----------------------------------------------------------- */

.popular-videos .video {
    margin: 20px 0 40px;
}

.popular-videos iframe {
    width: 100%;
    height: 200px;
    border: 0;
}

.popular-videos .news-title {
    font-size: 115%;
}

.popular-videos .summary {
    font-size: 16px;
}

.popular-videos h4 {
    margin: 15px 0 0;
}

.popular-videos .source {
    font-size: 90%;
}


/* -----------------------------------------------------------
                    VOLTAR PARA O TOPO
----------------------------------------------------------- */
.top {
    /* display: flex;
    align-items: center;
    justify-content: space-between; */

    /* width: 150px; */
    /* padding: 5px; */
    /* border-radius: 50px 0 0 50px; */

    position: fixed;
    right: 0;
    top: 90%;

    opacity: .4;
    
    transition-duration: .4s;
}

.top:hover {
    /* right: 0px; */
    /* background-color: #e64946; */
    transition-duration: .4s;
    /* background-image: url(../img/top-w.png); */
    opacity: .7;
}

.top img {
    width: 40px;
}

/* .top p {
    margin-right: 15px;
    font-weight: 900;
    color: #FFF;
} */


/* -----------------------------------------------------------
                            FOOTER
----------------------------------------------------------- */
#contact {
    display: flex;
    justify-content: space-around;
    flex-flow: column;

    background-color: #292929;
    color: #FFF;

    padding: 20px;

    max-width: 100%;
}

#contact h2 {
    border-bottom: #e64946 5px solid;
}

div.main-footer {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    margin: 10px 0;
}

.social-footer {
    width: 40%;
}

.social-footer .menu-social {
    margin-top: 20px;
}

.social-footer .menu-social ul {
    display: flex;
    justify-content: flex-start;

    margin-block-end: 0;
    margin-block-start: 0;

    background-color: transparent;
}

.social-footer .menu-social ul li {
    box-sizing: border-box;
    padding: 15px;
    margin: 0px 50px 0 0;
    margin-block-end: 0;
    margin-block-start: 0;
    transition-duration: .4s;
}

.social-footer .menu-social ul li img {
    width: 100%;
}

.social-footer li:hover {
    transition-duration: .4s;
    background-color: #e64946;
}

.contact-form {
    width: 50%;
}

.contact-form h2 {
    margin-bottom: 20px;
}

.contact-form form,
.input-wrapper {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.contact-form form label {
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: .8px;

    margin-top: 10px;
}

.contact-form form input, .contact-form form textarea {
    width: 100%;
    
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #292929;
    outline: none;

    font-size: 20px;
    font-family: 'Fira Sans Condensed', sans-serif;
}

.contact-form form input::placeholder,
.contact-form form textarea::placeholder {
    font-size: 20px;
    font-family: 'Fira Sans Condensed', sans-serif;
    opacity: .6;
}

.contact-form em {
    font-weight: 400;
    font-size: 16px;
}

.contact-form input.submit-buttom {
    background-color: whitesmoke;
    margin-top: 25px;
    cursor: pointer;
    transition: 400ms;
    width: 50%;
    align-self: flex-end;
}

input.submit-buttom:hover {
    background-color: #e64946;
    color: #FFF;
}

#contact h2,
#contact p {
    font-weight: 600;
    text-transform: uppercase;
}

#contact p {
    background-color: transparent;

    margin-top: 50px;
    text-align: center;

    align-self: center;
}