/* HOME */
body{
    background-color: var(--cor1);
}
#sobre{
    width: 100%;
    margin: 0px;
    background-color: var(--cor0);
    color: white;
    padding: 30px;
    font-size: 1.1em;
}
#ccgaleria{
    background-color: var(--cor0);
    width: 100%;
    height: 60vh;
    padding-bottom: 30px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
#cgaleria{
    width: 100%;
    max-width: 1000px;
    height: 100%;
    overflow: hidden;
}
#galeria{
    position: relative;
    margin: auto;
    height: 100%;
    display: flex;
    width: 300vw; 
    flex-wrap: wrap;
    overflow: hidden;
    align-items: center;
}
.slide{
    width: 100vw;
    max-width: 1000px;
    height: 100%;
    z-index:1;
    background: var(--cor0) center center no-repeat;
    background-size: cover;
    transition: 2s;
}
#slide1{
    background-image: url(../images/bolosFestivos/ft12.jpeg);
    background-position: 65% 70%;
}
#slide2{
    background-image: url(../images/docinhosTradicionais/ft4.jpeg);
}
#slide3{
    background-image: url(../images/bolosFestivos/ft9.jpeg);
}
#slide4{
    background-image: url(../images/boloVulcao/ft2.jpg);
}
#slide5{
    background-image: url(../images/bentoCake/ft5.jpeg);
    background-position: center 70%;
}
#slide6{
    background-image: url(../images/boloDePote/ft4.jpg);
    background-position: center 20%;
}
#slide7{
    background-image: url(../images/docinhosTradicionais/ft5.jpeg);
}
#slide8{
    background-image: url(../images/boloVulcao/ft1.jpg);
}
#slide9{
    background-image: url(../images/boloFatia/ft1.jpeg);
}
#slide10{
    background-image: url(../images/bolosFestivos/ft15.jpeg);
}
#tgaleria{
    position: absolute;
    z-index: 10;
    width: 100vw;
    max-width: 1000px;
    height: 100%;
    background-color: rgba(71, 71, 71, 0.384);
    display: flex;
    align-items: center;
    justify-content: center;
}
#tgaleria h1{
    font-size: 1.3em;
    letter-spacing: 0.07em;
    margin: 10px 40px;
}
#mapa{
    width: 100%;
    height: 300px;
    background: var(--cor1) url(../images/home/mapahome.jpeg) center center no-repeat;
    background-size: cover;
    border: 2px solid var(--cor1);
    align-items: center;
    display: flex;
}
#local{
    width: 70%;
    padding: 30px;
    border-radius: 50px;
    background-color: var(--cor3);
    color: var(--cor0);
    border: 2px solid var(--cor0);
    margin: auto;
   
}
#local > h2{
    font-size: 1.2em;
    text-align: center;
}
.add, .conprod{
    display: flex;
    justify-content: end;
    font-size: 1.1em;
    font-weight: bolder;
    text-align: justify;
}
.add span, .conprod span{
    transform: translateY(6px);
}
.conprod a{
    margin-top: 10px;
}
.add a{
    color: white;
    text-decoration: none;
}
.add a:hover{
    color: var(--cor3);
}
#produtos, .regiao{
    background-color: var(--cor2);
    width: 90vw;
    max-width: 800px;
    margin: auto;
}
#produtos .titulos{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cor1);
    background-repeat: no-repeat;
    background-size: cover;
    
}
h1{
    font-family: var(--tcursivo);
    font-size: 1.5em;
    text-align: center;
    background-color: var(--cor3);
    border-radius: 20px 0px;
    padding: 15px 10px 5px 10px;
    margin: 10px 10px;
}
#tBF{
    background: url(../images/bolosFestivos/ft6.jpg) center 20%;
}
#tBB{
    background: url(../images/bentoCake/ft2.jpeg) center 60%;
}
#tDT{
    background: url(../images/docinhosTradicionais/ft4.jpeg) center bottom;
}
.desc{
    padding: 30px;
    font-size: 1.1em;
    box-shadow: inset 0 0 5px 3px rgba(0, 0, 0, 0.507);
}
.desc h2{
    margin-top: 20px;
}
.desc ul{
    padding: 10px 30px;
}
.qsm{
    width: 100%;
    border: 1px solid black;
}
.conprod{
    margin-bottom: 10px;
}
.conprod a{
    color: black;
    text-decoration: none;
    font-size: .9em;
}
.conprod a:hover{
    color: var(--cor1);
}
#todos{

    background-color: var(--cor0);
    text-align: center;
    padding: 20px;
    border-bottom: 2px solid var(--cor1);
}
#todos a{
    color: white;
    font-size: 1.2em;
    text-decoration: none;
    width: 100%;
}
#todos a:hover{
    color:var(--cor1)
}
@media screen and (max-width: 315px) {
    .conprod{
        font-size: .9em;
    }
    #tBT > h1{
        padding: 15px 5px 5px 5px;
    }
    nav{
        padding-right: 0px;
    }
}