/*.topTitle {
    position: sticky;
    padding: 30px 30px 10px;
    margin: 80px 0 0;
    top: 55px;
    width: 100vw;
    color: #00163C;
    background-color: #FFF;
    box-shadow: 0 0 20px 5px #000;
    z-index: 1;
}

.backgroundDiv {
    background: linear-gradient(180deg, #00163Cb0, #00163Cb0, #00163Cb0), url(../../../public/bkg/siga2.png);
    height: 100vh;
    width: 100vw;
    margin: 0;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: contain, cover;
}


.cardPanel {
    min-height: 50vh;
    width: 100vw;
    margin: 0;
    padding: 50px;
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
}

.cards {
    background-color: #FFFFFF;
    width: 350px;
    height: 250px;
    border-radius: 10px;
    display: flex;
    box-shadow: 5px 0px 40px #000;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    flex-direction: column;
}

.cards:hover {
    -ms-transform: scale(1.03);
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
}

.cardImg {
    width: 100%;
    height: 65%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.cardImg img{
    width: 100%;
    object-fit: cover;
}

.cardText {
    width: 100%;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cardInfo {
    height: 35%;
    box-shadow: 0 0 20px 1px #000;
    border-radius: 0 0 10px 10px;
    padding: 5px;
}

.detailButton {
    display: flex;
    height: 70%;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.detailButton button {
    background-color: #00163C;
    width: 50%;
    height: 50%;
    border: 0px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #373737;
    color: #FFFFFF;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.detailButton button:hover {
    background-color: #FFFFFF;
    color: #00163C;
    border: 3px solid #00163C;
    box-shadow: 0px 0px 20px 5px #00163C;
    -ms-transform: scale(1.03); 
    -webkit-transform: scale(1.03); 
    transform: scale(1.03);
}

.overDiv {
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    z-index: 10000;
    background-color: #0b02229e;
    top: 0;
    justify-content: center;
    align-items: center;
}

.innerDiv {
    width: 90vw;
    height: 80vh;
    border-radius: 10px;
    box-shadow: 5px 0px 40px #000;
    position: relative;
    border-radius: 25px;
}

.innerImg {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto;
    border-radius: 25px;
    justify-content: space-around;
    flex-direction: column;
    flex-wrap: wrap;
}

.innerImg img {
    width: 100%;
    border-radius: 3px;
    box-shadow: 5px 0px 40px #000;
}

.innerText {
    position: relative;
    top: -22vh;
    width: 100%;
    height: 22vh;
    margin: auto;
    padding: 30px;
    flex-direction: column;
    background: linear-gradient(0deg, #00163C, #00163C, #ffffff00);
    color: #FFFFFF;
    border-radius: 25px;
    text-align: justify;
    overflow-y: auto;
}*/

.blackBackground {
    background-color: #000;
    box-shadow: 5px 0px 30px gray;
    color: #FFFFFF;
}

.blueToWhiteTransition:hover {
    background-color: #FFFFFF;
    color: #00163C;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
    box-shadow: 0px 0px 8px #000;   
}

/*.containerDiv {
    width: 100vw;
    height: fit-content;
    background-color: #FFFFFF;
}

.innerContainer {
    width: 100%;
}

.innerContainer h1{
    padding: 0 30px;
}

.innerContainer p{
    padding: 10px 30px;
}*/

.blueBackground {
    background-color: #00163C;
    color: #FFFFFF;
    box-shadow: 5px 0px 30px #000;
}

/*.pmargin {
    margin-top: 5vh;
    margin-bottom: 5vh;
    padding: 10px;
    text-align: center;
}

.textCenter {
    padding: 5px 20px 5px 20px !important;
    text-align: justify;
}

.flexDiv {
    display: flex; 
    align-items: center;
}

.justify {
    text-align: justify;
}*/

