/*@font-face {
    font-family: 'robotoslabreg';
    src: url('_fonts/robotoslab-regular.eot');
    src: url('_fonts/robotoslab-regular.eot') format('embedded-opentype'),
         url('_fonts/robotoslab-regular.svg#robotoslabreg') format('svg'),
         url('_fonts/robotoslab-regular.ttf') format('truetype'),
         url('_fonts/robotoslab-regular.woff') format('woff');
}*/
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
@font-face {
    font-family: 'montserratreg';
    src: url('_fonts/montserrat-reg.eot');
    src: url('_fonts/montserrat-reg.eot') format('embedded-opentype'),
         url('_fonts/montserrat-reg.svg#montserratreg') format('svg'),
         url('_fonts/montserrat-reg.ttf') format('truetype'),
         url('_fonts/montserrat-reg.woff') format('woff'); /* trocar o woff de lugar com o svg dá diferença pois faz renderizar o SVG e não a WOFF ou ao contrario */
}


/* == CONTENTS =========================================================== */
/* == Estrutura */
body{font-family: 'Roboto Slab', serif;/*font-family:'robotoslabreg', arial;*/}
h1,
h2,
h3{font-family:'montserratreg', arial;}

#head{position:fixed;width:100%;height:110px;z-index:99999;background:#fff;}
#head h1{text-indent:-9999em;background:url(../_img/ecorodovias.jpg) no-repeat 0 2px;width:200px;height:90px;}
#head ul{padding-top:38px;}
#head ul li{padding-left:16px;}
#head ul li a{color:#777;font-family:'montserratreg', arial;font-size:15px;text-transform:uppercase;text-decoration:none;display:block;padding:9px 16px;}
#head ul li a:hover{color:#444;}
#head ul li.dif{padding-left:42px;}
#head ul li.dif a{background:url(../_img/bt1.png) no-repeat center top;color:#9ecc50;}
#head ul li.dif a:hover{background:url(../_img/bt1.png) no-repeat center -40px;color:#9ecc50;}


.center{width:960px;margin:0 auto;}
.content{padding:10px 0;}


#aplicativo{background:url(../_img/app.jpg) no-repeat center 110px;height:640px;color:#fff;padding-top:110px;}
#aplicativo > div{padding-left:400px;width:570px;height:600px;margin:0 auto;position:relative;}
#aplicativo h2{text-transform:uppercase;font-size:24px;line-height:32px;padding-top:15px;}
#aplicativo p{font-size:18px;color:#ccc;}
#aplicativo ul,#foot ul{padding-top:6px;}
#foot ul{padding:6px 0 30px;margin: 0 0 0 310px;}
#aplicativo ul li:first-child,#foot ul li:first-child{padding-right:20px}
#aplicativo ul li a,#foot ul li a{background:url(../_img/apps.png) no-repeat right 0;display:block;height:51px;width:153px;text-indent:-9999em;}
#aplicativo ul li:first-child a,#foot ul li:first-child a{background-position: 0 0;width:162px;}
#aplicativo strong{padding-left:240px;font-weight:500;float:left;margin-top:110px;}
#aplicativo h1{position:absolute;left:280px;bottom:-70px;color:#222;text-align:center;font-size:40px;text-transform:uppercase;margin-top:-35px;}

