/* Festival MultiRioFilme 2019 - Rodrigo Pereira - Setembro/2019 */

/* DEFINIÇÕES GERAIS */
html { scroll-behavior: smooth; }
body, p { margin: 0; padding: 0; overflow-x: hidden; }
a { text-decoration: none; }
img { max-width: 96vw; }

@font-face { font-family: GothamLight; src: url('Gotham-Light.otf'); }
@font-face { font-family: GothamBook; src: url('Gotham-Book.otf'); }
@font-face { font-family: GothamMedium; src: url('Gotham-Medium.otf'); }
@font-face { font-family: GothamItalic; src: url('Gotham-MediumItalic.otf'); }

.img-flutuante { position: absolute; z-index: 1; }
.img-flutuante img { max-width: 20vw; }

/* HEADER */
.header {
    background-color: #114275;
    display: flex;
    flex-direction: column;
    padding-top: 30px;
    align-items: center;
    position: relative;
    z-index: 10;
}

@media (max-width: 820px){
    .header {
        flex-direction: row;
        justify-content: space-between;
        width: 85vw;
        padding-left: 5vw;
        padding-right: 10vw;
    }
}

.header-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 820px;
    padding-top: 20px;
    padding-bottom: 10px;
}

@media (max-width: 820px){
    .header-nav {
        display: none;
    }
}

.header-nav-link {
    padding: 8px 30px;
    text-transform: uppercase;
    color: #FFF;
    font-size: 24px;
    border-radius: 5px;
    font-family: "GothamMedium";
    font-size: 16pt;
}

