// Nao escrever nessa folha se nao for buildar. 

/*

    Theme Name: IAP

    Theme URI:http://www.capiba.com.br/

    Author:Capiba

    Author URI:http://www.capiba.com.br/

    Description: Tema desenvolvido pela Capiba para o site IAP

    Version:1.0

    Developer: Pedro Rago
   
   Institucional  Eventos   Notícias  Artigos   TV IAP  Revista

    IAP

    http://www.capiba.com.br/


    Os direitos sobre este site e tema, são de propriedade de IAP, desenvolvido pela empresa Capiba.



@import 'css/reset.css'
@import 'css/slick-theme.scss'
    

$blueDefault: #06234a
$yellowDefault: #d9a61c
$blueActive: #04152b
$bg: #efefef
$textColor: #5e5e5e
$yellowActive: #b78b13
$h2Size: 28.5px

@mixin padidng($top, $bottom)
    padding-top: $top
    padding-left: 7.4em 
    padding-right: 7.4em 
    padding-bottom: $bottom

    @media(max-width: 1336px)
       padding-left: 7em 
       padding-right: 7em 

    @media(max-width: 988px)
        padding-left: 4em
        padding-right: 4em

    @media(max-width: 500px)
        padding-left: 2em
        padding-right: 2em

@mixin botao($background, $cor, $largura, $altura, $border, $active)
    background: $background
    color: $cor
    font-size: 18.5px
    letter-spacing: 0.37px
    width: $largura
    display: flex
    align-items: center
    justify-content: center
    height: $altura
    border-radius: 4px
    transition: .3s ease-out
    border: $border

    &:hover
        background: $cor
        color: $background

    &:active
        background: $active
        font-size: 17.5px
        line-height: 4em
        color: #fff
    
    @media(max-width: 500px)
        font-size: 16.5px
        width: 157px

@mixin prefixo($propriedade, $valor)
    -webkit-#{$propriedade}: $valor
    -moz-#{$propriedade}:    $valor
    -ms-#{$propriedade}:     $valor
    -o-#{$propriedade}:      $valor
    #{$propriedade}:         $valor

@mixin legend($color)
    color: $color
    font-size: 28px
    line-height: 30.5px
    font-weight: 300

@mixin title($color)
    font-weight: 300
    font-size: 61.5px
    line-height: 1.4em
    color: $color

@mixin subtitulo($color)
    font-size: 48.5px
    font-weight: 300
    line-height: 1.4
    color: $color

    @media(max-width: 768px)
        font-size: 35.5px

    @media(max-width: 500px)
        font-size: 30.5px


@mixin content($last-child, $boxWidth, $boxHeight, $spacing, $radius)
    display: flex
    align-items: center
    flex-wrap: wrap

    .ContentBox
        position: relative
        width: $boxWidth
        height: $boxHeight
        margin-right: 30px
        border-radius: $radius
        
        &:nth-child(#{$last-child})
            margin-right: 0em

@mixin text($color)
    color: $color
    font-size: 13px
    line-height: 22px
    font-weight: 400

@mixin overlay($background, $opacity)
    width: 100%
    height: 100%
    background: $background
    position: absolute
    left: 0
    top: 0
    opacity: $opacity
    color: #fff
    display: flex
    align-items: center
    justify-content: center
    z-index: 1

@mixin filter($height)
    background: #2d496f
    border-right: 1px solid #d9a61c
    border-bottom: 1px solid #d9a61c
    border-top: 1px solid #d9a61c
    height: $height
    width: 22.88em
    display: flex
    flex-direction: column
    justify-content: center

body
    overflow-x: hidden

a, input, button, textarea, select, div, section
    &:focus
        outline: none

a
    text-decoration: none

h6, h5, h4, h3, h2, h1, a, p, legend, label, div, span, li, i, button, input, textarea
    font-family: Raleway

.container
    @include padidng(63px, 63px)


.Subtitle
    display: flex
    align-items: center
    margin-bottom: 25px

    h2
        @include subtitulo($blueDefault)
        margin-left: 27px
.Content
    width: 66%
    @include padidng(0px, 0px)
    padding-left: 3.4em

    @media(max-width: 768px)
        padding-left: 2em

    @media(max-width: 500px)
        width: 85%
        margin-top: 3em

    @media(max-width: 500px)
        margin-top: 2em
    
    @media(max-width: 320px)
        width: 80%

.gray
    width: 100%
    height: 100%
    position: fixed
    background: #000
    transition: .3s ease-out
    opacity: 0
    z-index: -1

.activeGray
    z-index: 500 !important
    opacity: 0.7 !important

#PageEvents
    .EventsBox
        height: auto !important
        max-height: 22.5em    

        .EventosImg
            img
                width: 100% !important
                height: auto !important

@media(max-width: 425px)
    #PageEvents
        .EventsBox
            .EventosDesc
                h3
                    font-size: 17px !important
@media(max-width: 320px)
    #PageEvents
        .EventsBox
            .EventosImg
                height: 170px !important
            
            .EventosDesc
                h3
                    height: 5.2em !important

.CarouselImage
    width: 100%
    display: flex
    margin-top: 67px
    
    .slick-dots
        bottom: -3.5em
        
        .slick-active button
            background: $blueDefault !important

    .CarouselBox
        width: 379px
        height: 258px
        display: flex
        align-items: center
        justify-content: center
        overflow: hidden
        cursor: pointer
        position: relative

        .overlay
            @include overlay(rgba(6, 35, 74, 0.8), 0)
            transition: .3s ease-in-out
            transition-delay: .2s

            p
                color: #fff !important
                font-weight: 300 !important
                font-size: 25px !important
                line-height: 1.3 !important
                text-align: center !important

                @media(max-width: 1024px)
                    font-size: 20px !important

        img
            height: 100%
            transition: .3s ease-in-out

        &:hover
            img
                transform: scale(1.1)

            .overlay
                opacity: 1
.Modal
    border-radius: 7px
    padding: .4em .4em
    position: fixed
    width: 41em
    height: 26em
    z-index: 9999999
    left: 0
    right: 0
    top: 0
    bottom: 0
    margin: 0 auto
    background: #fff
    margin-top: 8em
    display: none
    img
        width: 100%
        height: 100%

    i
        position: absolute
        color: $yellowDefault
        background: $blueDefault
        padding: .5em
        border-radius: 50%
        right: -.7em
        cursor: pointer
        top: -.7em
        transition: .3s ease-out
        
        &:active
            background: $blueActive

.divBtn
    width: 100%
    display: flex
    align-items: center
    justify-content: center

    .btn-more  
        @include botao($blueDefault, #fff, 170px, 37px, 1px solid $yellowDefault, $yellowActive)
        margin:0 auto
        margin-top: 46px

        @media(max-width: 500px)
            margin-top: 1em

.NoticiasContent

    .NoticiasBox
        background: #fff
        overflow: hidden


        .NoticiasIMG
            height: 45%
            width: 100%
            display: flex
            align-items: center
            justify-content: center
            overflow: hidden
            position: relative

            img
                height: 100%

            .overlay
                @include overlay(rgba(6, 35, 74, 0.8), 0)
                transition: .3s ease-in-out
                transition-delay: .5s

                p
                    color: #fff
                    font-weight: 300
                    font-size: $h2Size
            
        .NoticiasDesc
            padding: 26px 26px
            display: block
            
            h3
                color: $blueDefault
                font-size: 20px
                line-height: 1.5
                font-weight: 700
                margin-bottom: 16px
                margin-top: 0px
            
            p
                @include text($textColor)
                

        &:hover
            .overlay
                opacity: 1


.TvContent
    @include content(3n, 350px, 469px, 30px, 4px)

    .btn-more  
        @include botao($blueDefault, #fff, 170px, 37px, 1px solid $yellowDefault, $yellowActive)
        margin:0 auto
        margin-top: 46px

// Aqui começa o footer

footer
    width: 100%
    height: 22.000em
    background: $blueDefault
    position: relative

    .container
        @include padidng(0px, 0px)
        display: flex
        align-items: center
        height: 100%

    .footerbg
        position: absolute
        margin: 0 auto
        top: 0
        max-width: 47.2em
        left: 0
        right: 0
    
    main
        display: flex
        align-items: center
        justify-content: space-between
        z-index: 1
        width: 100%

        .FooterContato
            margin-top: 44px

        .SiteMap
            z-index: 1
            width: 33%
            margin-bottom: 2.7em

            ul
                display: flex
                flex-direction: column
                flex-wrap: wrap
                height: 10em

                li
                    width: 130px
                    margin-right: 59px
                
                #menu-item-59
                    height: 100%
                    width: 26px
                    margin-right: 18px
                    background-image: url('http://iap/wp-content/themes/IAP/img/site-map.png')
                    background-repeat: no-repeat

                    a
                        color: transparent

        .Localization
            z-index: 1
            display: flex
            flex-direction: column
            width: 30.5%
            margin-top: 1.5em

            span
                display: flex
                justify-content: space-between
                align-items: flex-start
                width: 13.5em

                img
                    margin-right: 15px

            .spanContato
                width: auto
                justify-content: flex-start
                margin-bottom: 11px

        a, p
            color: #f2f2f2
            font-size: 13.5px
            line-height: 22px
        h2
            font-weight: 300
            color: #fff
            font-size: $h2Size
            line-height: 30px
            margin-bottom: 22px

        .logoFooter
            width: 17%
#Rodape
    height: 71px
    background-color: #2d4a71
    border-bottom: 6px solid #06234a
    @include padidng(0px, 0px)
    display: flex
    align-items: center
    justify-content: space-between

    .redes
        display: flex
        align-items: center
        a
            border: 1px solid #fff
            border-radius: 50%
            width: 44px
            height: 44px
            display: flex
            align-items: center
            justify-content: center

            &:nth-child(1)
                margin-right: 22px
        p
            color: #fff
            font-size: 13.5px
            font-weight: 300
            margin-left: 54px
// Aqui começa o Header

header
    height: 7.281em
    display: flex
    align-items: center
    justify-content: space-between
    @include padidng(0px, 0px)
    padding-right: 0px !important
    border-bottom: 3px solid #d2d2d2

    .HeaderInfos
        height: 100%
        display: block
        width: 78%

        .ContactBar
            @include padidng(0px, 0px)
            padding-left: 0px !important
            height: 1.813em
            background: #fff
            display: flex
            align-items: center
            flex-direction: row-reverse
            
            .ContacToggle
                height: 100%
                display: block
                width: 5em
                position: relative
                cursor: pointer

                &:hover
                    i
                        transform: rotate(0deg) !important

                    .CToggleContent
                        height: 4.3em

                .ContactToggleHeader
                    display: flex
                    align-items: center
                    height: 1.8em
                    justify-content: space-between
                    width: 5em
                    
                    p
                        margin-right: 0em

                    i
                        transform: rotate(180deg)
                        color: $blueDefault
                        transition: .3s ease-out

                .CToggleContent
                    width: 159px
                    position: absolute
                    right: 0
                    display: flex
                    flex-direction: column
                    overflow: hidden
                    height: 0em
                    z-index: 1
                    transition: .3s ease-in-out

                    a
                        background: #dfdfdf
                        text-align: end
                        padding: .8em 1.6em
                        font-size: 13.4px
                        color: $blueDefault
                        transition: .3s ease-out
                        
                        &:hover
                            background: #be9c3f
            p
                font-size: 12.5px
                color: $blueDefault
                margin-right: 39px
                letter-spacing: 0.58px
                font-weight: 500
                display: flex
                align-items: center

                img
                    margin-right: 13px
            
            .face
                margin-left: 15px
                margin-right: 56px

        nav
            @include padidng(0px, 0px)
            padding-left: 0px !important
            height: 87px
            background: #f0f0f0
            div
                height: 100%
                ul
                    height: 100%
                    display: flex
                    justify-content: space-between
                    align-items: center
                    li
                        display: flex
                        align-items: center
                        justify-content: center
                        height: 100%
                        a
                            color: $blueDefault
                            font-weight: 600
                            padding: 1.3em 51px
                            border-right: 1px solid #cccccc
                            font-size: 0.938em
                            letter-spacing: 0.45px
                    

                    #menu-item-26
                        a
                            border-right: 0

                    #menu-item-60
                        position: absolute
                        width: 176.08px
                        left: 352.21875px
                        height: 3px
                        background: #d9a61c
                        top: 0
                        margin-top: 7.22em
                        transition: .4s ease-in-out
                        opacity: 0

                        a
                            color: transparent
                            border-right: 0px

                    #menu-item-64
                        position: relative
                        cursor: default

                        &:hover
                            ul
                                height: 7.5em

                        ul
                            position: absolute
                            background: #153158
                            width: 195px
                            z-index: 3
                            top: 5.7em
                            left: 2.4em
                            transition: 0.3s ease-in-out
                            height: 0px
                            top: 5.7em
                            display: block
                            overflow: hidden
                            z-index: 10
                                
                            a
                                color: #fff
                                font-weight: 300
                                border-right: 0px

                            li
                                transition: .3s ease-out    
                                width: 100%
                                height: 2.2em

                                &:nth-child(1)
                                    margin-top: .5em
                                
                                &:hover
                                    background: #122b4e

    
// Aqui começa o HeaderInterna
#HeaderInterna
    height: 178px
    background: #06234a
    position: relative
    display: flex
    align-items: center
    justify-content: flex-end
    @include padidng(0px, 0px)
    overflow: hidden

    .footerbg
        max-width: 36em
        margin-top: 2.5em
        position: absolute

    div
        display: flex
        align-items: center
        justify-content: flex-start
        width: 100%

        h1
            @include title(#fff)
            margin-bottom: 18px
            border-bottom: 2px solid $yellowDefault
            z-index: 9
            
            @media(max-width: 425px)
                font-size:37.5px

// Aqui começa o página inicial


.slick-dots li button
    height: 5px
    width: 16px
    background: $yellowDefault
    padding: 0
    border-radius: 2.3px
.slick-active button
    background: #fff !important

#BannerHome
    width: 100%
    height: 31.938em
    margin-bottom: 0em

    .slick-list, .slick-track
        height: 100%
    .slick-dots
            bottom: 2.6em
    

    .BannerContent
        width: 100%
        height: 100%
        overflow: hidden
        display: flex
        background-position: center
        background-repeat: no-repeat
        background-size: cover
        position: relative

        .overlay
            @include overlay($blueDefault, 0.8)


        .BannerText
            height: 100%
            @include padidng(0px, 0px)
            z-index: 2
            color: #fff
            display: flex
            justify-content: center
            flex-direction: column

            h1
                @include title(#fff)
                margin-bottom: 18px
                border-bottom: 2px solid $yellowDefault
            
            legend  
                @include legend(#fff)
                max-width: 39em
                line-height: 37px

            a
                margin-top: 54px
                @include botao(#fff, $blueDefault, 170px, 37px, 1px solid $yellowDefault, $blueActive)

            @media(max-width: 425px)
                justify-content: flex-start
                padding-top: 3em

                h1
                    font-size: 46.5px

            @media(max-width: 320px)
                h1
                    font-size: 39.5px

                h2  
                    font-size: 22px

#NoticiasHome
    background: $bg

    .NoticiasContent
        @include content(3n, 350px, 469px, 30px, 4px)
        @media(min-width: 1500px)
            justify-content: space-between

            .ContentBox
                width: 30%

                img
                    width: 100%
        @media(max-width: 1336px)
            flex-wrap: nowrap
            .ContentBox
                width: 31.5%

        @media(max-width: 1208px)
            .ContentBox
                height: 501px
                .NoticiasIMG
                    height: 39%
           
        
        @media(max-width: 768px)
            flex-wrap: wrap
            justify-content: space-between

            .ContentBox
                margin-right: 0 !important
                width: 47%
                margin-bottom: 2em

        @media(max-width: 500px)
            .ContentBox
                width: 100%
                height: 28em

                .NoticiasIMG
                    height: 14em

        @media(max-width: 425px)
            .ContentBox
                height: 31em

        @media(max-width: 320px)
            .ContentBox
                height: 33em

#HomeTV
    .TvContent
        @include content(3n, 350.4px, 231px, 30px, 4px)
        @media(max-width: 1336px)
            flex-wrap: nowrap
        @media(min-width: 1500px)
            justify-content: space-between

            .ContentBox
                width: 30%
                
                img
                    width: 100%

                .play-button
                    width: auto !important
                    height: auto !important
        @media(max-width: 1336px)
            .ContentBox
                width: 31.5%

        @media(max-width: 768px)
            flex-direction: column

            .ContentBox
                width: 100%
                height: 18em
                margin-right: 0 !important 
                margin-bottom: 2em

                img
                    width: 100%
                
                .play-button
                    width: auto !important
                    height: auto !important

        @media(max-width: 425px)
            .ContentBox
                img
                    height: 100%
                    width: auto

        .TvBox
            overflow: hidden
            display: flex
            align-items: center
            justify-content: center
            cursor: pointer

            iframe
                width: 100%
                height: 141%
            .overlay
                @include overlay(rgba(6, 35, 74, 0.8), 0)
                transition: .3s ease-in-out
                p
                    font-size: 19.5px !important
                    text-align: center
                    width: 89%
                    line-height: 1.3em
                    color: #fff
                    font-weight: 300
                    font-size: $h2Size
            &:hover
                .overlay
                    opacity: 1
            
            .staticvideo
                position: absolute
                transition: .3s ease-out
            .play-button
                position: absolute
                z-index: 1
                right: 1.5em
                bottom: 1em
                transition: .3s ease-in

            i
                position: absolute
                z-index: 1
                opacity: 0
                transition: .3s ease-out
                color: rgb(255, 255, 255)
                font-size: 2.5em
                right: 0.66em
                bottom: 0.5em

#Revista
    margin-bottom: 94px
    .Subtitle
        @include padidng(0px, 0px)

    .content
        display: flex
        align-items: center


        .contentIMG
            width: 48.8%
            height: 363px
            display: flex
            align-items: center
            justify-content: center
            overflow: hidden
            border-radius: 4px
            
            img
                width: 100%
        
        .contentRevista
            width: 30.1em
            height: 18em
            border-radius: 4px
            background: transparent
            border: 2px solid #000000
            margin-left: -2.5em
            padding: 60px

            h3
                font-weight: 300
                font-size: $h2Size
                line-height: 30px
                margin-bottom: 32px
            
            h4
                font-weight: 700
                color: #5e5e5e
                line-height: 22px
                font-size: 14px

            p
                @include text($textColor)
                margin-top: 1.3em
                font-size: 14px

            .btn-more  
                @include botao($blueDefault, #fff, 170px, 37px, 1px solid $yellowDefault, $yellowActive)
                margin:0 auto
                margin-top: 41px

        @media(max-width: 768px)
            margin-top: 4em
            .contentIMG
                img
                    width: auto !important
                    height: 100%

            .contentRevista
                padding: 50px

        @media(max-width: 500px)
            .contentIMG
                display: none
            
            .contentRevista
                margin: 0 auto
                width: 80%
                height: 19em
        
        @media(max-width: 425px)
            .contentRevista
                height: 24em

        @media(max-width: 320px)
            margin-top: 2em
            
            .contentRevista
                height: 28em
                padding: 28px

#PromoBanner
    width: 100%
    background: $blueDefault
    height: 13.5em
    position: relative
    overflow: hidden
    margin-bottom: 1.2em
    border-bottom: 9px solid #01070f

    .bgPromo
        position: absolute
        left: 0
        top: 0

    .PromoDesc
        z-index: 1
        width: 100%
        height: 100%
        display: flex
        flex-direction: column
        justify-content: center
        position: absolute


        
        span
            display: flex
            align-items: center
            @include padidng(0px, 0px)

        h1
            margin-left: 25px
            font-weight: 300
            color: #fff
            font-size: 48.5px
            line-height: 18.5px

            @media(max-width: 768px)
                font-size: 31.5px

            @media(max-width: 500px)
                font-size: 20.5px
            
            @media(max-width: 425px)
                text-align: center
                margin: 0
                line-height: 1.5

        a
            @include botao(#fff, $blueDefault, 170px, 37px, 1px solid $yellowDefault, $yellowActive)
            margin: 0 auto
            margin-top: 40px

        @media(min-width: 1500px)
            align-items: center

        @media(max-width: 1024px)
            span
                display: flex
                align-items: center
                justify-content: center

                h1
                    font-size: 2em

.EscritoriosContent
    display: flex
    align-items: center
    width: 100%
    margin-top: 2em
    height: 11em

    .slick-list
        padding-top: 2em
        padding-bottom: 2em

    .EscritoriosBox
        width: 214px
        background: white
        height: 142px
        margin-right: 1em
        border-radius: 6px
        transition: .3s ease-out
        display: flex
        align-items: center
        justify-content: center
        overflow: hidden

        img
            height: 71%
        &:hover
            box-shadow: 0px 0px 56px -23px rgba(6, 35, 74, 0.9)
        &:nth-child(6n)
            margin-right: 0em


// Aqui começa a página "Sobre IAP"

#Institucional
    background: $bg
    padding-bottom: 76px

    main
        width: 100%
        display: flex
        justify-content: space-between
        padding-top: 3em
        
        @media(max-width: 500px)
            flex-direction: column
            padding-top: 0em

        .AboutFilter
            @include filter(116px)

            a
                color: #fff
                font-weight: 300
                font-size: 18.5px
                line-height: 38.5px
                letter-spacing: 0.37px
                transition: .3s ease-out
                padding-left: 6.6em

                &:hover
                    background: #1e3b63
            .active
                background: $blueDefault
            
            @media(max-width: 500px)
                width: 100%
                a
                    padding-left: 2em


        h2
            font-size: $h2Size
            line-height: 30px
            letter-spacing: -0.29px
            color: $blueDefault
            margin-bottom: 30px

        p
            @include text(#5e5e5e)
            line-height: 22px
            font-size: 14px



    .ContentDiretoria
        display: flex
        flex-wrap: wrap



        .DiretoriaBox
            width: 254px
            height: auto
            margin-right: 30px
            background: #fff
            margin-bottom: 30px
            border-radius: 4px
            overflow: hidden
            transition: .3s ease-in-out

            &:nth-child(3n)
                margin-right: 0em

            @media(max-width: 1024px)
                width: 44%

                &:nth-child(3n)
                    margin-right: 30px

                &:nth-child(2n)
                    margin-right: 0em

            @media(max-width: 768px)
                width: 100%
                margin-right: 0em !important

                img
                    width: 100%

            .DiretoriaImg
                width: 100%
                height: 247px
                overflow: hidden
                display: flex
                align-items: center
                justify-content: center
                


            .DiretoriaDesc
                padding: 31px

                h3
                    font-size: 20px
                    line-height: 25px
                    margin-bottom: 15px
                    color: $blueDefault
                    font-weight: 400

                p
                    @include text(#5d5e5f)

            &:hover
                box-shadow: 0px 0px 56px -23px rgba(0, 0, 0, 0.71)
                transform: scale(1.05)
        
        @media(max-width: 1336px)
            padding-left: 3em
            width: 66%
        @media(max-width: 500px)
            width: 81% 
        @media(max-width: 500px)
            width: 83%
            padding-left: 2em

        @media(max-width: 320px)
            width: 81%

            .DiretoriaBox
                height: 417px
                
                .DiretoriaImg
                    height: 174px



    .ContentAssociados
        flex-wrap: wrap
        width: 70% !important
        display: flex

        @media(max-width: 425px)
            width: 100% !important
        
        
        .slick-dots
            display: flex
            align-items: center
            justify-content: center
            width: 88%
            
            li
                button
                    height: 5px
                    width: 16px
                    background: $yellowDefault
                    border-radius: 4px
                    padding: 0

            .slick-active
                button  
                    background: $blueDefault !important



        .AssociadosBox
            display: flex !important
            align-items: flex-start
            justify-content: space-between
            height: 3.5em
            border-bottom: 1px solid #ccc
            margin-bottom: 34px
            width: 50%

            p
                width: 48%
                font-size: 20px
                line-height: 25px
                color: $blueDefault
                font-weight: 500

// Aqui começa a pagina "Eventos"

#Events
    background: $bg
    padding-bottom: 76px

    .EventoSingleIMG
        width: 100%
        height: 29em
        display: flex
        align-items: center
        justify-content: center
        overflow: hidden

        img
            width: 100%

    h3
        font-size: 27px
        line-height: 30px
        letter-spacing: -0.29px
        color: $blueDefault
        margin-bottom: 25px
        margin-top: 25px

    p
        @include text($textColor)
        font-size: 14px

    main
        width: 100%
        display: flex
        justify-content: space-between
        padding-top: 3em
        
        @media(max-width: 500px)
            flex-direction: column
            padding-top: 0em

        .EventFilter
            @include filter(79px)
            justify-content: flex-start
            
            @media(max-width: 500px)
                width: 100%
                justify-content: center
                align-items: center
                
                form
                    padding-left: 0em !important

                    i
                        left: 0em !important

                span
                    padding-left:  0em !important
                    
            
            a
                margin-left: 7.4em
                color: #fff
                height: 45%
                display: flex
                align-items: center
                border-bottom: 1px solid #d9a61c

            span
                display: flex
                align-items: center
                position: relative
                
                i
                    color: #fff !important
                    left: 0 !important
                    top: 0.4em !important
                    padding: 0 !important
                    font-size: 20px

                select
                    background: none
                    border: none
                    margin-left: 1.1em
                    color: #fff
                    font-size: 18.5px
                    font-weight: 300
                    font-family: Raleway
                    height: 2em
                    padding: 0em 1em 0em .5em
                    cursor: pointer
            form
                padding-left: 6.6em
                position: relative

                input
                    width: 79%
                    border: none
                    height: 37px
                    font-size: 18.5px
                    padding-left: 46px
                    border-radius: 4px
                    margin-top: .15em
                    color: $blueDefault

                    &::placeholder
                        color: $blueDefault
                        opacity: 0.8

                i
                    position: absolute
                    left: 4.66em
                    top: .2em
                    cursor: pointer
                    padding: .3em
                    color: $blueDefault

        .EventFilterSingle
            justify-content: center !important
    .ContentEvents
        flex-wrap: wrap
        display: flex

        .Autor
            @include text($blueDefault)
            font-size: 14px
            margin-top: 11px
            width: 100%

        .EventsBox
            width: 367px
            height: 468px
            background: #fff
            border-radius: 4px
            overflow: hidden
            margin-right: 34px
            margin-bottom: 34px
            position: relative
        
            .permaLink
                position: absolute
                width: 100%
                height: 100%
                z-index: 3
            
            @media(max-width: 1336px)
                width: 361px
                height: 487px

            @media(max-width: 500px)
                width: 100%
                margin-right: 0em 

            @media(max-width: 375px)
                height: 502px

            
            .overlay
                @include overlay(rgba(6, 35, 74, 0.8), 0)
                transition: .3s ease-in-out
                transition-delay: .5s

                p
                    color: #fff
                    font-weight: 300
                    font-size: $h2Size

            .EventosImg
                width: 100%
                height: 211px
                display: flex
                align-items: center
                justify-content: center
                overflow: hidden
                position: relative

                img
                    height: 100%

            .EventosDesc
                padding: 35px
                overflow: hidden
                
                h3
                    font-weight: 700
                    font-size: 19px
                    color: $blueDefault
                    line-height: 30px
                    margin-bottom: 1em
                    margin-top: 0em !important

                p
                    @include text($textColor)
                    font-size: 14px
            &:hover
                .overlay
                    opacity: 1

            &:nth-child(2n)
                margin-right: 0em


// Noticias

.NoticiasContent
    .EventsBox
        &:nth-child(1)
            width: 100% !important
            height: 556px !important
            margin-right: 0 !important

            .EventosImg
                height: 296px !important

                img
                    height: auto !important
                    width: 100% !important

        &:nth-child(2n)
            margin-right: 34px !important

        &:nth-child(2n+1)
            margin-right: 0px !important

        @media(max-width: 768px)
            &:nth-child(1)
                width: 362px !important
                height: 710px !important
                margin-right: 0 !important

                .EventosImg
                    height: 211px !important
        
        @media(max-width: 500px)
            width: 100%
            
            margin-right: 0 !important
            &:nth-child(2n)
                margin-right: 0px !important
            &:nth-child(1)
                width: 100% !important
                height: 710px !important
                margin-right: 0 !important

        @media(max-width: 320px)
            height: 574px !important

            img
                width: auto !important
                height: 100% !important

            &:nth-child(1)
                height: 574px !important

                .EventosDesc
                    overflow: hidden
                    height: 16em
            

// Artigos

#ArtigosFilter
    height: 154px !important

.AutorContent
    display: flex
    align-items: center
    margin-top: 54px
    width: 62%
    justify-content: space-between

    p
        margin-top: 0px !important


    a
        width: 200px
        height: 37px
        background: $blueDefault
        border: 1px solid $yellowDefault
        border-radius: 4px
        color: #fff
        font-weight: 300
        display: flex
        align-items: center
        justify-content: center
        font-size: 18.5px

        img
            margin-left: 11px

        &:active
            background: $blueActive
            font-size: 17.5px

// Tv IAP


#TvIap
    .EventsBox
        width: 100% !important
        margin-right: 0em !important
        height: 571px !important

        .EventosImg
            height: 398px !important
            
            iframe 
                width: 100% !important
                height: 100% !important


.ContentRevista
    display: flex
    flex-wrap: wrap
    .RevistaBox
        width: 254px
        height: 414px
        margin-right: 30px
        margin-bottom: 30px

        &:nth-child(3n)
            margin-right: 0em

        .RevistaCapa
            width: 100%
            height: 332px
            display: flex
            align-items: center
            justify-content: center
            overflow: hidden

            img
                width: 100%
        
        .RevistaDesc
            display: flex
            align-items: center
            justify-content: space-between
            margin-top: .5em
            p
                font-size: 15px !important
                line-height: 22px !important
                font-weight: 700 !important
                color: $blueDefault !important
            

            img
                margin-top: .5em

// Aqui começa a pagina de Contato

#Contact
    background: $bg
    padding-bottom: 1em

    h2
        font-size: $h2Size
        line-height: 30px
        letter-spacing: -0.29px
        color: $blueDefault
        margin-bottom: 36px

    p
        color: $textColor
        font-size: 20px
        line-height: 30px

        strong
            font-weight: 800
            color: $blueDefault
    form
        display: flex
        flex-wrap: wrap
        justify-content: space-between
        margin-top: 34px

    input, textarea
        background: #fff
        border-radius: 4px
        border: 1px solid rgba(6, 35, 74, 0.3)
        box-shadow: 0px 2px 0 0 rgba(0, 0, 0, 0.08)
        height: 37px
        margin-bottom: 16px
        font-size: 13px
        padding: 0em 2em
        line-height: 22px

    .input1
        width: 489px

    .input2
        width: 204px

    textarea
        width: 100%
        height: 84px
        padding: 1em 2em

    button
        @include botao($blueDefault, #fff, 170px, 37px, 1px solid $yellowDefault, $yellowActive)
        cursor: pointer
        margin: 0 auto
        margin-top: 36px

        &:active
            line-height: 0


.Map
    width: 100%
    height: 388px
    margin-top: 86px

.ContactAssociado
    p
        font-size: 14px !important

    form
        margin-top: 56px !important

.divBtn
  width: 100%
  display: flex
  align-items: center
  justify-content: center



.mobile-btn 
    display: block
    color: $blueDefault
    width: 2em
    border-top: 3px solid
    position: relative
    cursor: pointer
    -webkit-backface-visibility: hidden
    margin-bottom: .4em
    margin-top: .5em
    z-index: 900
    top: 0em
    right: 0em
    position: absolute
    margin-right: 7em
    margin-top: 3.7em
    
    @media(max-width: 988px)
        margin-right: 4em
    @media(min-width: 1316px)
        display: none

.mobile-btn2
    margin-top: 1.2em !important
    margin-right: .3em !important

.mobile-btn::after, .mobile-btn::before 
    content: ''
    display: block
    height: 3px
    margin-top: 7px
    background: currentColor
    position: relative
    transition: transform .3s ease

.overleyMenu
    position: fixed
    left: 0
    background: #000
    height: 100%
    width: 100%
    top: 0
    z-index: -1
    transition: .3s ease-in
    opacity: 0

.overleyMenu.active
    z-index: 100
    opacity: 0.5

.mobile-btn.active 
    border-top-color: transparent
    position: absolute
    top: 0
    right: 0
    color: #fff
    margin-right: 1em
    padding: 1.7em 1.5em
    margin: 0
    z-index: 999999999

.mobile-btn.active::after 
    margin-top: 0px
    top: -10px
    transform: rotate(45deg)


.mobile-btn.active::before 
    margin-top: 0px
    top: -6px
    transform: rotate(135deg)


.menu-mobile 
    opacity: 0
    visibility: hidden
    text-align: center
    margin-top: 0px
    transform: translate3D(0, -50px, 0)
    transition: .3s
    width: 30%
    height: 100%
    background: $blueDefault
    z-index: 99999999999
    position: fixed
    right: 0
    top: 0

.menu-mobile li 
    line-height: 1.4em
    width: 100%
    height: 3em

    a
        width: 100%
        padding: 0em
        color: #fff
        font-weight: 300
        font-size: 1.25em
        justify-content: flex-start
        padding-left: 1.5em
        transition: .3s ease-out

        &:hover
            background: $blueActive

        &:active
            background: $blueActive

        

.menu-mobile .menu-menu-footer-container
    width: 100%

    ul
        width: 100%
        display: flex
        flex-direction: column

.menu-mobile.active 
    visibility: visible
    opacity: 1
    transform: translate3D(0, 0, 0)

#menu-item-67
    position: relative
    cursor: context-menu

    
    ul
        position: absolute
        width: 36.5em
        top: 0
        margin-top: 4.9em
        display: flex
        flex-direction: column
        flex-wrap: wrap
        height: 15em
        left: 0
        background: $blueDefault
        margin-left: -4em
        align-items: start
        padding-top: 0.5em
        transition: .3s ease-out    
        opacity: 0
        z-index: -1

        li
            height: 3.5em
            width: auto

            a
                color: #fff
                font-size: 1em

            &:hover
                text-decoration: underline

    &:hover
        ul
            z-index: 999
            opacity: 1

@media(max-width: 1316px)
    #menu-item-27
        display: none

    header .HeaderInfos nav div ul
        justify-content: flex-start

    header .HeaderInfos nav div ul li a
        padding: 1.3em 50px

    header
        nav
            #menu-menu-header-1
                flex-direction: column
                padding-top: 5em

                .menu-item-60
                    display: none !important

                li
                    height: 3.8em !important

                    a
                        color: #fff
                        text-align: end

                .menu-item-64
                    position: relative
                    flex-wrap: wrap
                    overflow: hidden
                    transition: .3s ease-out
                    

                    ul
                        display: block
                        flex-direction: column
                        background: #041b3a
                        width: 100%
                        top: 0
                        margin-top: 0
                        position: relative

                        li
                            height: 3.5em !important


                .menuUlActive
                    height: 15em !important
                    transition: .3s ease-out

@media(max-width: 1270px)
    #menu-item-26
        display: none

    #menu-item-21
        a
            border-right: 0px

    #menu-menu-header
        a
            padding: 1.3em 65px

@media(max-width: 1024px)
    footer main .SiteMap ul li
        width: 118px
        margin-right: 13px

@media(max-width: 1202px)
    #menu-menu-header
        display: none

    header 
        .HeaderInfos
            width: 75%

@media(max-width: 888px)
    header .HeaderInfos .ContactBar .face
        margin-right: 31px

@media(max-width: 836px)
    footer
        height: 46em

        .footerbg
            display: none

        main
            margin-top: 1em
            flex-direction: column
            flex-wrap: wrap
            align-items: flex-start

            .SiteMap
                width: 100%
                margin-bottom: 1em
                margin-top: 2em
                
                div
                    ul
                        width: 50%

            .Localization
                width: 100%


@media(max-width: 768px)
    header
        margin-top: 2em
        .HeaderInfos 
            width: 70%

            .ContactBar
                position: absolute
                margin: 0
                left: 0
                padding-right: 0
                padding-left: 4em !important
                justify-content: flex-start
                top: 2px

            nav
                height: 116px
                
                .mobile-btn
                    margin-top: 5em

                .menu-mobile
                    width: 49%

    #Rodape
        height: 151px
        flex-direction: column
        justify-content: center

        .redes
            display: flex
            flex-wrap: wrap
            justify-content: center

            p
                width: 100%
                margin: 0
                margin-top: 1.5em
                margin-bottom: 1.5em

@media(max-width: 500px)
    header
        margin-top: 0px
        .HeaderInfos
            .ContactBar
                display: none

            nav
                background: #fff

                .mobile-btn
                    margin-top: 3.1em
                    margin-right: 2em
                .menu-mobile
                    width: 100%

@media(max-width: 425px)
    #Rodape
        height: 12em

        .redes
            p
                text-align: center
                line-height: 1.6

@media(max-width: 320px)
    .HeaderLogo
        img
            max-width: 9em

    footer
        height: auto
        padding-bottom: 2em
        main 
            margin-top: 3em

            .SiteMap 
                div 
                    ul
                        flex-wrap: nowrap
                        height: auto

                        li
                            font-size: 1.2em
                            margin-bottom: 1em

                        #menu-item-59
                            margin-bottom: 1em
@media(max-width: 425px)
    #TvIap
        .EventsBox
            height: 40em !important 

@media(max-width: 320px)
    #TvIap
        .EventsBox
            height: 33em !important

            .EventsImg
                height: 231px !important



@media(max-width: 1336px)
    .ContentRevista
        padding-left: 2em
        width: 69%

@media(max-width: 1024px)
    #Events 
        .EventoSingleIMG
            height: 21em
    #Contact input, #Contact textarea
        width: 100% !important

@media(max-width: 768px)
    .ContentRevista
        width: 37%

        .RevistaBox
            margin-right: 0em !important
    #Events 
        .EventoSingleIMG
            height: 16em

@media(max-width: 500px)
    .ContentRevista
        width: 100%
    #Events 
        main 
            .EventFilter 
                a
                    margin-left: 0em


@media(max-width: 375px)
    #Events 
        .EventoSingleIMG
            height: 13em
    .Map
        margin-top: 0em

@media(max-width: 320px)
    #Events 
        .EventoSingleIMG
            height: 10em

    #Contact 
        h2
            font-size: 23.5px
        
        p
            font-size: 15px


#menu-menu-header
    #menu-item-185
        display: none

    #menu-item-186
        display: none


#NotFound
    background: $bg
    h2
        font-size: 28.5px
        line-height: 1.4
        letter-spacing: -0.29px
        margin-bottom: 39px
    main
        display: flex

        li
            margin-bottom: 2em
        a
            font-size: 20px
            line-height: 30px
            color: #103662
            border-bottom: 1px solid #103662

        ul
            margin-left: 3em

    #menu-item-59
        display: none !important

@media(max-width: 768px)
    #HeaderInterna div h1
        font-size: 43.5px

@media(max-width: 425px)
    #NotFound
        main
            flex-direction: column

            ul
                margin-top: 3em

@media(max-width: 320px)
    #HeaderInterna div h1 
        font-size: 34.5px