/*.slideBar {
    cursor: pointer; 
    display: flex;
    align-items: center;
    width: 3vw; 
    height: 110%; 
    position: absolute; 
    justify-content: center;
    background-color: #00163C;
    color: #FFFFFF;
    box-shadow: 0px 0px 8px #000;
}

.slideBar:hover {
    background-color: #FFFFFF;
    color: #00163C;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
    box-shadow: 0px 0px 8px #000;
}

.slideMenu {
    width: 100vw;
    background-color: #00163C;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menuBar {
    width: 50vw;
    color: #FFFFFF;
    justify-content: center;
    display: flex;
    text-align: center;
    align-items: center;
    box-shadow: 0px 0px 5px #000;
    position: relative;
    height: 50px;
}

.menuBar:hover {cursor: pointer;}*/

.whiteBackground {
    background-color: #FFFFFF;
    box-shadow: 5px 0px 30px #000;
    color: #000;
    border-radius:5px;
}

.padding5 {
    padding: 5%;
}

#produtos{
    position: relative;
}

#riscoImg {
    max-width: 100%;
    max-height: 60vh;
    box-shadow: 5px 0px 30px #FFFFFF;
}

#ZLQIMG {
    min-width: 25vw;
    max-width: 100%;
    max-height: 500px;
    box-shadow: 5px 0px 30px #FFFFFF;
}

#LDVIMG {
    min-width: 25vw;
    max-width: 100%;
    max-height: 400px;
    justify-self: right;
    box-shadow: 5px 0px 30px #FFFFFF;
}

.img-desc {
    padding:20px;
    text-align: center;
}

.img-desc img{
    border-radius:10px;
}

.cardModal {
    margin: 0;
    display: flex;
    padding: 0px 5px 0px 5px;
}


.modalCollumns {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 5px;
}

.cardModalTitle {
    width: 100%;
    height: 20%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cardModalTitle p {
    color: white;
}

.borda{
    box-shadow: black 0px 0px 5px 1px inset;
    height: 30vh;
    width: 30vh;
    color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(rgb(255, 255, 255), rgba(0, 22, 60, 0.69), rgb(11, 2, 34)), url(../../../public/bkg/siga2.png);
}

.borda p{
    text-transform: uppercase;
    font-size: 15px;
    text-align: center;
    width: 80%;
    color: rgb(255, 255, 255);
    text-shadow: rgb(0, 0, 0) 0px 0px 20px;
    border-radius: 20px;
}

.tittleanels{
    text-transform: uppercase;
    font-size: 25px;
}                       

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

    h1 {font-size: 22px;}

    /*.topTitle {text-align: center;}

    .cards {
        display: flex; 
        height: 40vh;
        margin: 10px 0px 10px 0px;
    }

    .cardImg {display: flex;}

    .cardImg img {max-width: 90vw; max-height: 100%;}

    .cardText {display: flex;}

    .detailButton {display: flex;}

    .innerImg img {
        width: auto;
        height: 100%;
    }

    .innerText {
        height: 20vh;
    }

    .cardPanel {
        padding: 20px;
        height: fit-content;
        background-color: #00163C;
        display: flex !important; 
        margin: 0;
    }

    .innerDiv {padding: 0;}
    
    .innerImg::-webkit-scrollbar {
        display: none;
    }
    
    .innerText::-webkit-scrollbar {
        display: none;
    }*/

    #Produtos {
        display: flex;
        justify-content: center !important;
    }
    
    /*.flexDiv {display: block;}*/
    
    .innerContainer div {display: block;}
	
    /*.innerContainer {display: block;}
	
	.containerDiv {display: block; width: 100vw;}*/
	
    .whiteBackground {background-color: #00163C; color: #FFFFFF;}
    

    .cardModal{
        display: block !important;
        margin: 0% 5% 0% 5%;
        width: 100vw !important;
        padding-left: 5%;
        margin: 20px 0px 20px 0px;
    }
    
    .borda{
        border: 20px #00163C solid;
        box-shadow: black inset 0px 0px 5px 1px;
        border-radius: 50%;
        height: 35vh;
        width: 85vw;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .tittleanels{
        text-align: center;
    }

    /*.menuBar {display: none;}

    .slideMenu {display: none;}

    .slideBar {display: none;}*/

}