/* ------------------------------------------------------------------------------------------------------------------ */
/* body */
div#body { display: block; position: relative; width: 100%; padding: 0; margin: 0 auto 0 auto; }
    div#body div.arrow_bottom { position: absolute; bottom: -34px; left: 50%; width: 216px; height: 34px; margin: 0 0 0 -108px; background: transparent url(../../../../../src/img/products/arrow_bottom.png) no-repeat; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* primeiro bloco - titulo */

div#body div.first { display: block; position: relative; width: 960px; min-height: 100px; padding: 0 0 75px 0; margin: 0 auto; background-color: #ffffff; border-bottom: 1px solid #ff3333; }
    div#body div.first h1 { display: block; position: relative; font-family: 'Exo-Bold', sans-serif; font-size: 24px; color: #0a253e; text-align: center; }
    div#body div.first h2 { display: block; position: relative; font-family: 'Exo-Bold', sans-serif; font-size: 18px; color: #ff3333; text-align: center; margin: 62px 0 0 0; }
    div#body div.first p { display: block; position: relative; width: 515px; font-family: 'Exo-Regular', sans-serif; font-size: 14px; line-height: 20px; color: #0a253e; text-align: center; margin: 25px auto 0 auto; }
    div#body div.first img.title_arrow { display: block; position: relative; margin: 16px auto 0 auto; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* segundo bloco - modelos brancos */

div#body div.second { display: block; position: relative; width: 100%; min-height: 100px; padding: 85px 0 0 0; margin: 0 auto; background-color: #ffffff; }
    div#body div.second h2 { display: block; position: relative; width: 100%; font-family: 'Exo-Regular', sans-serif; font-size: 18px; color: #0a253e; text-align: center; }
    div#body div.second div.body { display: block; position: relative; width: 960px; margin: 40px auto 0 auto; }
        div#body div.second div.body img { display: block; position: relative; float: left; margin: 0 15px 20px 14px; width: 131px; height: 327px; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* terceiro bloco - modelos brancos */

div#body div.third { display: block; position: relative; width: 100%; min-height: 100px; padding: 85px 0 153px 0; margin: 0 auto; background-color: #ffffff; }
    div#body div.third h2 { display: block; position: relative; width: 100%; font-family: 'Exo-Regular', sans-serif; font-size: 18px; color: #0a253e; text-align: center; }
    div#body div.third div.red { display: block; position: relative; width: 100%; height: 299px; margin: 237px 0 0 0; background-color: #ff3333; }
        div#body div.third div.red div.body { display: block; position: relative; width: 960px; height: 299px; margin: 0 auto; }
            div#body div.third div.red div.body img.door1 { display: block; position: absolute; top: -146px; left: 0; width: 130px; height: 269px; }
            div#body div.third div.red div.body img.door2 { display: block; position: absolute; top: -146px; left: 207px; width: 130px; height: 269px; }
            div#body div.third div.red div.body img.door3 { display: block; position: absolute; top: -146px; left: 414px; width: 130px; height: 269px; }
            div#body div.third div.red div.body img.door4 { display: block; position: absolute; top: -146px; left: 621px; width: 130px; height: 269px; }
            div#body div.third div.red div.body img.door5 { display: block; position: absolute; top: -146px; left: 830px; width: 130px; height: 269px; }

            div#body div.third div.red div.body img.door6 { display: block; position: absolute; bottom: -153px; left: 0; width: 130px; height: 269px; }
            div#body div.third div.red div.body img.door7 { display: block; position: absolute; bottom: -153px; left: 207px; width: 130px; height: 269px; }
            div#body div.third div.red div.body img.door8 { display: block; position: absolute; bottom: -153px; left: 414px; width: 130px; height: 269px; }
            div#body div.third div.red div.body img.door9 { display: block; position: absolute; bottom: -153px; left: 621px; width: 130px; height: 269px; }
            div#body div.third div.red div.body img.door10 { display: block; position: absolute; bottom: -153px; left: 830px; width: 130px; height: 269px; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* quarto bloco - modelos marcenaria e coloridos */

div#body div.fourth { display: block; position: relative; width: 100%; min-height: 100px; padding: 85px 0 233px 0; margin: 0 auto; background-color: #ffffff; }
    div#body div.fourth h2 { display: block; position: relative; width: 100%; font-family: 'Exo-Regular', sans-serif; font-size: 18px; color: #ff3333; text-align: center; }
    div#body div.fourth div.blue { display: block; position: relative; width: 100%; height: 482px; margin: 244px 0 0 0; background-color: #0a253e; }
        div#body div.fourth div.blue div.body { display: block; position: relative; width: 960px; height: 482px; margin: 0 auto; }
        div#body div.fourth div.blue div.body h2 { display: block; position: absolute; top: 213px; left: 0; width: 100%; font-family: 'Exo-Regular', sans-serif; font-size: 18px; color: #ff3333; text-align: center; }
        div#body div.fourth div.blue div.body img.joinery1 { display: block; position: absolute; top: -155px; left: 88px; width: 130px; height: 269px; }
        div#body div.fourth div.blue div.body img.joinery2 { display: block; position: absolute; top: -155px; left: 306px; width: 130px; height: 269px; }
        div#body div.fourth div.blue div.body img.joinery3 { display: block; position: absolute; top: -155px; left: 524px; width: 130px; height: 269px; }
        div#body div.fourth div.blue div.body img.joinery4 { display: block; position: absolute; top: -155px; left: 742px; width: 130px; height: 269px; }

        div#body div.fourth div.blue div.body img.colors1 { display: block; position: absolute; bottom: -134px; left: 88px; width: 130px; height: 269px; }
        div#body div.fourth div.blue div.body img.colors2 { display: block; position: absolute; bottom: -134px; left: 306px; width: 130px; height: 269px; }
        div#body div.fourth div.blue div.body img.colors3 { display: block; position: absolute; bottom: -134px; left: 524px; width: 130px; height: 269px; }
        div#body div.fourth div.blue div.body img.colors4 { display: block; position: absolute; bottom: -134px; left: 742px; width: 130px; height: 269px; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* quinto bloco - caracteristicas */

