.carouselRepetro{
    height: 620px !important;
    opacity: 1 !important;
}

.parallaxRepetro{
    min-height: 500px !important;
}

.duasColunas{
    display: block!important;
}

.duasLinhas{
    display: none!important;
}

.colorBlack{
    color: black !important;
}


.banner{
    text-align: right;
    top: 40% !important;
    position: relative;
}
.legenda{
    text-align: right;
    top: 50% !important;
    position: relative;
    color: black !important;
    font-size: 30px !important;
}

.banner .repetro{
    color: black !important;
    font-size: 60px !important;
    text-align: right;
    font-weight: 900 !important;
}

.qualidadeConfianca:before {
    font-size: 75px;
    font-weight: 900;
	content: " é QUALIDADE";
    animation: troca 10s ease-in infinite alternate-reverse;
    color: rgba(62,202,255,1);
}

@keyframes troca {
	0% {
        opacity: 1;
        font-size: 75px;
		content: " é QUALIDADE";
        color: rgba(62,202,255,1);
	}
    40% {
        opacity: 1;
        font-size: 75px;
		content: " é QUALIDADE";
        color: rgba(62,202,255,1);
	}
    49% {
        opacity: 0;
        font-size: 75px;
		content: "é QUALIDADE";
        color: rgba(62,202,255,1);
	}
    51% {
		opacity: 0;
        font-size: 70px;
		content: "é CONFIANÇA";
        color: rgba(255,224,119,1);
	}
    60% {
		opacity: 1;
        font-size: 70px;
		content: "é CONFIANÇA";
        color: rgba(255,224,119,1);
	}
    100% {
		opacity: 1;
        font-size: 70px;
		content: "é CONFIANÇA";
        color: rgba(255,224,119,1);
	}
}
@media (max-width: 500px) {
	.carouselRepetro {
        height: 300px !important;
        opacity: 1 !important;
	}

    .parallaxRepetro{
        min-height: 300px !important;
    }

        
    .duasColunas{
        display: none !important;
    }

    .duasLinhas{
        display: block !important;
    }

    
}
@media (max-width: 800px) {
        
    .banner{
        text-align: right;
        top: 40% !important;
        position: relative;
    }
    .legenda{
        text-align: right;
        top: 50% !important;
        position: relative;
        color: black !important;
        font-size: 20px !important;
    }

    .banner .repetro{
        color: black !important;
        font-size: 40px !important;
        text-align: right;
        font-weight: 500 !important;
    }

    .qualidadeConfianca:before {
        font-size: 55px;
        font-weight: 500;
        content: " é QUALIDADE";
        animation: troca 10s ease-in infinite alternate-reverse;
        color: rgba(62,202,255,1);
    }

    
@keyframes troca {
	0% {
        opacity: 1;
        font-size: 55px;
		content: " é QUALIDADE";
        color: rgba(62,202,255,1);
	}
    40% {
        opacity: 1;
        font-size: 55px;
		content: " é QUALIDADE";
        color: rgba(62,202,255,1);
	}
    49% {
        opacity: 0;
        font-size: 55px;
		content: "é QUALIDADE";
        color: rgba(62,202,255,1);
	}
    51% {
		opacity: 0;
        font-size: 50px;
		content: "é CONFIANÇA";
        color: rgba(255,224,119,1);
	}
    60% {
		opacity: 1;
        font-size: 50px;
		content: "é CONFIANÇA";
        color: rgba(255,224,119,1);
	}
    100% {
		opacity: 1;
        font-size: 50px;
		content: "é CONFIANÇA";
        color: rgba(255,224,119,1);
	}
}
}

/* 

.banner .qualidade{
    color: rgba(255,224,119,1) !important;
    font-size: 60px !important;
    text-align: right;
    font-weight: 900 !important;
    animation: qualidade 1s ease;
}

.banner .confianca{
    color: rgba(62,202,255,1) !important;
    font-size: 60px !important;
    text-align: right;
    font-weight: 900 !important;
} */

.divBack {
    width: 100% !important; 
    height: 800px !important; 
    padding: 20px !important;
    /* background: rgb(255,255,255); */
    /* background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(97,208,255,1) 50%, rgba(255,255,255,1) 100%); */
    margin: auto;
    overflow: auto;
    /* background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%); */
    background: linear-gradient(315deg, rgba(255,224,119,1) 3%, rgba(255,255,255,1) 38%, rgba(62,202,255,1) 68%, rgba(255,255,255,1) 98%);
    animation: gradient 20s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.wave:nth-of-type(2) {
    bottom: -1.25em;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -2.5em;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}