#caracteristicas{overflow:hidden;}
#caracteristicas h1{color:#222;text-align:center;font-size:40px;text-transform:uppercase;margin-top:-35px;}
#caracteristicas h3{color:#777;text-align:center;font-size:20px;font-weight:500;}
#caracteristicas .list{padding:30px 0 60px 0;}
#caracteristicas .list li{text-align:center;width:300px;padding:80px 0 0 20px;background:url(../_img/icos.png) no-repeat center top;}
#caracteristicas .list li.previsao{background-position:center 10px;}
#caracteristicas .list li.alerta{background-position:center -290px;}
#caracteristicas .list li.trafego{background-position:center -590px;}
#caracteristicas .list li:first-child{padding-left:0;}
#caracteristicas .list li h2{color:#222;font-size:18px;text-transform:uppercase;}
#caracteristicas .list li p{color:#777;font-size:14px;line-height:24px;}
#caracteristicas .bxslider{background:#e9e9e9;padding:50px 0;}
#caracteristicas .bxslider li{position:relative;}
#caracteristicas .bxslider li h2{text-transform:uppercase;font-size:18px;}
#caracteristicas .bxslider li p{color:#777;font-size:14px;}
#caracteristicas .bxslider li img{width:420px;}
#caracteristicas .bxslider li div{/*position:absolute;top:50px;left:50%;margin-left:-100px;*/width:460px;padding-left:25px;/*height:100px;border:1px solid;*/}

#rodovias{padding-bottom:0;}
#rodovias h1{color:#222;text-align:center;font-size:40px;text-transform:uppercase;padding-top:40px;}
#rodovias h3{color:#777;text-align:center;font-size:20px;font-weight:500;padding-bottom:50px;}

#rodovias .bxrodovias{position:relative;overflow:hidden;width:100%;background:#e9e9e9;}
#rodovias .bxecos{width:50%;}
#rodovias .bxecos h2{text-align:left;margin-bottom:0;text-transform:uppercase;font-size:18px;width:465px;float:right;padding-top:40px;}
#rodovias .bxecos h3{text-align:left;margin-bottom:0;padding-bottom:3px;padding-top:5px;font-size:18px;color:#222;font-weight:700;}
#rodovias .bxecos p{color:#777;margin:0;line-height:18px;}
#rodovias .bxecos ul{padding:20px 0 8px 0;clear:both;}
#rodovias .bxecos ul li{height:88px;}
#rodovias .bxecos ul li.active{background:#fff;}
#rodovias .bxecos ul li > div{width:360px;cursor:pointer;float:right;padding:0 20px 0 86px;background:url(../_img/ecovias.png) no-repeat 0 8px;height:82px;}
#rodovias .bxecos ul li.ecovias > div{background-position:0 -110px;}
#rodovias .bxecos ul li.ecopistas > div{background-position:0 -238px;}
#rodovias .bxecos ul li.ecovia > div{background-position:0 -368px;}
#rodovias .bxecos ul li.ecocatarata > div{background-position:0 -500px;}
#rodovias .bxecos ul li.eco101 > div{background-position:0 -633px;}
#rodovias .bxecos a{background:url(../_img/arrow.png) no-repeat right center;float:right;margin:0 348px 20px 0;padding:4px 20px 4px 4px;color:#7cc576;font-family:'montserratreg', arial;font-size:16px;text-transform:uppercase;text-decoration:none;}
#rodovias .bximg{height:616px;width:50%;float:right;background:url(../_img/loading.gif) no-repeat center center;}
#rodovias .bximg div{/* height:590px; */height:616px;width:100%;background-size: auto 100% !important;}

#foot{background:#7cc576;color:#fff;}
#foot h2{font-size:40px;text-align:center;text-transform:uppercase;padding:45px 0 15px 0;}
#foot a.bbaixar{background:url(../_img/baixar.png) no-repeat 0 0;width:180px;height:53px;text-indent:-9999em;margin:0 auto 60px auto;display:block;}


#aplicativo,
#caracteristicas,
#rodovias,
#foot{width:100%;min-width:980px;}
/* == END: CONTENTS ====================================================== */


