img { display:block;}
a{ text-decoration:none !important;}

body { font-family: 'Gruppo', cursive; font-size:29px; line-height:36px; color:#414042; font-weight:300;}
p, span, h1, h2, h3, h4{letter-spacing:1px;}

body, html {height: 100%;width: 100%; background-color: #e7e8e9;}

video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

* {
    margin:0;
    padding:0;
    list-style:none;
    vertical-align:baseline;
}
/*---------------------------------------------*/
.push-left{ float: left;}
.push-right{ float: right;}


.animated {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(30px);
    }

    80% {
        -webkit-transform: translateX(-10px);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-2000px);
    }

    60% {
        opacity: 1;
        -moz-transform: translateX(30px);
    }

    80% {
        -moz-transform: translateX(-10px);
    }

    100% {
        -moz-transform: translateX(0);
    }
}

@-o-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-2000px);
    }

    60% {
        opacity: 1;
        -o-transform: translateX(30px);
    }

    80% {
        -o-transform: translateX(-10px);
    }

    100% {
        -o-transform: translateX(0);
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }

    60% {
        opacity: 1;
        transform: translateX(30px);
    }

    80% {
        transform: translateX(-10px);
    }

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

.animated.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    -moz-animation-name: bounceInLeft;
    -o-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px);
    }

    80% {
        -webkit-transform: translateX(10px);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes bounceInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(2000px);
    }

    60% {
        opacity: 1;
        -moz-transform: translateX(-30px);
    }

    80% {
        -moz-transform: translateX(10px);
    }

    100% {
        -moz-transform: translateX(0);
    }
}

@-o-keyframes bounceInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(2000px);
    }

    60% {
        opacity: 1;
        -o-transform: translateX(-30px);
    }

    80% {
        -o-transform: translateX(10px);
    }

    100% {
        -o-transform: translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    60% {
        opacity: 1;
        transform: translateX(-30px);
    }

    80% {
        transform: translateX(10px);
    }

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

.animated.bounceInRight {
    -webkit-animation-name: bounceInRight;
    -moz-animation-name: bounceInRight;
    -o-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px);
    }

    80% {
        -webkit-transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes bounceInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -moz-transform: translateY(-30px);
    }

    80% {
        -moz-transform: translateY(10px);
    }

    100% {
        -moz-transform: translateY(0);
    }
}

@-o-keyframes bounceInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        -o-transform: translateY(-30px);
    }

    80% {
        -o-transform: translateY(10px);
    }

    100% {
        -o-transform: translateY(0);
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        transform: translateY(-30px);
    }

    80% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

