#AreaLogo {background: #000; border-bottom: 6px solid #c95913; padding: 20px 50px; margin: 0 auto;} #AreaGeralProduto {position: relative; background: #FFF; width: 100%; display: block; max-width: 900px; margin: 0 auto; font-family: 'Oswald', sans-serif; font-size: 16px; color: #FFF;} #AreaGeralProduto br {display: block; clear: both;} .BackgroundGeral {width: 100%; display: block;} #AreaGeralProduto p {width: 360px; z-index: 999; display: block; clear: both; box-sizing: border-box; text-align: justify; color: #000;} #AreaGeralProduto p strong {color: #ca5a1a;} #AreaGeralProduto h3 {color: #000; font-size: 22px; margin: 10px 0; text-transform: uppercase; display: block; clear: both;} #AreaGeralProduto h3 span {color: #ca5a1a;} .ConteudoBloco {padding: 0 50px; box-sizing: border-box; top: 0; width: 100%;} #BlocoUm {display: block; clear: both;} #BlocoUm img {width: 100%;} #BlocoDois {position: relative;} #BlocoDois .ConteudoBloco {position: absolute; top: 400px;} #BlocoDois h3 {width: 300px;} #BlocoDois p {width: 300px;} #BlocoTres {position: relative;} #BlocoTres .ConteudoBloco {position: absolute; padding: 0 80px;} #BlocoTres h3 {width: 340px; float: right; margin-top: 50px;} #BlocoTres p {width: 340px; float: right;} #MotoCrossImg {position: absolute; left: 0; top: -70px;} #BlocoQuatro {margin-top: 20px; display: block; clear: both; margin-bottom: 0; width: 100%;} #BlocoQuatro img {width: 100%; display: block; clear: both;} #BlocoCinco {background: #000; display: block; clear: both; margin: 0; width: 100%; float: left;} #BlocoCinco p {color: #FFF; width: 400px;} #BlocoCinco h3 {color: #FFF; width: 400px;} #BlocoSeis {background: #000; display: block; clear: both; margin: 0; width: 100%; float: left;} #BlocoSeis p {color: #FFF; width: 100%;} #BlocoSeis h3 {color: #FFF; width: 100%;} #BlocoSeis .ConteudoBloco {float: right; width: 423px; margin-top: 20px;} #BlocoSeis .ConteudoBloco img {float: right;} #BlocoSeis img {float: left; display: block; clear: both;} #BlocoSete {background: #000; position: relative; display: block; clear: both; margin: 0; width: 100%; float: left; padding-top: 50px;} #BlocoSete .ConteudoBloco {position: absolute; width: 423px; right: 0;} #BlocoSete p {color: #FFF; width: 100%;} #BlocoSete h3 {color: #FFF; width: 100%;} #BlocoSete .ConteudoBloco img {float: right;} #BlocoSete img {float: left; display: block; clear: both;} #ImgMeramente {display: block; clear: both; padding-top: 5px;} #BlocoOito {} #BlocoOito iframe {width: 100%; max-width: 560px;} #FimBlocos {padding: 10px; text-align: center; font-size: 22px; font-weight: bold; color: #FFF; background: #c95913; border-bottom: 6px solid #000; text-transform: uppercase;} @media screen and (max-width: 860px) { #BlocoDois .ConteudoBloco {position: initial;} #BlocoDois {position: initial;} #BlocoDois h3 {width: 100%;} #BlocoDois p {width: 100%;} #MotoCrossImg {position: initial; margin-top: -150px;} #BlocoTres h3 {width: 100%;} #BlocoTres p {width: 100%;} #BlocoCinco h3 {width: 100%;} #BlocoCinco p {width: 100%;} #ImagemGrandeSeis {float: none; width: 100%; display: block; clear: both;} #BlocoSeis .ConteudoBloco {width: 100%; float: none;} #BlocoSeis .ConteudoBloco img {float: none; padding-top: 50px; display: block; clear: both;} #BlocoSete .ConteudoBloco {float: none; width: 100%; position: initial;} #BlocoSete .ConteudoBloco img {float: none;} #BlocoSete img {float: none; margin-top: 30px;} } @media screen and (max-width: 680px) { #MotoCrossImg {margin-top: 0;} } @media screen and (max-width: 560px) { #BlocoTres {position: initial;} #BlocoTres .BackgroundGeral {display: none;} #BlocoTres .ConteudoBloco {position: initial;} #MotoCrossImg {width: 100%;} } @media screen and (max-width: 440px) { #BlocoSeis .ConteudoBloco img {width: 100%;} #BlocoSete .ConteudoBloco img {width: 100%;} #BlocoTres .ConteudoBloco {padding: 0 30px;} .ConteudoBloco {padding: 0 30px;} } @media screen and (max-width: 400px) { #AreaLogo img {width: 100%;} }