/*------------------------------------------Carousel CSS------------------------------------------------*/
#ourGranja {
    margin-top: 5%;
    width: 100%;
    height: 60em;
    overflow: hidden;
    margin-bottom: 0%;
}

.text1Granja{
    font-family: 'Fira Sans', sans-serif;
    font-weight: Bolder;
    font-size: 3em;
    color: #ffffff;
    margin-left: 10%;
    z-index: 3;
    position: absolute;
}

.text2Granja{
    font-family: 'Galada', cursive;
    font-weight: 200;
    font-size: 10em;
    color: #FF7700;
    z-index: 3;
    margin-left: 5%;
    margin-top: 1%;
    position: absolute;
}

.carrouselDimentions{
    display: flex;
    width: 100%;
    z-index: -1;
}

.imagesCarrouselWrapper {
    width: 100%;
    overflow: hidden;
}

.imagesCarrousel {
    display: flex;
    width: 100%;
}

.imageCarrousel {
    min-width: 100%;
    object-fit: cover;
}

.buttonCarrousel {
    position: absolute;
    height: 3em;
    transition: 0.5s ease;
    z-index: 10;
    cursor: pointer;
}

#LeftBtn {
    margin-top: 22%;
    left: 1%;
}

#RightBtn {
    right: 1%;
    margin-top: 22%;
    rotate: 180deg;
}


/*------------------------------Animações e transicoes para o Carousel----------------------------------*/

@media (min-width: 1500px){
    .buttonCarrousel:hover{
        transform: scale(1.1);
    }
}
/*------------------------------Responsivity para o Carousel----------------------------------*/

@media (max-width: 1500px){
    #ourGranja{
        height: auto;
    }

    .text1Granja{
        font-size: 1.5em;
        margin-top: 3%;
    }
    .text2Granja{
        font-size: 3em;
        margin-top: 3%;
        margin-left: 2%;
    }

    #RightBtn{
        margin-left: 85%;
        margin-top: 30%;
    }

    #LeftBtn{
        margin-top: 30%;
    }
}