.animated.bounceInUp {
    -webkit-animation-name: bounceInUp;
    -moz-animation-name: bounceInUp;
    -o-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-o-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

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

.animated.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInY {
    0% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -moz-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -moz-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -moz-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInY {
    0% {
        -o-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        -o-transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        -o-transform: perspective(400px) rotateY(10deg);
    }

    100% {
        -o-transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateY(-10deg);
    }

    70% {
        transform: perspective(400px) rotateY(10deg);
    }

    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.animated.flipInY {
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    -moz-backface-visibility: visible !important;
    -moz-animation-name: flipInY;
    -o-backface-visibility: visible !important;
    -o-animation-name: flipInY;
    backface-visibility: visible !important;
    animation-name: flipInY;
}

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

video{width: 100% !important; max-width: 100%; height: auto !important;}
h2{ color: #676767; font-family: 'Racing Sans One', cursive; font-size: 63px; line-height: 70px; font-weight: lighter;}

.title{ background-color: #676767; padding: 40px 0 50px 0;}
.title h2{ color: #ffffff; text-align: center;}

.inside{ padding: 0 10%;}

.hide{ display: none;}

/*---------------------------------------------*/
#menu{ position:  fixed; top:30px; left:0; width: 100%; height: 120px; z-index: 900;}
#menu .push-left{ background-color: #e7e8e9; height: 100%; width: 35%;}
#menu .push-left h1{display: table; height: 100%; text-align: center; width: 100%;}
#menu .push-left h1 a{ display: table-cell; vertical-align: middle; padding: 0 20px;}
#menu .push-left h1 img{ margin: 0 auto;}
#menu .push-right{ background-color: #c00d0e; height: 100%; width: 65%;}
#menu .push-right ul{ width: 770px; margin: 35px auto 0 auto;}
#menu .push-right ul #bt-servicos{ margin: 0 100px;}
#menu .push-right ul li{ float: left;}
#menu .push-right ul a{ color: #ffffff; font-family: 'Racing Sans One', cursive; font-size: 35px; line-height: 38px;}
#menu .push-right ul a:hover, #menu .push-right ul li.bt-ativo a{ color: #820b0c;}
#menu #bt-face{ display: block; height: 41px; width: 41px; overflow: hidden; position: relative; margin-left: 100px;}
#menu #bt-face img{ position: absolute; top: 0; left: 0;}
#menu #bt-face:hover img{ top: -43px;}

#home{ background-color: #676767; position: relative;}
#home > .push-left{ width: 35%; text-align: center; display: table; height: 100%;}
#home > .push-left > div{ display: table-cell; vertical-align: middle; height: 100%; padding-top: 140px;}
#home > .push-left p{ text-shadow: 1px 3px 1px rgba(0,0,0,.6); font-size: 60px; line-height: 90px; font-family: 'Fjalla One', sans-serif; color: #ffffff;}
#home > .push-right{ width: 65%;}
#home #chamada-sm{ display: none;}

#poster-video{ display: none;}

#empresa{ padding: 150px 0 100px 0;}
#empresa h2{ margin-bottom: 50px; }
#empresa p{ margin-bottom: 20px;}

#servicos .push-left img{ margin-top: 50px;}
#servicos .push-right{ padding: 100px 0 100px 0;}
#servicos .push-right .inside > div{ margin-bottom: 20px;}

#area-atuacao{ padding-bottom: 50px;}
#area-atuacao h2{ margin-bottom: 30px;}
#area-atuacao .push-right{ position: relative;}
#area-atuacao .push-right p{ color:#414042; opacity: 0.5; font-size: 50px; line-height: 56px;}
#area-atuacao .push-right p span{ color: #ff0000;}

#possibilidades{ position: relative; width: 100%;}
#possibilidades > div{ z-index: 2; position: absolute; bottom: 50px; left: 150px;}
#possibilidades > div p{ color: #ffffff;font-family: 'Fjalla One', sans-serif; font-size: 90px; line-height: 96px;text-shadow: 1px 3px 1px #58310d; margin-bottom: 15px; }

#representante { background-color: #c00d0e; padding: 100px 0 70px 0;}
#representante h2{ font-family: 'Gruppo', cursive; font-size: 70px; color: #ffffff; line-height: 74px; text-align: center;}
#representante div{ text-align: center;}
#representante p{ color: #ffffff; margin-bottom: 20px;  padding: 0 18%;}
#representante img{ display: block; margin: 60px auto 80px auto;}

#empresas-representa{ background-color: #e7e8e9;}
#empresas-representa h2{ color: #808285 !important;}

#representante-casa-km{ border-top: 7px solid #e7e8e9; background-color: #ffffff; padding: 110px 0 110px 0;}
#representante-casa-km h2{ font-family: 'Gruppo', cursive; font-size: 70px; color: #676767; line-height: 74px; text-align: center;}
#representante-casa-km #logo-casa-km{ margin: 100px auto 100px auto; max-width: 40%;}
#representante-casa-km #logo-casa-km img{ display: block; margin: 0 auto;}
#representante-casa-km p{ text-align: center; width: 80%; margin: 0 auto;}
#representante-casa-km #pack-institucional{ margin: 100px auto 0 auto; max-width: 50%;}
#representante-casa-km #pack-institucional img{ margin: 0 auto; display: block;}

.coqueiros{background: url(../img/foto-coqueiro.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-background-attachment: fixed;
    -moz-background-attachment: fixed;
    -o-background-attachment: fixed;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 600px;}
.mobile .coqueiros{background: url(../img/foto-coqueiro.jpg)  no-repeat center center scroll !important; }



#contato{ position: relative;}
#contato > div{ position: absolute; top: 50%; right: 100px; z-index: 3; width: 30%; margin-top: 30px;}
#contato h2{ color: #ffffff; font-family: 'Racing Sans One', cursive; font-size: 55px; line-height: 60px; text-align: right;}
#contato h3{ color: #ffffff; font-weight: lighter; font-size: 54px; line-height: 58px; text-align: right;}
#contato h4{ color: #ffffff; font-weight: lighter; font-size: 23px; line-height: 26px; text-align: right;}
#contato form{ margin-top: 40px;}
#contato form p{ background-color: rgba(0,0,0,0.25); margin-bottom: 10px;}
#contato form p:hover{background-color: rgba(0,0,0,0.6);}
#contato form p span{ padding: 10px 20px; display: block;}
#contato form p input{ background:none; width: 100%; color: #ffffff; border: none; font-size: 25px;}
#contato form textarea{overflow-y:scroll; width: 100%; font-size: 25px; height: 160px; max-height: 160px;   resize: none; background: none; border: none; color: #ffffff;}
#contato form #bt-enviar{ background-color: rgba(0,0,0,0.25) !important; border: none; color: #fffff; padding: 10px 20px; display: block; margin: 0 auto; color: #ffffff;}
#contato form #bt-enviar:hover{background-color: rgba(0,0,0,0.6);}
#contato form #bt-gmaps{ width: 90%; display:block; margin: 20px auto; padding: 20px 10px;}
#contato form #bt-gmaps img{ display: block; margin: 0 auto;}
#contato form #bt-gmaps:hover{  background-color: rgba(0,0,0,0.25);}
#contato form label{ color: #ffffff; font-size: 24px; line-height: 28px; text-align: center; display: block; width: 100%;}
#contato form label sup{ font-size: 10px;}
#contato .msg{ text-align: center; font-weight: bolder; color: #ffffff; font-size: 15px; line-height: 18px; display: block; margin: 20px 0;}

.mobile #contato form #bt-enviar{ color: #000000;}

#footer{ background-color: #676767; padding:15px 0 ;}
#footer img{ display: block;  margin: 0 auto 0 auto;}
#footer a{ display: block; margin: 0 auto 10px auto; width: 20%;}
#footer a:hover { opacity: .4; display: block;}
#footer p{ color: #ffffff; text-align: center;  font-size: 18px; line-height: 24px;}

#contato form textarea::-webkit-scrollbar {
    display: block !important;
}

#wrapper-responsive-menu{ display: none; position: relative; height: 100%; width: 100%;}
#wrapper-responsive-menu #responsive-menu{ display:none;}
#bt-menu-responsive{ display: block; position: absolute; width: 30%; margin: -17px 15px 0 0; right: 0; top: 50%;}
#bt-menu-responsive span{ width:100%; height:8px; display:block; margin-bottom:5px; background-color: #ffffff;}
#responsive-menu ul{ margin:20px 0; padding-bottom: 20px;}
#responsive-menu li{ font-size:18px; line-height: 24px; text-align:center; margin-bottom: 10px;}
#responsive-menu #bt-face img{ max-width: 100%;}
#responsive-menu #bt-face{ width: 20px; height: 20px; margin: 12px auto 0 auto; display: block;}
#responsive-menu #bt-face:hover img{ top: 0;}

#responsive-menu{ display: none; z-index: 100; background-color: #ffffff; position: absolute; top: 100px; width: 100%; border-top: 1px solid #666666;}

#modal-window .lightbox-load-content{ height: 100%;}

/*--------------    Animações   ----------------------*/
/* Required */

.hidden{
    opacity: 0;
}

.visible{
    opacity: 1;
}

/*--------------	Media queries	------------------*/
/*
	* < 568px = xs
*/
@media screen and (max-width: 35.5em) {
    /*body, html{ background-color: linen;}*/

    #menu #menu-wrapper{ display: none;}
    #menu #wrapper-responsive-menu{ display: block;}

    #menu{ height: 100px;}
    #menu .push-left h1 a img{ max-height: 90px;}
    #menu .push-left{ width: 65%;}
    #menu .push-right{ width: 35%;}

    #home #cont-video{ float: none; width: 100%;}
    #home #chamada{ float: none; width: 100%;}
    #home #chamada-sm{ display: table-cell; padding: 50px 0;}
    #home #chamada-normal{ display: none;}
    #home > .push-left p { font-size: 25px; line-height: 35px; margin-bottom: 5px;}

    h2{ font-size: 32px; line-height: 36px; width: 100%; text-align: center;}
    .title{ padding: 15px 0 15px 0;}

    #empresa .inside .hide{ margin: 30px 0 30px;}
    #empresa p{ margin-bottom: 15px; font-size: 20px; line-height: 26px;}
    #empresa{ padding-top: 100px;}

    #area-atuacao .push-right{ float: left !important;}
    #area-atuacao .inside .hide{ margin: 30px 0 30px;}
    #area-atuacao .push-right p{ font-size: 26px; line-height: 32px;}

    #servicos .push-right{ padding-top: 40px;}
    #servicos p{ margin-bottom: 15px; font-size: 20px; line-height: 26px;}

    #possibilidades > div{ bottom: 10px; left: 0; width: 100%;}
    #possibilidades > div p{ font-size: 20px; line-height: 24px; text-align: center; margin-bottom: 5px;}

    #representante h2{ font-size: 20px; line-height: 24px;}
    #representante .sococo{ width: 30%; margin: 0 auto;}
    #representante img{ margin: 30px 0;}
    #representante p{  font-size: 16px; line-height: 20px; padding: 0 14%;}

    #empresas-representa h2{ font-size: 26px;}

    #coqueiros{ min-height: 250px;}

    #representante-casa-km h2{ font-size: 20px; line-height: 24px;}
    #representante-casa-km p{ font-size: 15px; line-height: 20px;}
    #representante-casa-km #logo-casa-km{ margin: 50px auto 50px auto;}
    #representante-casa-km #pack-institucional{ margin: 50px auto 0 auto;}

    #contato{ background: url("../img/Foto_Contato.jpg") no-repeat right 0;}
    #contato > .img-responsive{ display: none;}
    #contato > div{ position: static; width: 80%; margin: 0 auto; padding: 80px 0;}
    #contato h2{ font-size: 36px; line-height: 38px;}
    #contato h3{font-size: 36px; line-height: 38px;}
    #contato h4{font-size: 15px; line-height: 18px;}
    #contato form{ margin-top: 20px;}
    #contato form p span{ padding: 10px 20px 14px 20px; line-height: 14px;}
    #contato form p input{ font-size: 14px; line-height: 16px;}
    #contato form p textarea{ font-size: 14px; line-height: 18px; height: 120px;}
    #contato form #bt-enviar{ padding: 10px 20px; font-size: 14px; line-height: 16px;}
    #contato form #bt-gmaps{ width: 50%; padding: 10px 10px;}
    #contato form .msg{ font-size: 12px; margin: 10px 0;}
    #contato form label{ font-size: 16px; line-height: 18px;}

    #footer a{ width: 40%;}
    #footer p{ font-size: 10px; line-height: 15px;}
}

/*
	* > 568px e < 768 = sm
*/
@media (min-width: 35.5em) and (max-width: 48em) {
    /*body, html{ background-color: lightcyan;}*/

    .inside{ padding: 0 5%;}


    h2{ font-size: 40px; line-height: 44px;}
    .title{ padding: 15px 0 15px 0;}

    #menu #menu-wrapper{ display: none;}
    #menu #wrapper-responsive-menu{ display: block;}

    #menu{ height: 100px;}
    #menu .push-left h1 a img{ max-height: 90px;}
    #menu .push-left{ width: 65%;}
    #menu .push-right{ width: 35%;}


    #home #cont-video{ float: none; width: 100%;}
    #home #chamada{ float: none; width: 100%;}
    #home #chamada-sm{ display: table-cell; padding: 50px 0;}
    #home #chamada-normal{ display: none;}
    #home > .push-left p { font-size: 30px; line-height: 40px; margin-bottom: 5px;}

    #empresa .inside .hide{ margin: 30px 0 30px;}
    #empresa p{ margin-bottom: 15px; font-size: 20px; line-height: 26px;}
    #empresa{ padding-top: 100px;}

    #servicos .push-right{ padding-top: 40px;}
    #servicos p{ margin-bottom: 15px; font-size: 20px; line-height: 26px;}
    #servicos .push-right{ padding-bottom: 30px;}

    #area-atuacao .push-right{ float: left !important;}
    #area-atuacao .inside .hide{ margin: 30px 0 30px;}
    #area-atuacao .push-right p{ font-size: 30px; line-height: 34px;}


    #possibilidades > div{ bottom: 10px; left: 0; width: 100%;}
    #possibilidades > div p{ font-size: 30px; line-height: 34px; text-align: center; margin-bottom: 10px;}

    #representante h2{ font-size: 30px; line-height: 32px;}
    #representante .sococo{ width: 20%; margin: 0 auto;}
    #representante img{ margin: 30px 0;}
    #representante p{  font-size: 20px; line-height: 26px; padding: 0 14%;}

    #empresas-representa h2{ font-size: 35px;}

    #coqueiros{ min-height: 350px;}

    #representante-casa-km h2{ font-size: 30px; line-height: 32px;}

    #representante-casa-km p{ font-size: 20px; line-height: 24px;}

    #contato{ background: url("../img/Foto_Contato.jpg") no-repeat right 0;}
    #contato > .img-responsive{ display: none;}
    #contato > div{ position: static; width: 80%; margin: 0 auto; padding: 80px 0;}
    #contato h2{ font-size: 36px; line-height: 38px;}
    #contato h3{font-size: 36px; line-height: 38px;}
    #contato h4{font-size: 15px; line-height: 18px;}
    #contato form{ margin-top: 20px;}
    #contato form p span{ padding: 10px 20px 14px 20px; line-height: 14px;}
    #contato form p input{ font-size: 14px; line-height: 16px;}
    #contato form p textarea{ font-size: 14px; line-height: 18px; height: 120px;}
    #contato form #bt-enviar{ padding: 10px 20px; font-size: 14px; line-height: 16px;}
    #contato form #bt-gmaps{ width: 30%; padding: 10px 10px;}
    #contato form .msg{ font-size: 12px; margin: 10px 0;}
    #contato form label{ font-size: 16px; line-height: 18px;}

    #footer a{ width: 30%;}
    #footer p{ font-size: 13px; line-height: 15px;}


}
/*
	* > 768px e < 1024px = md
*/
@media (min-width: 48em) and (max-width: 64em) {
    /*body, html{ background-color: lightsalmon;}*/

    .title{ padding: 20px 0 20px 0;}

    #home #cont-video{ float: none; width: 100%;}
    #home #chamada{ float: none; width: 100%;}
    #home #chamada-sm{ display: table-cell; padding: 50px 0;}
    #home #chamada-normal{ display: none;}
    #home > .push-left p { font-size: 50px; line-height: 60px; margin-bottom: 5px;}

    #menu{ height: 80px;}
    #menu .push-left h1 a img{ max-height: 65px;}
    #menu .push-right ul{ margin-top: 20px;}
    #menu .push-right ul a{ font-size: 24px;}
    #menu .push-right ul #bt-servicos{ margin: 0 40px;}
    #menu .push-right ul{ width: 430px;}
    #menu #bt-face img{ max-width: 100%;}
    #menu #bt-face{ width: 20px; height: 21px; margin: 12px 0 0 40px;}
    #menu #bt-face:hover img{ top: -20px;}

    #empresa p{ margin-bottom: 15px; font-size: 16px; line-height: 18px;}
    #empresa h2{ margin-bottom:30px;}
    #empresa .push-right{ margin-top: 50px;}

    #area-atuacao .push-right{ margin-top: 120px;}
    #area-atuacao h2{ font-size: 36px; line-height: 40px; margin-bottom: 20px;}
    #area-atuacao .push-right p{ font-size: 26px; line-height: 32px;}

    #servicos .inside p{ margin-bottom: 15px; font-size: 16px; line-height: 18px;}


    #possibilidades > div{ bottom: 20px; left: 70px;}
    #possibilidades > div p{ font-size: 40px; line-height: 44px;}

    #representante h2{ font-size: 34px; line-height: 38px;}
    #representante .sococo{ width: 25%; margin: 0 auto;}
    #representante img{ margin: 40px 0;}
    #representante p{ font-size: 16px; line-height: 18px; padding: 0 14%;}

    #coqueiros{ min-height: 450px;}

    #representante-casa-km h2{ font-size: 34px; line-height: 38px;}
    #representante-casa-km p{ font-size: 20px; line-height: 24px;}

    #empresas-representa h2{ font-size: 40px;}


    #contato h2{ font-size: 20px; line-height: 24px;}
    #contato h3{font-size: 25px; line-height: 28px;}
    #contato h4{font-size: 13px; line-height: 15px;}
    #contato form{ margin-top: 20px;}
    #contato form p{ margin-bottom: 3px;}
    #contato form p span{ padding: 3px 20px 6px 20px; line-height: 14px;}
    #contato form p input{ font-size: 14px; line-height: 16px;}
    #contato form p textarea{ font-size: 14px; line-height: 18px; height: 90px;}
    #contato form #bt-enviar{ padding: 5px 20px; font-size: 14px; line-height: 16px;}
    #contato form #bt-gmaps{ width: 50%; padding: 10px 10px; margin: 5px auto;}
    #contato form .msg{ font-size: 12px; margin: 10px 0;}
    #contato form label{ font-size: 13px; line-height: 15px;}
    #contato > div{ margin-top: -213px; right: 60px;}

    #footer a{ width: 20%;}
    #footer p{ font-size: 15px; line-height: 18px;}
}
/*
	* 1024px e 1280px = lg
*/

@media (min-width: 64em) and (max-width: 80em) {
    /*body, html{ background-color: lightyellow;}*/

    #home > .push-left > div{ padding-top: 110px;}

    #menu{ height: 80px;}
    #menu .push-left h1 a img{ max-height: 65px;}
    #menu .push-right ul{ margin-top: 20px;}
    #menu .push-right ul a{ font-size: 24px;}
    #menu .push-right ul #bt-servicos{ margin: 0 60px;}
    #menu .push-right ul{ width: 500px;}
    #menu #bt-face img{ max-width: 100%;}
    #menu #bt-face{ width: 20px; height: 21px; margin: 12px 0 0 70px;}
    #menu #bt-face:hover img{ top: -20px;}
    #home > .push-left p{ font-size: 35px; line-height: 55px;}

    #empresa p{ margin-bottom: 15px; font-size: 18px; line-height: 20px;}
    #empresa h2{ margin-bottom:30px;}

    #area-atuacao .push-right{ margin-top: 180px;}
    #area-atuacao h2{ font-size: 46px; line-height: 50px; margin-bottom: 20px;}
    #area-atuacao .push-right p{ font-size: 34px; line-height: 38px;}

    #servicos .inside p{  margin-bottom: 15px; font-size: 18px; line-height: 20px;}

    #possibilidades > div{ bottom: 20px; left: 100px;}
    #possibilidades > div p{ font-size: 50px; line-height: 54px;}

    #representante h2{ font-size: 40px; line-height: 44px;}
    #representante .sococo{ width: 20%; margin: 0 auto;}
    #representante img{ margin: 40px 0;}
    #representante p{ font-size: 18px; line-height: 22px; padding: 0 14%;}

    #representante-casa-km h2{ font-size: 40px; line-height: 44px;}
    #representante-casa-km p{ font-size: 25px; line-height: 28px;}

    #contato h2{ font-size: 36px; line-height: 38px;}
    #contato h3{font-size: 36px; line-height: 38px;}
    #contato h4{font-size: 15px; line-height: 18px;}
    #contato form{ margin-top: 20px;}
    #contato form p span{ padding: 5px 20px 8px 20px; line-height: 14px;}
    #contato form p input{ font-size: 14px; line-height: 16px;}
    #contato form p textarea{ font-size: 14px; line-height: 18px; height: 120px;}
    #contato form #bt-enviar{ padding: 5px 20px; font-size: 14px; line-height: 16px;}
    #contato form #bt-gmaps{ width: 50%; padding: 10px 10px;}
    #contato form .msg{ font-size: 12px; margin: 10px 0;}
    #contato form label{ font-size: 16px; line-height: 18px;}
    #contato > div{ margin-top: -277px; right: 60px;}

    #footer a{ width: 20%;}
    #footer p{ font-size: 15px; line-height: 18px;}
}
/*
	* ≥ 1280px e < 1500 = xl
*/
@media (min-width: 80em) and (max-width: 93.750em){
    /*body, html{ background-color: lightblue;}*/

    #home > .push-left p{ font-size: 50px; line-height: 70px;}

    #empresa p{ margin-bottom: 15px; font-size: 24px; line-height: 26px;}
    #empresa h2{ margin-bottom:30px;}

    #area-atuacao .push-right{ margin-top: 210px;}
    #area-atuacao h2{ font-size: 56px; line-height: 60px; margin-bottom: 20px;}
    #area-atuacao .push-right p{ font-size: 40px; line-height: 44px;}

    #servicos .inside p{  margin-bottom: 15px; font-size: 24px; line-height: 26px;}

    #possibilidades > div{ bottom: 40px; left: 100px;}
    #possibilidades > div p{ font-size: 70px; line-height: 74px;}

    #contato h2{ font-size: 44px; line-height: 48px;}
    #contato h3{font-size: 44px; line-height: 48px;}
    #contato h4{font-size: 19px; line-height: 23px;}
    #contato form{ margin-top: 20px;}
    #contato form p span{ padding: 0 20px 5px 20px;}
    #contato form p input{ font-size: 20px; line-height: 24px;}
    #contato form p textarea{ font-size: 20px; line-height: 24px; height: 120px;}
    #contato form #bt-enviar{ padding: 5px 20px; font-size: 20px; line-height: 24px;}
    #contato form #bt-gmaps{ width: 60%;}
    #contato form label{ font-size: 20px; line-height: 24px;}
    #contato > div{ margin-top: -342px; right: 60px;}
}

/*
	* ≥ 1500 = xl
*/
@media (min-width: 93.750em){
    /*body, html{ background-color: lightgreen;}*/
    #area-atuacao .push-right{ margin-top: 250px;}

    #contato > div{ margin-top: -432px;}
}