.header-nav-link1 { background-color: #E26E50; }
.header-nav-link2 { background-color: #D59535; }
.header-nav-link3 { background-color: #207CA0; }
.header-nav-link1:hover, .header-nav-link2:hover, .header-nav-link3:hover { background-color: #0B375E; cursor: pointer; }

.header-separador {
    border-width: 75px 50vw 0 50vw;
    border-color: #114275 transparent transparent transparent;
    border-style: solid;
    width: 0;
    height: 0;
    position: absolute;
    z-index: 10;
}

.mobile-nav {
    background-color: #49BDE6;
    display: none;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 200px;
    width: 100vw;
    padding-top: 70px;
    position: relative;
    z-index: 3;
}


/* CONTEÚDO */
.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.content-l1 {
    background-image: url('background-topo-Home.jpg');
    background-position: center -100px;
    background-size: 150%;
}

@media(max-width: 944px){
    .content-l1 {
        background-size: cover;
    }
}

.content-l1-texto {
    background-color: #00A551;
    padding: 25px;
    color: #FFF;
    border-radius: 10px 10px 0 0;
    max-width: 850px;
    margin-top: 50px;
    text-align: center;
}

.content-l1-texto .titulo { font-family: "GothamMedium"; font-size: 30px; margin-bottom: 20px; }
.content-l1-texto .conteudo { font-family: "GothamLight"; font-size: 24px; line-height: 36px; margin-bottom: 20px; }
.content-l1-texto .botoes { font-family: "GothamMedium"; font-size: 26px; background-color: #FFCB05; padding: 15px 0; width: 350px; border-radius: 10px; margin-top: 20px; }

.content-l2, .content-l4, .content-l5, .content-l6, .content-l7 { padding: 40px 0; }

.content-l2 .container { max-width: 850px; text-align: center; }
.content-l2 .titulo { font-family: "GothamMedium"; font-size: 30px; margin-bottom: 20px; color: #00A551; }
.content-l2 .conteudo { font-family: "GothamLight"; font-size: 24px; line-height: 36px; margin-bottom: 20px; color: #808285; }

.content-l3 { background-color: #00A551; color: #FFF; font-family: "GothamMedium"; font-size: 30px; }
.content-l3 .container { max-width: 1200px; padding: 40px 0; text-align: center; }

.content-l4 { background-color: #FFCB05; color: #114275; background-image: url("film-background-inscricao.png"); background-position: -100px calc(50% + 120px); background-repeat: no-repeat; }
.content-l4 .container { max-width: 850px; text-align: center; }
.content-l4 .titulo { font-family: "GothamMedium"; font-size: 30px; margin-bottom: 20px; }
.content-l4 .conteudo { font-family: "GothamLight"; font-size: 24px; line-height: 36px; margin-bottom: 20px; }
.content-l4 .botoes { font-family: "GothamMedium"; font-size: 26px; background-color: #00A551; color: #FFF; padding: 15px 0; width: 350px; border-radius: 10px; margin-top: 20px; }
.content-l4 .botoes:hover { background-color: #0B375E; }

.content-l5 { background-color: #9DDDF9; color: #114275; background-image: url("film-background-Acompanhe.png"); background-position: 110% center; background-repeat: no-repeat; }
.content-l5 .container { max-width: 850px; text-align: center; }
.content-l5 .titulo { font-family: "GothamMedium"; font-size: 30px; margin-bottom: 20px; }
.content-l5 .botoes { font-family: "GothamMedium"; font-size: 26px; background-color: #124175; color: #FFF; padding: 15px 0; width: 350px; border-radius: 100px; margin-top: 20px; line-height: 30px; }
.content-l5 .botoes:hover { background-color: #0B375E; }
.ico-yt { display: inline-block; background-image: url('icone-youtube.png'); background-size: contain; width: 35px; height: 20px; background-position: center; background-repeat: no-repeat; }
.ico-fb { display: inline-block; background-image: url('icone-facebook.png'); background-size: contain; width: 35px; height: 20px; background-position: center; background-repeat: no-repeat; }
.ico-ig { display: inline-block; background-image: url('icone-instagram.png'); background-size: contain; width: 35px; height: 20px; background-position: center; background-repeat: no-repeat; }
.ico-tw { display: inline-block; background-image: url('icone-twitter.png'); background-size: contain; width: 35px; height: 20px; background-position: center; background-repeat: no-repeat; }

.content-l6 { background-color: #207D9F; color: #FFF; }
.content-l6 .container { width: 850px; text-align: center; }
@media (max-width: 850px){
    .content-l6 .container { width: 100vw; text-align: center; }
}
.content-l6 .titulo { font-family: "GothamMedium"; font-size: 30px; margin-bottom: 20px; }
.content-l6 .botoes { font-family: "GothamMedium"; font-size: 26px; background-color: #80C5EF; color: #124175; padding: 15px 0; width: 350px; border-radius: 100px; margin-top: 20px; }
.content-l6 .botoes:hover { background-color: #FFF; }

.content-l7 { background-color: #124175; color: #FFF; }
.content-l7 .container { max-width: 850px; text-align: center; }
.content-l7 .titulo { font-family: "GothamMedium"; font-size: 30px; margin-bottom: 20px; }
.content-l7 .botoes { display: inline-block; font-family: "GothamMedium"; font-size: 20px; background-color: #FFF; color: #114275; padding: 15px 0; width: 500px; border-radius: 100px; margin-top: 20px; }
.content-l7 .botoes:hover { background-color: #F7B63D; }
@media (max-width: 550px){
    .content-l7 .botoes {
        width: 95vw;
    }
}

/* FOOTER */
.footer {
    background-color: #E7E8EA;
    color: #4C86B5;
    font-family: "GothamMedium";
    font-size: 30px;
    display: flex;
    width: 100%;
    padding: 40px 0;
    justify-content: space-evenly;
    align-items: flex-start;
    flex-wrap: wrap;
}

.footer-sessao {
    display: flex;
    flex-direction: column;
}

.footer-icones {
    display: flex;
    flex-direction: row;
    border-top: 1px solid #4C86B5;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    flex-wrap: wrap;
}

@media (max-width: 820px){
    .footer-sessao {
        align-items: center;
        margin-top: 50px;
    }
    .footer-icones {
        flex-direction: column;
        width: 90vw;
    }
}

.footer-icones div { padding-right: 30px; }
.footer-icones .ultimo { padding-right: 0; }
@media (max-width: 820px){
    .footer-icones div { padding-right: 0; }
}


/* OVERRIDES */
@media (max-width: 820px){
    .hide_if_mobile { display: none; }
    .hide_if_desktop { display: block; }
}

@media (min-width: 821px){
    .hide_if_mobile { display: block; }
    .hide_if_desktop { display: none; }
}