#hero1 {
    background-image: url('img/banner-site2.webp');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
	height: 90vh;
}
.corners {
    width: 100vw;
	height: 90vh;
}
.corners img{
    height: 14vh;
    
}
.c1 {
    position: absolute;
    left: 0px;
    bottom: 0px;
}
.c2 {
    position: absolute;
    right: 0px;
    bottom: 0px;
    transform: rotate(270deg);
}
.c3 {
    position: absolute;
    right: 0px;
    top: 0px;
    transform: rotate(180deg);
}
.c4 {
    position: absolute;
    left: 0px;
    top: 0px;
    transform: rotate(90deg);
}

.natal1 {
    position: absolute;
    left: 5vw;
    top: 12vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.natal1 img{
    max-width: 24vw;
    animation: fadeIn 6s;
	transition: all .6s ease-in-out;
  	-webkit-transition: all .6s ease-in-out;
  	-moz-transition: all .6s ease-in-out;
}
.natal1 a img:hover {
	transform: scale(1.15);
}

.natal1 a img{
    animation: fadeIn2 6s;
    padding: 20px;
}

@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn2 {
  0% {opacity: 0;}
  50% {opacity: 0;}
  100% {opacity: 1;}
  }
@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes fadeIn3 {
  0% {opacity: 0;  right: -100vw;}
  50% {opacity: 0;}
  100% {opacity: 1; right: 15vw;}
  }

.natalBox img {
    max-width: 50vw;
    position: absolute;
    right: 15vw;
    top: 10vh;
    animation: fadeIn3 8s;
	transition: all .6s ease-in-out;
  	-webkit-transition: all .6s ease-in-out;
  	-moz-transition: all .6s ease-in-out;
}

.marcasNatal {
    position: absolute;
    bottom: 0px;
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    background-color: #fd4f2a;
    padding: 15px;
    
}
.logoCBA img {
    position: absolute;
    right: 5vw;
    top: 15vh;
    width: 10vw;
	transition: all .6s ease-in-out;
  	-webkit-transition: all .6s ease-in-out;
  	-moz-transition: all .6s ease-in-out;
}
.logoCBA img:hover {
	transform: scale(1.15);
}


@media only screen and (min-width: 1921px){
    #carrousel, .hero, #hero1 {
    background-image: url('img/banner-site2.webp');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
	height: 110vh;
}
}

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

    #hero1 {
    background-image: url('img/banner-mob2.png');
    }

    .marcasNatal {
        display: none;
    }

    .corners img{
    height: 11vh;
    
    }

    .logoCBA img {
    position: absolute;
    right: 37vw;
    top: 3vh;
    width: 25vw;
}
.natal1 {
    position: absolute;
    left: 15vw;
    top: 15vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.natal1 img{
    max-width: 60vw;
    animation: fadeIn 6s;
	transition: all .6s ease-in-out;
  	-webkit-transition: all .6s ease-in-out;
  	-moz-transition: all .6s ease-in-out;
}

.natalBox img {
    max-width: 80vw;
    position: absolute;
    right: 10vw;
    top: 45vh;
    animation: none;

}
.frete {
    margin-top: 30vh;
    width: 40vw;
}

}