/*-----------------------------------------------------------------------
/*  Tema: R3|Fiude Agência de Inbound Marketing.
/*  Descrição: Style criado por R3|Fiude Agência de Inbound Marketing.
/*  Detalhes: Site desenvolvido com sistema interna R3|Controler e publicado em 22/02/2016.
/*  Version     : 1.1 - Inclusão de classe para aumentar o content à partir de tablet para 92%.
/*  Version     : 1.2 - Inclusão do Menu Slide Responsivo.
/*  Version     : 1.3 - Inclusão de classes para Botão topo ao rolar página e fixar elemento na página ao rolar a página.
/*  Version     : 1.4 - Inclusão no breakpoint de 480px linha de código transformando todos os boxes em 100%.
/*-----------------------------------------------------------------------*/

/*MENU DESKTOP E MOBILE*/
.nav-trigger {display: none;}
.nav-trigger span {cursor: pointer;}
.nav-mobile {position: relative;display: none; }
.nav-mobile ul {display: none;position: absolute;right: 0;padding: 0; background: rgba(204, 204, 204, 0.87);z-index: 1;width: 100%;margin-top: 129px!important;}
.nav-mobile li {display: block;padding: 5px 0;margin: 0 5px;border-bottom: solid 1px #3F4752; }
.nav-mobile li:nth-of-type(7) {border-bottom: 0; }
.nav-mobile a {display: block;color: #000;padding: 10px 10px;}
.nav-mobile a:hover {background-color: #3f3f52;color: #000;}

.header_topo{background-color: #3f3f52;color: #ccc;}
.header_topo a{color: #ccc;}
.header_topo a:hover{color: #fff;}
.header_nav a{padding: 15px;}
.header_nav a:hover{background-color: #3f3f52;color: #fff;}
.nav-main li{margin-right: 6px;}
.nav-main ul{margin-top: 31px;}

.breadcrumb a:hover{color: #FFF;}

.home_vantagens_icon{width: 10%;border: 1px solid #3f3f52;color: #3f3f52;border-radius: 50% 50% 0% 50%;font-size: 1.250em;padding-left: 2px;height: 44px;line-height: 43px;position: relative;text-align: center;vertical-align: middle;width: 44px; margin-right: 5px;}
.home_vantagens_desc{width: 90%;}
.home_vantagens_desc .box-5{width: 30%;}
.home_vantagens_desc .box-5:nth-of-type(5n+0){margin-right: 2.5% !important;}
.home_vantagens_desc h3{color: #000;font-weight: 600;}

footer h3{border-left: #fff 2px solid;padding-left: 15px;}
.footer_nav a{color: #ccc;}
.footer_nav a:hover{color: #fff; padding-left: 10px;}
.copyright a:hover{color: #fff;}
.footer_nav li{padding: 5px 0;}

.transparent{background: rgba(51, 51, 51, 0.55); height: 325px; border-top-right-radius: 40px; border-bottom-left-radius: 30px;}
.back-acessorio{background-image: url(images/acessorio01.jpg); height: 325px; border-top-right-radius: 40px; border-bottom-left-radius: 30px;}
.back-botoeira{background-image: url(images/botoeira02.jpg); height: 325px; border-top-right-radius: 40px; border-bottom-left-radius: 30px;}
.back-cabina{background-image: url(images/cabina04.jpg); height: 325px; border-top-right-radius: 40px; border-bottom-left-radius: 30px;}
.back-porta{background-image: url(images/porta03.jpg); height: 325px; border-top-right-radius: 40px; border-bottom-left-radius: 30px;}

.pagina img{margin-bottom: 15px;}
.text-align img{margin-left: 15px;}
.single_list .box-3{margin-bottom: 15px;min-height: 417px;}
.single_list .box-3 p{margin-bottom: 15px;}

.text-align b, .text-align strong{font-weight: 600;}

/*1738PX*/
@media (max-width: 108.625em){
  .nav-main ul{margin-top: -57px;} 
}

/*1280PX BREAKPOINT*/
@media (max-width: 80em){
    .nav-main li{margin-right: -7px;}
    .catalogo .box-4{width: 48%;}
    .home_vantagens_desc{width: 100%; background-size: cover; background-repeat: no-repeat;}
    .catalogo .box-4:nth-of-type(5){margin-left: 2%!important;}
}

/*1160PX*/
@media (max-width: 72.5em){
    .box-content, .box-sidebar{width: 100%; margin-bottom: 30px}
    .produtct_basics .box-sidebar{text-align: center;}
    .header_nav a{padding: 10px;}
    .logo span{font-size: 1em!important;}
}

/*1040PX*/
@media (max-width: 65.3125em){
    .header_nav a{padding: 8px;}
    .call-to-action1 .float-left, .call-to-action1 .float-right {float: initial!important;}
    .call-to-action1{text-align: center;}
    .call-to-action1 h2{margin-bottom: 25px;}
    .nav-main li{margin-right: -9px;}
    .logo span{font-size: 0.95em!important;}
}

/*960PX BREAKPOINT*/
@media (max-width: 60em){
    .content{float: left; width: 92% !important; padding: 30px 0; margin: 0 4%;}
    /*FUNÇÃO PARA OCULTAR/APARECER BOTÃO RESPONSIVO*/
    .nav-trigger {display: inline-block;background-color: #3f3f52;padding: 10px 17px;float: right; margin-top: 27px; color: #fff;}
    .nav-main {display: none; }
    .nav-mobile {display: block; }
    .nav-mobile ul{margin-top: 107px!important;}
    .nav-header .float-right{float: none!important;}
    .box-footer{width: 100%;}
    .box-footer2{width: 48%; margin-top: 50px;}
    .social{display: none;}
    .home_vantagens_icon{height: 36px; width: 36px; font-size: 1em; line-height: 38px;}
    .home_vantagens_desc h3{font-size:1.1em;}
    .call-to-action2 .float-left, .call-to-action2 .float-right {float: initial!important;}
    .call-to-action2{text-align: center;}
    .call-to-action2 h2{margin-bottom: 25px;}
    .breadcrumb-title h2{font-size: 1.8em;}
    .breadcrumb-title p{margin-top: 0!important; margin-bottom: 0;}
    .content-ajuste .box-2{width: 100%;margin-bottom: 25px;}
    .content-ajuste p{margin-bottom: 15px;}
    .dicas .box-sidebar, .dicas p, .dicas .box-content{margin-bottom: 0;}
    .dicas h2{font-size: 1.8em;}
    .nav-header img{margin-bottom: 7px;}
}

/*820PX*/
@media (max-width: 51.4375em){
     .nav-trigger { margin-top: -54px;}
}

/*780PX BREAKPOINT*/
@media (max-width: 48.75em){
    .servicos .box-2{width: 100%; margin-bottom: 25px;}
    .single_list .box-3:nth-of-type(3n+1){clear: none;}
    .single_list .box-3:nth-of-type(1n){margin-right: 2%!important;}
    .single_list .box-3{width: 48%;}
}

/*700PX BREAKPOINT*/
@media (max-width: 43.75em){
    .home_vantagens .box-2{width: 100%;}
}

/*560PX BREAKPOINT*/
@media (max-width: 35em){
    .box-footer2{width: 100%;}
    .catalogo .box-4{width: 100%;}
}

/*480PX BREAKPOINT*/
@media (max-width: 30em){
    /*BOXES RESPONSIVOS EM CELULARES*/
    .box-2, .box-3, .box-4, .box-5, .box-6, .box-sidebar, .box-content, .box-logomarca, .box-logomarca-complemento{width: 100%;}
    .single_list .box-3{width: 100%;}
     .nav-trigger { margin-top: -50px;}
}