﻿/*http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: top;
}
/* remember to define focus styles! */
:focus{outline: 0;}
body{line-height: 1;color: black;background: white;}
ol, ul{list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse: separate;border-spacing: 0;}
caption, th, td{text-align: left;font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after{content: "";}
blockquote, q{quotes: "" "";}

/* ============================================================================================*/
/* ------------------------------------DEFAULTS / CONTROLS-------------------------------------*/
/* ============================================================================================*/
/*Não funciona com o anything slider*/
/*input, div
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
} */

TEXTAREA, INPUT[type="text"], INPUT[type="email"]
{
    /* font size, line height, face */
    font: 13px/1.5 Segoe UI, "Segoe UI Light"; /* useful for supporting 100% width inclusive of padding and border */
    box-sizing: border-box;
    resize: none;
}


body
{
    font-family: Arial;
    background: url('/Images/global_background.png') repeat;
}

.globalMiddleBgdTop{width: 100%; height: 45px;  display: block;}
.globalMiddleBgdMiddle{width: 100%; min-height: 350px; background-repeat: repeat-y;}
.globalMiddleBgdBottom{width: 100%; height: 55px; display: block;}

/* ============================================================================================*/
/* ------------------------------------------ BODY --------------------------------------------*/
/* ============================================================================================*/
.topBody{width: 1080px; margin: 0 auto; height: 100px; display:block;}
.middleBody{width: 100%;height: auto;display:block; background: url('../Images/menus_background.png') no-repeat; -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}
.middleInsideBody{width: 1080px; margin: 0 auto; min-height: 200px; display:block;}
.footerBody{width: 1080px; margin: 0 auto; display:block; margin-top:5px; }
.mainBodyStyle{min-height: 200px;width: 100%;display: block;float: left;display:block;}

/* ============================================================================================*/
/* ----------------------------------------- HEADER -------------------------------------------*/
/* ============================================================================================*/
.mainLogoHeader{height: 85px;margin-left: 10px;margin-top:5px;}
.headerMenuContainer{float: right;display: block;}

.menuStyle{position: relative;display: block;float: right;border-bottom: 1px solid #fff;margin-top: 35px;padding-right: 80px;padding-left: 15px;max-height: 38px;}
.menuStyle ul li{margin-right: 20px;}
.menuStyle ul li a{color: #fff;font-size: 13pt;padding-bottom: 21px;}
.menuStyle ul li a:hover, .selectedMenuItem{border-bottom: 6px solid #F15C22;}
.sinceInformation{float: right;position: relative;right: 10px;top: -15px;font-size: 9pt;color: #F15C22;}

/* ============================================================================================*/
/* ----------------------------------------- FOOTER -------------------------------------------*/
/* ============================================================================================*/
.footerDiv{height: 65px;width: 100%;display: block;float: left;padding-bottom: 10px;}
.footerSNImages{margin-top: 10px;margin-left: 15px;display: inline-block;float: left;}

.facebookIcon, .twitterIcon, .youtubeIcon{display: inline-block;position: relative;width: 45px;height: 45px;}
.facebookIcon{margin-right: 5px;background-image: url('../Images/Icon_Facebook.png');}
.facebookIcon:hover{background-image: url('../Images/Icon_Facebook_Hover.png');}
.twitterIcon{margin-right: 5px;background-image: url('../Images/Icon_Twitter.png');}
.twitterIcon:hover{background-image: url('../Images/Icon_Twitter_Hover.png');}
.youtubeIcon{background-image: url('../Images/Icon_Youtube.png');}
.youtubeIcon:hover{background-image: url('../Images/Icon_Youtube_Hover.png');}

.footerContactLinksContainer{ margin-top: 10px;width: 625px;border-bottom: 1px solid #fff;height: 25px;}
.enviromentLink{float: right;margin-right: 30px;color: #fff;font-size: 14pt;text-decoration: none;padding-bottom: 6px;border-bottom: 6px solid transparent;}
.enviromentLink:hover, .enviromentLinkSelected{border-bottom: 6px solid #F15C22;}
.contactsLink{float: right;margin-right: 80px;color: #fff;font-size: 14pt;text-decoration: none;padding-bottom: 6px;border-bottom: 6px solid transparent;}
.contactsLink:hover, .contactsLinkSelected{border-bottom: 6px solid #F15C22;}
.footerCopyrightContainer{width: 625px; margin-top: 5px;}
.copyright {font-size: 7pt; color: #fff; margin-left: 10px; margin-top: 5px;}
.copyright a, .copyright a:visited, .copyright a:hover, .copyright a:link {font-size: 8pt;color: #fff; text-decoration: none;}

/* ============================================================================================*/
/* ----------------------------------------- DEFAULT ------------------------------------------*/
/* ============================================================================================*/

.newsBox
{
    position: relative;
    display: inline-block;
    float:left;
    height: 250px;
    width: 350px;
    background-color: #E5E6E6;
    margin-left: 30px;
    margin-top: -65px;
}

.newsBox:before, .newsBox:after
{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 7px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 15px 6px rgba(0,0,0, 0.8);
    -moz-box-shadow: 0 15px 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 15px 6px rgba(0, 0, 0, 0.8);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.newsBox:after
{
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

.carAndLogoZone{width: 100%; height: 380px; display: block;}
.imgLogoBig{float: left; margin-top: -40px; width:28%; margin-left: 10px;}
.imgCarBig{float: right; z-index: 10; height:380px;}
.orangeBox{width: 100%; height: 230px; max-height: 230px; margin-top:-85px; display: block; background-color: #F15C22;}
.newsContainer{height: 225px; display: block; width: 100%;}
.newsBottomTitle{height: 26px; display: block; width: 100%; background-color: #A7A9AC;text-align: center; padding-top: 5px; color: #fff; font-size: 13pt;}
.letteringContainer{display: inline-block; position: relative; float:left; margin-left: 15px; margin-top: -30px; width:680px;}
.bigSlogan{display: block; height:86px; margin-left:-15px;}
.smallSlogansContainer{display: block; margin-top: 20px; color: #fff; font-size: 13pt; white-space:nowrap;}
.packOfTwoSmallSlogans{display: inline-block; float: left; margin-right: 26px;}
.packOfTwoSmallSlogans span{display: block;}
.grayLineUnderOrange{width: 100%; height: 127px; display: block; background-image: url('/Images/small_line_background.png');}
/* ============================================================================================*/
/* ---------------------------------------- WH0 ARE WE ----------------------------------------*/
/* ============================================================================================*/
.tdLeftContainerQS{width: 500px; height: 100%; padding-left: 30px;}
.tdRightConatinerQS{width: 500px; height: 100%; padding-left: 30px;}
.titleWithUnderlineQS{width: 300px; display: block; position: relative; border-bottom: 1px solid #A6A5A5; font-size: 20pt; padding-bottom: 5px; margin-top: 10px; color: #F15C22;}
.leftTextContainerQS{display: block; position: relative; width: 95%; padding-top: 10px;}
.leftTextWithImageQS{display: block; float: left; color: #fff; font-size: 12pt; line-height: 22px;}
.leftImageContainerQS{display: inline; position: relative; margin-right: 8px; margin-bottom: 8px; float: left;}
.rightSubItemsBlockQS{width: 90%; margin-left: 5%; height: 50px; position: relative; display: block; margin-top: 30px;}
.rightSubItemTitleQS{width: 100%; text-align: center; color: #F15C22; font-size: 20pt; display: block;}
.rightSubItemSeparatorQS{height: 16px; margin: 0 auto; display: block;}
.rightSubItemTextQS{width: 100%; text-align: left; color: #fff; font-size: 12pt; display: block;}

/* ============================================================================================*/
/* ----------------------------------------- SERVICES -----------------------------------------*/
/* ============================================================================================*/
#carousel
{
    margin: 0 auto;
    margin-top: 40px;
    width: 540px;
    height: 300px;
    position: relative;
    clear: both;
    display: block;
}
#carousel img
{
    visibility: hidden; /* hide images until carousel can handle them */
    cursor: pointer; /* otherwise it's not as obvious items can be clicked */
    max-height: 350px;
    max-width: 400px;
}

.imageBox
{
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 6px 10px rgba(0, 0, 0, 0.7);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.7);
}

.tdLeftContainerSV{width: 400px; height: 100%; padding-left: 30px;}
.tdRightContainerSV{width: 600px; height: 100%; padding-left: 10px; overflow:hidden;}
.titleWithUnderlineSV{width: 300px; display: block; position: relative;border-bottom: 1px solid #A6A5A5; font-size: 20pt; padding-bottom: 5px; margin-top: 10px;color: #F15C22;}
.leftTextSpanSV{display: block; color: #fff; font-size: 12pt;padding-right: 10px; margin-top: 25px; line-height: 22px;}
.imagesTooltipAsSpan{display: block; width: 100%; text-align: center;color: #fff; font-size: 12pt; margin-top: 25px; font-style: italic;}

/* ============================================================================================*/
/* ---------------------------------------- PORTFOLIO -----------------------------------------*/
/* ============================================================================================*/
#carouselPortfolio
{
    margin: 0 auto;
    width: 1000px;
    height: 300px;
    position: relative;
    clear: both;
    display: block;
}

#carouselPortfolio img
{
    visibility: hidden; /* hide images until carousel can handle them */
    cursor: pointer; /* otherwise it's not as obvious items can be clicked */
    max-height: 300px;
    max-width: 460px;
}

.leftTextContainerPF{display: block; width: 450px; margin-left: 30px; height: auto; position: relative;}
.textWithUnderlinePF{width: 300px; display: block;position: relative; border-bottom: 1px solid #A6A5A5; font-size: 20pt; padding-bottom: 5px;padding-top: 10px; color: #F15C22;}
.leftTextPF{display: block; color: #fff;font-size: 12pt; margin-top: 25px; line-height: 22px;}
.portfolioCarousel{display: block; position: relative; margin-top: 21px; margin-left: -10px;width: auto; height:auto; padding-bottom:21px; overflow:hidden;}

/* ============================================================================================*/
/* --------------------------------------- COMPETITION ----------------------------------------*/
/* ============================================================================================*/
.sliderBox
{
    display: block;
    position: relative;
    margin-top: 20px;
}

.sliderBox:before, .sliderBox:after
{
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 14px;
    left: 165px;
    width: 50%;
    top: 80%;
    max-width: 220px;
    background: rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 18px 6px rgba(0,0,0, 0.9);
    -moz-box-shadow: 0 18px 6px rgba(0, 0, 0, 0.9);
    box-shadow: 0 18px 6px rgba(0, 0, 0, 0.9);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.sliderBox:after
{
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 165px;
    left: auto;
}

.youtubeVideos{margin-top: 20px;width: 350px;height: 260px;display: block;}
.bottomThumbVideos{height: 85px;width: 350px;overflow: hidden;display: block;position: relative;margin-top: 25px;white-space: nowrap;}
.youtubeThumb{cursor: pointer;height: 65px; width:85px; border: 2px solid #000;}
.youtubeThumb:hover{cursor: pointer;height: 65px;border: 2px solid #F15C22;}
.tdLeftContainerCP{width: 630px; height: 100%; padding-left: 30px;}
.tdRightContainerCP{width: 370px; height: 100%; padding-left: 20px;}
.titleWithUnderlineCP{width: 300px; display: block; position: relative; border-bottom: 1px solid #A6A5A5; font-size: 20pt; padding-bottom: 5px; margin-top: 10px; color: #F15C22;}
.leftTextCP{display: block; color: #fff; font-size: 12pt; padding-right: 10px; margin-top: 25px; line-height: 22px;}
.videosTitleCP{font-size:22pt; display:block; margin-top:40px; color:#F15C22;}

/* ============================================================================================*/
/* -------------------------------------- COMUNICATION ----------------------------------------*/
/* ============================================================================================*/
.titleWithUnderlineCM{width: 300px; display: block; position: relative; border-bottom: 1px solid #A6A5A5; font-size: 20pt; padding-bottom: 5px; margin-left:30px; padding-top: 10px; color: #F15C22;}
.newsSliderBox{display: block; position: relative; margin-top: 30px; padding-bottom: 20px; }
.newsTitleWithImageCM{display: block; color: #fff; font-size: 12pt; font-weight:600; line-height: 30px;}
.newsTextWithImageCM{display: block; color: #fff; font-size: 12pt; line-height: 22px;}

/* ============================================================================================*/
/* ---------------------------------------- PARTNERS ------------------------------------------*/
/* ============================================================================================*/
.titleWithUnderlinePT{width: 300px; display: block; position: relative; border-bottom: 1px solid #A6A5A5; font-size: 20pt; padding-bottom: 5px; margin-bottom:10px; margin-left:30px; padding-top: 10px; color: #F15C22;}
.centeredContainerPT{width: 590px; height: 360px; margin: 0px auto; padding: 19px 0 0 0; position: relative; display: block;}
.logosContainerPT{display: inline-block; float: left; width: auto; height: 100%; margin-left: 11px; margin-right: 11px; overflow:hidden; white-space:nowrap; }
.rowOfThreePartners{display: block; position: relative; width: 100%; height: 120px;}

/* ============================================================================================*/
/* ---------------------------------------- CONTACTS ------------------------------------------*/
/* ============================================================================================*/
.titleWithUnderlineCT{width: 300px; display: block; position: relative; border-bottom: 1px solid #A6A5A5; font-size: 20pt; padding-bottom: 5px; margin-left:30px; padding-top: 10px; color: #F15C22;}
.contactsContainer{display: inline-block; position:relative; width: 400px; margin-left:30px; padding-top:25px;}
.contactsContainer span{font-size:12pt; color:#fff; line-height:22px;}
.mapContainer{display: inline-block; position:relative;  width: 400px; height: 350px; margin-left:30px; padding-bottom:39px;}
.mapElement{width: 400px; height: 350px; display: block; position: relative;}

/* ============================================================================================*/
/* ---------------------------------- ENVIROMENT COMMITMENT -----------------------------------*/
/* ============================================================================================*/
.titleWithUnderlineEC{width: 300px; display: block; position: relative; border-bottom: 1px solid #A6A5A5; font-size: 20pt; padding-bottom: 5px; padding-top: 10px; color: #F15C22;}
.tdLeftContainerEC{width: 500px; height: 100%; padding-left: 30px;}
.leftTextContainerEC{display: block; width: 500px; height: auto; position: relative;}
.leftTextEC{display: block; color: #fff; font-size: 12pt; padding-right: 10px; margin-top: 25px; line-height: 22px;}
.rightTextContainerEC{display: block; width: 500px; margin-left: 30px; height: auto; margin-top:66px; position: relative;}