/*@import "compass/css3";*/
#banners {
    height: 28rem;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    .banner {
    animation: bannerOne 15s linear infinite;
    height: 28rem;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    &.one,
    &.two,
    &.three {
    h2 {
    color: #ffffff;
    font-size: 2rem;
    padding: 1rem;
    margin: 0;
    span {
    display: block;
    }
}
.image {
    height: 100%;
    position: absolute;
    top: 0;
    width: 50%;
}
}
&.one {
    animation-name: bannerOne;
    background: url(../banner-rotater-topo/cama.webp); no-repeat right center;
   /* background: url(../imagem/fundo.webp); no-repeat right center;*/
h2 {
    text-align: center;
    width: 50%;
    padding: 50px;
}
.image {
    /*background: url("imagens/grupo-protege-mais.webp") no-repeat right center;*/
    background-size: 100%;
    right: 0;
}
}
&.two {
    animation-name: bannerTwo;
    background: url(../banner-rotater-topo/enxoval-cama.webp); no-repeat right center;
h2 {
    text-align: center;
}
.image {
    background: url("imagens/grupo-protege-mais.webp") no-repeat center bottom;
    background-size: 100%;
    top: 50%;
    height: 50%;
    width: 100%;
    padding: 50px;
}
}
&.three {
    animation-name: bannerThree;
    background: url(../banner-rotater-topo/cortina.webp); no-repeat right center;
h2 {
    float: right;
    width: 50%;
    padding: 50px;
}
.image {
    background: url("imagens/grupo-protege-mais.webp") no-repeat left center;
    background-size: 100%;
    left: 0;
}
}
}
}

@keyframes bannerOne{
    0% {
    left: 0;
    }
    31% {
    left: 0;
    }
    34% {
    left: -100%;
    }
    97% {
    left: 100%;
    }
    100%{
    left: 0;
    }
}

@keyframes bannerTwo{
    0% {
    left: 100%;
    }
    31% {
    left: 100%;
    }
    34% {
    left: 0;
    }
    64% {
    left: 0;
    }
    67% {
    left: -100%;
    }
    100%{
    left: -100%;
    }
}

@keyframes bannerThree{
    0% {
    left: 100%;
    }
    64% {
    left: 100%;
    }
    67% {
    left: 0;
    }
    97% {
    left: 0;
    }
    100%{
    left: -100%;
    }
}

/* smallest */
/*@media (max-width: 320px;) {
#banners {
height: 10rem;
.banner {
&.one,
&.two,
&.three {
height: 10rem;
h1 {
font-size: 2rem;
}
}
}
}
}*/

/* small */
@media (min-width: 321px) and (max-width: 728px) {
    #banners {
    height: 12rem;
    .banner {
    &.one,
    &.two,
    &.three {
    height: 12rem;
    h2 {
    font-size: 3rem;
    padding: 1.5rem;
    }
    }
    }
    }
}

/* medium */
@media (min-width: 729px) and (max-width: 960px) {
    #banners {
    height: 20rem;
    .banner {
    &.one,
    &.two,
    &.three {
    height: 20rem;
    h2 {
    font-size: 6rem;
    padding: 2rem;
    }
    }
    }
    }
}

/* large */
@media (min-width: 961px){
    #banners {
    height: 20rem;
    .banner {
    &.one,
    &.two,
    &.three {
    height: 20rem;
    h2 {
    font-size: 6rem;
    padding: 2rem;
    }
    }
    }
    }
}

@media (min-width: 1440px){
    #banners {
    height: 28rem;
    .banner {
    &.one,
    &.two,
    &.three {
    height: 28rem;
    h2 {
    font-size: 6rem;
    padding: 2rem;
    }
    }
    }
    }
}