.assign{background:#68a863;font-size:11px;}
.assign p{color:#fff;}
.assign a{color:#fff;text-decoration:none;padding-top:10px;}



/* == CUSTOM GENERICS ==================================================== */
/* == GRADIENTS ====== */

/* == BUTTONS ======== */
.cor01{}

/* == TABS =========== */

/* == CAROUSSEL ====== */

/* == CHECKBOX and RADIOBUTTON ====== */

/* == INPUTFILE ====== */

/* == EXPANSIVE ====== */

/* == END: CUSTOM GENERICS =============================================== */









/* == bxSlider ================================ */
/** RESET AND LAYOUT ==================================*/
.bx-wrapper {position: relative;margin: 0 auto;padding: 0;*zoom: 1;}
.bx-wrapper img {max-width: 100%;display: block;}
#onde_ficar_detalhe .bx-wrapper img {max-width: inherit;}
/** THEME =============================================*/
.bx-wrapper .bx-viewport {}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {position: absolute;bottom: -30px;width: 100%;}
#buscaAvancada .bx-viewport{min-height:198px;}

/* LOADER */
.bx-wrapper .bx-loading {min-height: 50px;background: url(../img/loading.gif) center center no-repeat #fff;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 2000;}

/* PAGER */
.bx-wrapper .bx-pager {text-align: center;font-size: .85em;font-family: Arial;font-weight: bold;color: #666;padding-top: 20px;}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {display: inline-block;*zoom: 1;*display: inline;}
.bx-wrapper .bx-pager.bx-default-pager a {background:url(../_img/slider.png) no-repeat -134px -32px;text-indent: -9999px;display:block;width:27px;height:24px;margin:0 2px;outline: 0;}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {background-position:-134px -8px;}

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {left: -100px;background: url(../_img/slider.png) no-repeat 0 0;}
.bx-wrapper .bx-next {right: -100px;background: url(../_img/slider.png) no-repeat -67px 0;}
.bx-wrapper .bx-prev:hover {background-position: 0 0;}
.bx-wrapper .bx-next:hover {background-position: -67px 0;}
.bx-wrapper .bx-controls-direction a {position: absolute;top: 50%;margin-top: -16px;outline: 0;width:66px;height:66px;text-indent: -9999px;z-index: 9999;}
.bx-wrapper .bx-controls-direction a.disabled {display: none;}

#boxDicas .bx-controls-direction{display:none !important;}
#onde_ficar_detalhe .boxSlider .bx-wrapper .bx-controls-direction a{top:195px;}

/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {text-align: center;}
.bx-wrapper .bx-controls-auto .bx-start {display: block;text-indent: -9999px;width: 10px;height: 11px;outline: 0;background: url(../_img/slider.png) -86px -11px no-repeat;margin: 0 3px;}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {background-position: -86px 0;}
.bx-wrapper .bx-controls-auto .bx-stop {display: block;text-indent: -9999px;width: 9px;height: 11px;outline: 0;background: url(../_img/slider.png) -86px -44px no-repeat;margin: 0 3px;}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {background-position: -86px -33px;}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {text-align: left;width: 80%;}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {right: 0;width: 35px;}

/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {position: absolute;bottom: 0;left: 0;background: #666;background: rgba(80, 80, 80, 0.75);width: 100%;}
.bx-wrapper .bx-caption span {color: #fff;font-family: Arial;display: block;font-size: .85em;padding: 10px;}
/* == END: bxSlider =========================== */








/* == media queries ====================================================== */
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 1000px){
    .bx-wrapper .bx-prev{left:4px;}
    .bx-wrapper .bx-next{right:4px;}
    #caracteristicas .bxslider li div{width:390px;}
    #caracteristicas .bxslider li img{padding-left:50px;}
}



/* forçando a adaptação do layout no iPad com a altura mínima do site sendo da altura da tela. */
/* Portrait */
@media screen and (orientation:portrait) {
    /*html, body {min-height:1150px;}*/
}
/* Landscape */
@media screen and (orientation:landscape) {
    /*html, body {min-height:615px;}*/
}
/* http://www.websitedimensions.com/ */
/* http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ diversas aplicações de mediaqueries */




/* == print styles ======================================================= */
@media print {
  * { background: transparent !important;color: #000 !important;box-shadow:none !important;text-shadow: none !important; filter:none !important; -ms-filter: none !important;}
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; /* h5bp.com/t */ }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}