div#body div.fifth { display: block; position: relative; width: 960px; min-height: 100px; padding: 91px 0 110px 0; margin: 0 auto; background-color: #ffffff; border-top: 1px solid #ff3333; border-bottom: 1px solid #ff3333; }
    div#body div.fifth h1.title1 { display: block; position: relative; width: 100%; font-family: 'Exo-Bold', sans-serif; font-size: 18px; color: #ff3333; text-align: center; }
    div#body div.fifth p.intro { display: block; position: relative; width: 700px; margin: 45px auto 0 auto; font-family: 'Exo-Regular', sans-serif; font-size: 14px; color: #0a253e; text-align: center; }
    div#body div.fifth div.pvc { display: block; position: relative; width: 330px; margin: 70px 0 0 130px; float: left; }
        div#body div.fifth div.pvc h1 { display: block; position: relative; width: 100%; font-family: 'Exo-Bold', sans-serif; font-size: 14px; line-height: 20px; color: #0a253e; text-align: center; }
        div#body div.fifth div.pvc p { display: block; position: relative; width: 100%; margin: 40px 0 0 0; font-family: 'Exo-Regular', sans-serif; font-size: 14px; line-height: 20px; color: #0a253e; text-align: center; }
    div#body div.fifth div.aluminium { display: block; position: relative; width: 330px; margin: 70px 130px 0 0; float: right; }
        div#body div.fifth div.aluminium h1 { display: block; position: relative; width: 100%; font-family: 'Exo-Bold', sans-serif; font-size: 14px; line-height: 20px; color: #0a253e; text-align: center; }
        div#body div.fifth div.aluminium p { display: block; position: relative; width: 100%; margin: 20px 0 0 0; font-family: 'Exo-Regular', sans-serif; font-size: 14px; line-height: 20px; color: #0a253e; text-align: center; }
    div#body div.fifth h1.title2 { display: block; position: relative; width: 100%; margin: 79px 0 0 0; font-family: 'Exo-Bold', sans-serif; font-size: 18px; color: #ff3333; text-align: center; }
    div#body div.fifth div.security { display: block; position: relative; width: 300px; margin: 87px 0 0 0; float: left; }
        div#body div.fifth div.security h1 { display: block; position: relative; width: 100%; font-family: 'Exo-Bold', sans-serif; font-size: 14px; line-height: 20px; color: #0a253e; text-align: center; }
        div#body div.fifth div.security p { display: block; position: relative; width: 100%; margin: 40px 0 0 0; font-family: 'Exo-Regular', sans-serif; font-size: 14px; line-height: 20px; color: #0a253e; text-align: center; }
    div#body div.fifth div.resistance { display: block; position: relative; width: 300px; margin: 87px 20px 0 20px; float: left; }
        div#body div.fifth div.resistance h1 { display: block; position: relative; width: 100%; font-family: 'Exo-Bold', sans-serif; font-size: 14px; line-height: 20px; color: #0a253e; text-align: center; }
        div#body div.fifth div.resistance p { display: block; position: relative; width: 100%; margin: 40px 0 0 0; font-family: 'Exo-Regular', sans-serif; font-size: 14px; line-height: 20px; color: #0a253e; text-align: center; }
    div#body div.fifth div.isolation { display: block; position: relative; width: 300px; margin: 87px 0 0 0; float: left; }
        div#body div.fifth div.isolation h1 { display: block; position: relative; width: 100%; font-family: 'Exo-Bold', sans-serif; font-size: 14px; line-height: 20px; color: #0a253e; text-align: center; }
        div#body div.fifth div.isolation p { display: block; position: relative; width: 100%; margin: 40px 0 0 0; font-family: 'Exo-Regular', sans-serif; font-size: 14px; line-height: 20px; color: #0a253e; text-align: center; }


/* ------------------------------------------------------------------------------------------------------------------ */
/* sexto bloco - portas garagem */

div#body div.sixth { display: block; position: relative; width: 960px; min-height: 100px; padding: 80px 0 80px 0; margin: 0 auto; background-color: #ffffff; }
    div#body div.sixth h2 { display: block; position: relative; width: 100%; font-family: 'Exo-Regular', sans-serif; font-size: 18px; color: #ff3333; text-align: center; }
    div#body div.sixth h3 { display: block; position: relative; width: 100%; margin: 26px 0 0 0; font-family: 'Exo-Bold', sans-serif; font-size: 14px; color: #0a253e; text-align: center; }
    div#body div.sixth p { display: block; position: relative; width: 100%; margin: 21px 0 0 0; font-family: 'Exo-Regular', sans-serif; font-size: 14px; color: #0a253e; text-align: center; }
    div#body div.sixth div.doors { display: block; position: relative; width: 386px; height: 326px; margin: 84px auto 0 auto; }
        div#body div.sixth div.doors img { display: block; position: absolute; top: 0; width: 169px; height: 326px; }
        div#body div.sixth div.doors img.left { left: 0; }
        div#body div.sixth div.doors img.right { right: 0; }


/* ------------------------------------------------------------------------------------------------------------------ */