.pecas-title{
    padding: 50px 0 100px;
    width: 100%;
    background-color: #061940;
    color: #ffffff;
    display: flex;
    justify-content: center;
    text-align: center;
}
.pecas{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: -50px auto 100px;
}

.pecas h3{
    padding: 20px 0;
    text-align: center;
}


.tab {
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    color: #ffffff;
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    
}

.tab button {
    display: block;
    background-color: inherit;
    color: #061940;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 17px;
    text-align: center;
    height: 90px;
}

.tab button:hover {
    background-color: #061940;
    color: #ffffff;
    transition: 1.5s;

}

.tab button.active {
    background-color: #04112c;
    color: #ffffff;
}

.tabcontent {
    padding: 0px 12px;
    border: 1px solid #ccc;
    width: 100%;
    height: 450px;
    display: none;
    max-width: 1200px;
}


main h3{
    color: #04112c;
    font-size: 30px;
    font-weight: 600;
}



/*Boca de Visita*/

.boca-2 .item1 { 
    grid-area: titulo;
}
.boca-2 .item2 { 
    grid-area: img1;

}
.boca-2 .item3 { 
    grid-area: img2;
}
.boca-2 .item4 { 
    grid-area: img3;
}
.boca-2 .item5 { 
    grid-area: img4;
}
.boca-2 .item6 { 
    grid-area: img5;
}
.boca-2 .item7 { 
    grid-area: img6;
}
.boca-2 .item8 { 
    grid-area: textb;
    padding-top: 20px;
    color: #061940;
    text-align: justify;
}

.boca-2 > div{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.boca-2{
    display: grid;
    grid-template-areas:
        'titulo titulo titulo titulo '
        'img1 img2 img3 img6'
        'img1 img4 img5 img6'
        'textb textb textb textb';
    width: 90%;
    margin: auto;
}

.boca-2 img{
    width: 100%;
    height: 100%;
    box-shadow: 3px 3px 5px #04112c89;
}




/*Tela Capa e Gancho*/

.tela .tela-2{
    display: flex;
    color: #04112c;
    align-items: center;
    justify-content: space-around; 
    
}

.tela .tela-2 div{

    display: flex;
    width: 30%;
    
}

.tela .tela-2 div #tela-1{

    width: 60%;
    margin-right: -10%;
    margin-top: 61%;
    box-shadow: 10px 5px 20px #04112c89;
    
}

.tela .tela-2 div #tela-2{

    width: 60%;
    margin-left: -10%;
    margin-bottom: 61%;
    box-shadow: 10px 5px 20px #04112c98;
    
}

.tela .tela-2 p{

    text-align: justify;
    width: 40%;
    margin: 10px;
    border-right: 3px double #061940;
    border-left: 3px double #061940;
    padding: 25px;
    font-size: 14px;
}


/*DIDEM Encaixotadeiras*/

.didem{

    text-align: center;
    color: #061940;
    font-weight: 500;

}
.didem div{
    display: flex;
    justify-content: space-around;
    width: 85%;
    margin: 30px auto 0;
    
}
.didem div img{
    width: 25%;
}


/*Matriz de Peletização*/

.matriz div{

    display: flex;
    color: #04112c;
    align-items: center;
    justify-content: space-around; 

}

.matriz img{
    width: 45%;
}

.matriz p{
    text-align: justify;
    width: 40%;
    margin: 10px;
    border-right: 3px double #061940;
    border-left: 3px double #061940;
    padding: 25px;
    font-size: 14px;
}
/*Camisa Dimple*/


.camisa div{
    display: flex;
    color: #04112c;
    align-items: center;
    justify-content: space-around; 
    
}

.camisa p{
    text-align: justify;
    width: 40%;
    border-right: 3px double #061940;
    border-left: 3px double #061940;
    padding: 25px;
    font-size: 14px;
}

.camisa div img{

    width: 45%;
    
}

/*Serpentina*/

.grid-smc{
    display: grid;
    grid-template-areas:
    'stexto svideo'
    'simg1 svideo'
    'simg2 simg2';
    width: 70%;
    margin: auto;
    max-width: 700px;

}

.grid-smc .item1{
    grid-area: stexto;
    color: #061940;
    display: flex;
    text-align: center;
}

.grid-smc .item2{
    grid-area: simg1;
    display: flex;
    justify-content: center;
}

.grid-smc .item2 img{
    width: 100%;
}

.grid-smc .item3{
    grid-area: svideo;
    display: flex;
    justify-content: flex-end;
}

.grid-smc .item3 video{
    width: 100%;
    padding-left: 50px;
    
}

.grid-smc .item4{
    grid-area: simg2;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.grid-smc .item4 img{

    width: 32%;

}





.tabcontent{
    height: auto;
    padding-bottom: 15px;
}

@media screen and (max-width: 769px) {
    .grid-smc{
        width: 100%;
    }
}



@media screen and (max-width: 700px) {

    .tab{
        flex-wrap: wrap;
    }

    .tab button{
        width: 100%;
        padding: 5px 0;
        height: auto;
    }

    .camisa p, .matriz p, .tela .tela-2 p{
        border: 0;
        padding: 0;
        
    }

    .didem div img {
        width: 32%;
    }
    
}


@media screen and (max-width: 426px) {



    /*Tela Capa e Gancho*/

    .tela .tela-2{
        display: flex;
        justify-content: center;
        flex-direction: column;
        
    }

    .tela .tela-2 div {
        width: 50%;
    }

    .tela .tela-2 p {
        width: 100%;
    }


    /*Didem*/

    .didem div{
        width: 100%;
    }

    /*Matriz*/

    .matriz div{

        flex-direction: column;
        justify-content: center; 
    
    }
    
    .matriz img{
        width: 50%;
    }
    
    .matriz p{
        width: 100%;

    }

    /*camisa dimple*/

    .camisa div{
        flex-direction: column-reverse;
        justify-content: center; 
        
    }
    
    .camisa p{
        width: 100%;
    }
    
    .camisa div img{
    
        width: 50%;
        
    }



    /*serpentina*/

    .grid-smc{
        grid-template-areas:
        'simg1'
        'stexto'
        'svideo'
        'simg2';
    }

    .grid-smc .item2{
        margin-top: 10px;
    }

    .grid-smc .item3{
        justify-content: center;
    }

    .grid-smc .item3 video{

        padding-left: 0;
        margin: 5px;
        width: 70%;
        justify-content: center;
        
    }

    
    
}