@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
}
section{
    padding: 100px;
}

.banner{
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0062be;
    transition: 0.5s;
}
header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px 50px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}
header .logo{
    color: #000;
    max-width: 150px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 2px;
}
header ul{
    position: relative;
    display: flex;
}
header ul li{
    position: relative;
    list-style: none;
}
header ul li a{
    position: relative;
    display: inline-block;
    margin: 0 15px;
    color: #000;
    text-decoration: none;
    font-size: 13px;
}
.boxBanner{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.boxBanner .textBox{
    position: relative;
    max-width: 600px;
}
.boxBanner .textBox h2{
    color: #fff;
    font-size: 2.5em;
    line-height: 1.5em;
    font-weight: 900;
    text-transform: uppercase;
}
.boxBanner .textBox h2 span{
    font-size: 1em;
    font-weight: 600;
}
.boxBanner .textBox p{
    color: #fff;
}
.boxBanner .textBox a{
    display: inline-block;
    margin-top: 20px;
}
.boxBanner .textBox img.sindicalize{
    max-width: 180px;
}
.boxBanner .imgBanner{
    width: 600px;
    display: flex;
    padding-right: 50px;
    margin-top: 50px;
    justify-content: flex-end;
}
.boxBanner .imgBanner img{
    max-width: 400px;
}
.thumb{
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
}
.thumb li{
    list-style: none;
    display: inline-block;
    margin: 0 20px;
    cursor: pointer;
    transition: 0.5s;
}
.thumb li:hover{
    transform: translateY(-15px);
}
.thumb li img{
    max-width: 300px;
}
.sci{
    position: absolute;
    top: 70%;
    right: 1px;
    transform: translateY(-70%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.sci li{
    list-style: none;
}
.sci li a{
    display: inline-block;
    margin: 1px 0;
    transform: scale(0.6);
}
.sci li i{
    font-size: 50px;
    color: #fff;
}

.noticia{
    padding-top: 150px;
}
.noticia .content{
    display: flex;
    justify-content: space-between;
}
.noticia .contentBx{
    padding-right: 30px;
}
.noticia .contentBx h3{
    font-size: 24px;
    margin-bottom: 10px;
}
.noticia .diretoriaBx h3{
    padding-top: 30px;
    padding-bottom: 10px;
    color: #422874;
}
.noticia p{
    margin-top: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    font-style: normal;
}




.about{
    padding-top: 150px;
}
.about .content{
    display: flex;
    justify-content: space-between;
}
.about .contentBx{
    padding-right: 30px;
}
.about .contentBx h3{
    font-size: 24px;
    margin-bottom: 10px;
}
.about .diretoriaBx h3{
    padding-top: 30px;
    padding-bottom: 10px;
    color: #422874;
}
.about .diretoriaBx p{
    padding-top: 2px;
    padding-bottom: 2px;
}
.about .diretoriaBx span{
    font-weight: 800;
    padding-left: 20px;
}

.heading{
    width: 70%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
    color: #111;
}
.heading h2{
    font-weight: 600;
    font-size: 30px;
}
.white{
    color: #ffffff !important;
}
.w50{
    min-width: 50%;
}
img{
    max-width: 100%;
}





.convenios{
    background: #0062be;
    padding-top: 150px;
}

.convenios .content{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}
.convenios .content .convenioBx{
    padding: 20px 10px;
    color: #fff;
    max-width: 340px;
    margin: 10px;
    text-align: center;
    transition: 0.5s;
}
.convenios .content .convenioBx img{
    max-width: 250px;
}


.link{
    background: #111;
    padding-top: 150px;
}
.link .heading.white{
    color: #fff;
}
.link .content{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}
.link .content .linkBx{
    padding: 20px 10px;
    color: #fff;
    max-width: 440px;
    margin: 10px;
    text-align: center;
    transition: 0.5s;
}
.link .content .linkBx img{
    max-width: 400px;
}


.bancos{
    background:#fff;
}
.bancos .content{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
}
.bancos .content .bancoBx{
    padding: 20px 10px;
    color: #fff;
    max-width: 150px;
    margin: 10px;
    text-align: center;
    transition: 0.5s;
}
.bancos .content .bancoBx img{
    max-width: 120px;
}




.fotos{
    background: #aaa;
    padding-top: 190px;
}
.fotos .content{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
}
.fotos .grupos{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    transform-style: preserve-3d;
    width: 100%; 
    padding-top: 40px;   
}
.fotos .btn{
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px 10px 5px 10px;
    display: block;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background: #4978ff;
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    font-size: 12px;
    text-decoration: none;
}
.fotos .btn_mais_foto{    
    padding: 5px 50px 5px 50px;
    display: block;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background: #4978ff;
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    width: 250px;
    float: right;
    text-decoration: none;
    text-transform: uppercase;
}
.fotos .contentBox{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;   
    padding-top: 90px;
}
.fotos .contentBox .title1{
    width: 100%; 
    text-align: center;
    background: #4978ff;
    color: #fff;
}
.fotos .contentBox .title{
    width: 100%; 
    text-align: center;
    background: #4978ff;
    color: #fff;
    margin-top: 90px;
}
.fotos .contentBox .contentMaisFoto{
    width: 100%; 
    text-align: center;
    margin-top: 20px;
}
.fotos .contentBox .galeriaBx{
    padding: 20px 20px;
    color: #000;
    text-align: center;
    transition: 0.5s;
}
.fotos .contentBox .galeriaBx img{
    max-width: 250px; 
    max-height: 250px;       
}




.fotos_galeria{
    background: #fff;
    margin-top: -150px;
}
.fotos_galeria .content{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
}
.fotos_galeria .grupos{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    transform-style: preserve-3d;
    width: 100%; 
    padding-top: 40px;   
}
.fotos_galeria .btn{
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 5px 10px 5px 10px;
    display: block;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background: #4978ff;
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    font-size: 12px;
    text-decoration: none;
}
.fotos_galeria .btn_mais_foto{    
    padding: 5px 50px 5px 50px;
    display: block;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background: #4978ff;
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
    width: 250px;
    float: right;
    text-decoration: none;
    text-transform: uppercase;
}
.btn_mais_albuns{
    
    display: block;
    text-align: center;
    cursor: pointer;
    color: #fff;    
    float: right;
    text-decoration: none;
}
.fotos_galeria .contentBox{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;   
    padding-top: 90px;
}
.fotos_galeria .contentBox .title1{
    width: 100%; 
    text-align: center;
    background: #4978ff;
    color: #fff;
}
.fotos_galeria .contentBox .title{
    width: 100%; 
    text-align: center;
    background: #4978ff;
    color: #fff;
    margin-top: 90px;
}
.fotos_galeria .contentBox .contentMaisFoto{
    width: 100%; 
    text-align: center;
    margin-top: 20px;
}
.fotos_galeria .contentBox .galeriaBx{
    padding: 20px 20px;
    color: #000;
    max-width: 340px;
    text-align: center;
    transition: 0.5s;
}
.fotos_galeria .contentBox .galeriaBx img{
    max-width: 250px; 
    max-height: 250px;       
}




.acordos{
    padding-top: 150px;
}
.acordos .accordion{
    max-width: 80%;
    padding: 0 20px;
    margin: 0 auto;
}
.acordos .accordion .parent-tab,
.acordos .accordion .child-tab{
    margin-bottom: 8px;
    border-radius: 3px;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.18);
}
.acordos .accordion .parent-tab label,
.acordos .accordion .child-tab label{
    background: #007bff;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    border-radius: 3px;
    position: relative;
    z-index: 99;
    transition: all 0.3s ease;
}
.acordos .accordion .parent-tab label:hover{
    background: #006fe6;
}
.acordos .parent-tab input:checked ~ label,
.acordos .child-tab input:checked ~ label{
    border-radius: 3px 3px 0 0;
    background: #006fe6;
}
.acordos .accordion label span{
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-shadow: 0 -1px 1px #0056b3;
}
.acordos .accordion .child-tab label span{
    font-size: 17px;
}
.acordos .parent-tab label .icon{
    position: relative;
    height: 30px;
    width: 30px;
    font-size: 15px;
    color: #007bff;
    display: block;
    background: #fff;
    border-radius: 50%;
    text-shadow: 0 -1px 1px #0056b3;
}
.acordos .accordion .child-tab label .icon{
    height: 27px;
    width: 27px;
}
.acordos .accordion .parent-tab label .icon i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.acordos .accordion .parent-tab input:checked ~ label .icon i:before,
.acordos .accordion .child-tab input:checked ~ label .icon i:before{
    content: '\f068';
}
.acordos .accordion .parent-tab .content,
.acordos .accordion .child-tab .sub-content{
    max-height: 0px;
    overflow: hidden;
    background: #fff;
    border-radius: 0 0 3px 3px;
    transition: all 0.4s ease;
}
.acordos .accordion .parent-tab input:checked ~ .content,
.acordos .accordion .child-tab input:checked ~ .sub-content{
    max-height: 100vh;
    padding: 15px;
}
.acordos .accordion input[type="radio"],
.acordos .accordion input[type="checkbox"]{
    display: none;
}
.acordos .accordion .acordoBox{
    width: 100%;
}
.acordoBox a{
    text-decoration: none;
}
.acordoBox img.pdf{
    width: 25px;
}

.acordos .reivindicacoesBox{
    max-width: 80%;
    padding: 0 20px;
    margin: 0 auto;
    margin-top: 50px;
}
.acordos .reivindicacoesBox h2{
    text-align: center;
}
.acordos .reivindicacoesBox p{
    text-align: justify;
}

.clube{
    background: #f7f7f7;
    padding-top: 150px;
    width: 100%;
}
.clube .content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.clube .content .clubeBx{
    width: 100%;
    padding: 10px 20px;
    margin: 10px;
}
.clube .content .clubeBx h3{
    color: #000;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
}
.clube .content .clubeBx p{
    color: #000;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
}

.base{
    background: #f7f7f7;
    padding-top: 150px;
}
.base .content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.base .content .baseBx{
    max-width: calc(35% - 10px);
    padding: 10px 20px;
    margin: 10px;
    background: #0062be;
}
.base .content .baseBx p{
    color: #fff;
    font-size: 16px;
    font-weight: 300;
}
.base .content .baseText{
    text-align: center;
    width: 100%;
}


.contact{
    background: #0062be;
    padding-top: 150px;
}

.contact .content{
    display: flex;
    justify-content: space-between;
}
.contact .contentBx{
    padding-right: 30px;
}
.contact .contentBx h3{
    font-size: 24px;
    margin-bottom: 10px;
}
.formBx{
    min-width: 60%;
}
.formBx form{
    display: flex;
    flex-direction: column;
}
.formBx form h3, 
.contactInfo h3{
    color: #fff;
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 10px;
}
.formBx form input,
.formBx form textarea{
    margin-bottom: 20px;
    padding: 15px;
    font-size: 16px;
    border: none;
    outline: none;
    background: #fff;
    color: #000;
    resize: none;
}
.formBx form textarea{
    min-height: 100px;
}
.formBx form input::placeholder,
.formBx form textarea::placeholder{
    color: #000;
}
.formBx form input[type="submit"]{
    max-width: 100px;
    background: #000;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;


    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}
.contactInfo{
    min-width: 40%;    
}
.contactInfoBox{
    margin-right: 10px;
}
.contactInfoBox h3{
    color: #fff;
    font-weight: 700;
    font-size: 28px;
}
.contactInfoBx{
    position: relative;
}

.contactInfoBx .box{
    position: relative;
    padding: 20px 0;
    display: flex;
}
.contactInfoBx .box .icon{
    min-width: 40px;
    padding-top: 4px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}
.contactInfoBx .box .text{
    display: flex;
    margin-left: 20px;
    font-size: 16px;
    color: #fff;
    flex-direction: column;
    font-weight: 300;
}
.contactInfoBx .box .text h3{
    font-weight: 700;
    color: #ddd;
    margin-bottom: 0;
}


footer .copyright{    
    color: #000;
    text-align: left;
    padding: 10px;
    width: 50%;
    float: left;
    padding-left: 40px;
}
footer .credito{ 
    color: #000;
    text-align: right;
    padding: 10px;
    width: 50%;
    float: right;
    padding-right: 40px;
}

/*Responsive*/
    @media (max-width: 991px){
        
        .menu{
            position: fixed;
            top: 130px;
            left: -100%;
            display: block;
            padding: 100px 50px;  
            text-align: center;
            width: 100%;
            height: 100vh;
            background: #fff;
            transition: 0.5s;
            z-index: 999;
            border-top: 1px solid rgba(0,0,0,0.2);
        }
        .menu.active{
            left: 0;
        }
        .boxBanner .textBox{            
            max-width: 100%;
            margin-top: 50px;
        }
        .boxBanner .textBox h2{            
            font-size: 1.5em;
            line-height: 1.0em;            
        }
        .boxBanner .textBox h2 span{
            font-size: 1em;
        }
        .boxBanner .textBox a{
            margin-top: 10px;
            margin-bottom: 30px;
            padding: 4px 10px;            
        }
        .boxBanner .imgBanner{
            width: 0px;         
        }
        .boxBanner .imgBanner img{
           width: 0px;
        }
       
        .toggle{
            width: 40px;
            height: 40px;
            background: url("../images/menu.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 30px;
            cursor: pointer;
              
        }
        .toggle.active{
            width: 40px;
            height: 40px;
            background: url("../images/exit.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 30px;
            cursor: pointer;             
        }

           
        .thumb li img{
            max-width: 80px;
        }

        .btn{
            margin-top: 10px;
            padding: 10px 20px;
        }    
        .about .contentBx h3{
            font-size: 20px;
        }
        .about .content{
            flex-direction: column;
            font-size: 16px;
        }
        .contact .contentBx h3{
            font-size: 20px;
        }
        .contact .content{
            flex-direction: column;
            font-size: 16px;
        }      
        .heading h2{
            font-size: 24px;
        }
        .w50{
            margin-bottom: 20px;
        }
        
        .base .content .baseBx{
            max-width: 100%;
            width: 100%;
            text-align: center;
        }
        .base .content .baseBx h3{
            margin-top: 20px;
        }

        .fotos .contentBox .galeriaBx img{
            max-width: 100px; 
            max-height: 100px;       
        }

        .galeria_fotos .contentBox .galeriaBx img{
            max-width: 100px; 
            max-height: 100px;       
        }

        .contactInfo{
            margin: 20px 0;
        }
        footer .copyright{    
            width: 100%;  
            text-align: center;         
        }
        footer .copyright img{
            float: left;
        }
        footer .credito{             
            width: 100%;      
            text-align: center;     
        }
    }

    @media (max-width: 600px){        
        section{
            padding: 100px 20px;
        }
    }