/*
	CSS que engloba todas as páginas
*/
@media screen and (min-width: 1100px){
	section#quem-somos .box-mvv .bx:nth-child(1) {
      min-width: 50% !important;
      padding-right: 0;
      padding-left: 0;
    }
    section#quem-somos .box-mvv .bx:nth-child(2) {
      padding-right: 0;
      padding-left: 0;
      min-width: 26% !important;
    }
    section#quem-somos .box-mvv .bx:nth-child(2) p.px-lg-5 {
       padding: 0 !important;
    }
}
img.pt-1 {
    padding-top: 0 !important;
}
header .col-6.col-md-4.col-lg-3.col-xl-2.py-2.mod-bg-amarelo.text-center a.mod-text-azul {
    display: flex;    
    font-size: 15px;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
a#btn_chat{
	display: none !important;
}
.customer-cards img.img-fluid {
    margin: auto;
    display: block;
    vertical-align: middle;
    height: 100px;
    -webkit-object-fit: contain;
    object-fit: contain;
    -webkit-object-position: center;
    width: 100%;
}
.ancora {
    position: relative;
    top: -80px;
}
.card-header::after{
   content: "+";
    position: absolute;
    right: 11px;
    top: 12px;
    color: #f6cb2a;
    font-weight: 600;
    font-size: 21px;
}

.card-header.ver::after {
    content: "-";
}
.card-header.collapsed::after{
	content: "+";
}
/* --- global --- */
	@font-face {
	    font-family: "Roboto regular";
	    src: url("../font/Roboto-Regular.ttf");
	    font-weight: normal;
	}
	@font-face {
	    font-family: "Roboto light";
	    src: url("../font/Roboto-Light.ttf");
	    font-weight: lighter;
	}
	@font-face {
	    font-family: "Roboto bold";
	    src: url("../font/Roboto-Bold.ttf");
	    font-weight: lighter;
	}
	body{
		font-family: 'Roboto regular';
		color: var(--cinza);
	}
	:root{
		--amarelo:#ffcc29;
		--azul:#2352a0;
		--azul-1:#14366e;
		--azul-2:#1b3d77;
		--azul-3:#051d44;
		--cinza:#878787;
	}

/* --- classes modificadoras --- */
	a{
		text-decoration: none!important;
	}
	.fa-whats2{
		font-size: 20px!important;
	}
	.fa-phone2{
		font-size: 18px!important;
	}
	.mod-text-amarelo{
		color: var(--amarelo)!important;
	}
	.mod-bg-amarelo{
		background-color: var(--amarelo)!important;
	}
	.mod-text-azul{
		color: var(--azul)!important;
	}
	.mod-bg-azul{
		background-color: var(--azul)!important;
	}
	.mod-bg-azul-1{
		background-color: var(--azul-1)!important;	
	}
	.mod-bg-azul-2{
		background-color: var(--azul-2)!important;
	}
	.mod-bg-azul-3{
		background-color: var(--azul-3)!important;
	}
	.mod-button{
		padding: 6px 0px 6px 15px;
		background-color: var(--azul)!important;
	}
	.mod-button .bg-warning{
		padding: 6px 15px;
		margin-left: 10px;
		background-color: var(--amarelo)!important;
	}
	.mod-button img{
		width: 10px;
	}

	.title{
		font-family: "Roboto light";
	}
	.title strong{
		font-family: "Roboto bold";
	}

	hr.hr-title{
		border: 2px solid var(--amarelo);
		width: 60px;
		margin-top: 10px;
		margin-bottom: 30px;
		border-radius: 50px;
	}

	input,select{
		background-color: #f0f0f0!important;
		height: 49px!important;
	}

	::placeholder,select{
		color: #c7c7c7!important;
	}

/* --- button WhatsApp --- */
	#btn_WhatsApp{
		display: inline-block;
		width: 60px;
		height: 50px;
		padding-top: 10px;
		padding-left: 15px;
		border-radius: 20px 0 0 20px;
		position: fixed;
		bottom: 90px;
		right: 0px;
		z-index: 1000;
		background-color: var(--azul-1)
	}
	#btn_WhatsApp:hover {
		cursor: pointer;
		background-color: var(--azul);
	}

/* --- button top --- */
	#buttonTop{
		display: inline-block;
		width: 40px;
		height: 40px;
		text-align: center;
		border-radius: 50%;
		position: fixed;
		bottom: 30px;
		right: 12px;
		transition: background-color .3s, opacity .5s, visibility .5s;
		opacity: 0;
		visibility: hidden;
		z-index: 1000;
		background-color: var(--azul-1)
	}
	#buttonTop:hover {
		cursor: pointer;
		background-color: var(--azul);
	}
	#buttonTop.show {
		opacity: 1;
		visibility: visible;
	}
	#buttonTop .fa-arrow-up{
		color: var(--white);
	}

/* --- slick-slide --- */
	.slick-slide {
		margin: 0px 5px;
	}
	.btn-slick-carousel-left,
	.btn-slick-carousel-right{
		position: absolute;
		z-index: 10;
		top: 45%;
	}
	.btn-slick-carousel-left{
		left: -30px;
	}
	.btn-slick-carousel-right{
		right: -30px;
	}

/* --- header - topo ---*/
	header{
		position: absolute;
		z-index: 999;
		width: 100%;
	}
	header #topo a{
		font-size: 15px;
	}
	header #topo a img{
		margin-top: -5px;
	}
	header #topo .mod-bg-amarelo a{
		font-size: 16px;
		transition: .3s;
	}
	header #topo .mod-bg-amarelo a:hover{
		text-shadow: 2px 3px 3px #888;
		transition: .3s;
	}

/* --- header - nav ---*/
	.new-navbar{
		background-color: var(--white);
		border-bottom: 1px solid #ccc;
	}
	.new-navbar .navbar-brand img{
		width: 150px!important;
	}

	header .navbar-brand img{
		width: 200px;
	}
	header .navbar-nav li a img{
		margin-top: -5px;
		transition: .3s;
	}
	header .navbar-nav li a img:hover{
		transform: scale(1.1);
		transition: .3s;
	}
	header .navbar-nav li a:hover{
		font-family: "Roboto bold";
	}

/* --- carousel --- */
	#carousel .carousel-control-next,
	#carousel .carousel-control-prev{
		opacity: 1;
	}
	#carousel .carousel-item{
		height: 797px;
		background: no-repeat center center scroll;
	    background-size: cover;
	}
	#carousel .carousel-item h1{
		font-size: 45px;
		line-height: 40px;
		margin-bottom: 30px;
	}
	#carousel .carousel-item h1 span.font-weight-light{
		font-family: "Roboto light";
	}
	#carousel .carousel-item h1 span.font-weight-bold{
		font-family: "Roboto bold";
	}

/* --- carousel indicators --- */
	#carousel .carousel-indicators {
	    bottom: 40px;
	}
	#carousel .carousel-indicators li{
		margin-left: 5px;
		margin-right: 5px;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: var(--azul);
	}
	#carousel .carousel-indicators li.active{
		margin-top: -2px;
		width: 16px;
		height: 16px;
		border: 2px solid var(--azul);
		background-color: transparent;
	}
	#carousel .carousel-indicators li.active:before{
		margin-top: 12px;
		margin-left: 2px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: var(--azul);
	}

/* --- conheça --- */
	#quem-somos .row hr,
	#quem-somos .quem-somos-cards hr{
		border: 2px solid var(--amarelo);
		width: 10px;
		margin-top: 8px;
		margin-bottom: 8px;
	}
	#quem-somos p{
		font-size: 16px;
	}
	#quem-somos .row p{
		font-size: 14px;
	}

/* --- nossos numeros --- */
	#nossos-numeros{
		background: url(../imagens/banner/bg-nossos-numeros.jpg)no-repeat center center;
		background-size: cover;
	}
	#nossos-numeros .row .display-3{
		font-family: "Roboto bold";
		font-size: 74px;
	}
	#nossos-numeros .row span.text-warning{
		font-size: 70px;
		margin-left: -36px;
	}
	#nossos-numeros .row p.h5{
		margin-top: -10px;
	}

/* --- diferenciais --- */
	#diferenciais .row{
		background-color: #f7f7f7;
	}
	#diferenciais .parceiros,
	#diferenciais .assistencia,
	#diferenciais .variedade,
	#diferenciais .atendimento,
	#diferenciais .simulacao{
		background-size: cover;
		min-height: 200px;
	}
	#diferenciais .parceiros{
		background: url(../imagens/diferenciais/img-parceiros.jpg)no-repeat center center;
		clip-path: polygon(0 0, 100% 0, 100% 45%, 95% 50%, 100% 55%, 100% 100%, 0 100%);
		background-size: cover;
	}
	#diferenciais .assistencia{
		background: url(../imagens/diferenciais/img-variedade.jpg)no-repeat center center;
		clip-path: polygon(0 45%, 0 0, 100% 0, 100% 100%, 0 100%, 0 55%, 5% 50%);
		background-size: cover;
	}
	#diferenciais .variedade{
		background: url(../imagens/diferenciais/img-assistencia.jpg)no-repeat center center;
		clip-path: polygon(0 0, 100% 0, 100% 45%, 95% 50%, 100% 55%, 100% 100%, 0 100%);
		background-size: cover;
	}
	#diferenciais .atendimento{
		background: url(../imagens/diferenciais/img-atendimento.jpg)no-repeat center center;
		clip-path: polygon(0 45%, 0 0, 100% 0, 100% 100%, 0 100%, 0 55%, 5% 50%);
		background-size: cover;
	}
	#diferenciais .simulacao{
		background: url(../imagens/diferenciais/img-simulacao.jpg)no-repeat center center;
		clip-path: polygon(0 70%, 0 0, 100% 0, 100% 100%, 0 100%, 0 80%, 5% 75%);
		background-size: cover;
	}
	#diferenciais .row p{
		line-height: 20px;
	}
	#diferenciais .row .col-xl-3{
		max-width: 20%;
	}

/* --- para voce --- */
	#para-voce .accordion .card,
	#para-empresa .accordion .card{
		border: none;
		border-radius: 0 10px 10px 0;
		background-color: var(--azul-2);
	}
	#para-voce .accordion .card-header,
	#para-empresa .accordion .card-header{
		max-height: 53px;
		border-radius: 0 10px 10px 0;
		padding-top: 4px;
		padding-left: 2px;
		padding-right: 2px;
		cursor: pointer;
	}
	#para-voce .accordion .card-body,
	#para-empresa .accordion .card-body{
		background-color: #f5f5f5;
		padding: 30px 20px 30px 35px;
	}
	#para-voce .accordion .btn-link:hover,
	#para-empresa .accordion .btn-link:hover{
		text-decoration: none!important;
	}
	#para-voce .accordion h5 button,
	#para-empresa .accordion h5 button{
		font-size: 20px!important;
	}

	#para-voce .accordion h5 .font-weight-light,
	#para-empresa .accordion h5 .font-weight-light{
		font-family: "Roboto light";
	}
	#para-voce .accordion h5 .font-weight-bold,
	#para-empresa .accordion h5 .font-weight-bold{
		font-family: "Roboto bold";
	}

/* --- para a empresa --- */
	#para-empresa .accordion .card{
		border-radius: 10px 0 0 10px;
	}
	#para-empresa .accordion .card-header{
		border-radius: 10px 0 0 10px ;
	}

/* --- assistencia 24 horas --- */
	#assistencia .btn-slick-carousel-left,
	#assistencia .btn-slick-carousel-right{
		top: 40%;
	}
	#assistencia .customer-cards a{
		transition: .3s;
	}
	#assistencia .customer-cards a:hover{
		box-shadow: 0px 2px 5px #222;
		transition: .3s;
	}

/* --- formulário --- */
	#formulario{
		background: url(../imagens/banner/bg-formulario.jpg)no-repeat center center;
		background-size: cover;
	}
	#formulario .mod-button{
		padding: 4px 0px 4px 12px;
	}
	#formulario .mod-button .bg-warning{
		padding: 4px 10px;
		/*margin-left: 10px;*/
	}
	#formulario #btn_chat{
		position: absolute;
		margin-top: -20px;
		right: 0px;
		transition: .3s;
	}
	#formulario #btn_chat:hover {
		cursor: pointer;
		box-shadow: 5px 5px 5px #888;
		transition: .3s;
	}

/* --- modal solicitar cotação --- */
	#modalCotacao .modal-body img{
		margin-top: -5px;
	}
	#modalCotacao select,
	#modalCotacao input{
		height: 35px!important;
	}
	#modalCotacao .text-right button{
		padding-left: 0px!important;
		padding-right: 0px!important;
	}
	#modalCotacao .text-right button span.px-md-1{
		padding-left: 12px!important;
		padding-right: 8px!important;
	}
	#modalCotacao .mod-button .bg-warning{
		margin-left: 0px;
		padding: 6px 12px;
	}

/* --- footer --- */
	footer p,footer a{
		color: #718ba4;
		font-size: 14px;
	}
	footer a:hover{
		font-family: "Roboto bold";
		text-decoration: none;
		color: #718ba4;
	}
	footer hr.bg-white{
		margin-right: 50px;
		margin-top: 6px;
		margin-bottom: 16px;
	}
	footer li{
		list-style: none;	
	}

/* --- modal solicitar cotação ---*/
@media screen and (min-width: 769px){
	#modalCotacao .modal-lg{
		max-width: 1004px;
	}
	#modalCotacao .modal-body{
		padding-left: 110px!important;
		padding-right: 110px!important;
	}
	#modalCotacao select,
	#modalCotacao input{
		width: 254px;
	}
}

@media screen and (max-width: 768px){
	.new-whatsapp{
		display: none;
	}

	/* --- slick-slide --- */
	.btn-slick-carousel-left,
	.btn-slick-carousel-right{
		position: absolute;
		z-index: 1000;
		top: 25%!important;
	}
	
	/* --- button top --- */
	#buttonTop {
    	bottom: 38px;
    }

	/* ---header --- */
	header #topo .container{
		max-width: 100%;
		padding-left: 30px;
	}
	header .justify-content-end{
		background-color: var(--white);
		padding: 20px;
	}

	/* --- carousel --- */
	#carousel .carousel-caption {
	    left: 4%;
	}
	#carousel .carousel-item {
		background-position: 60% 0%;
	}
	#carousel .carousel-item h1{
		margin-top: 100px;
		line-height: 40px;
	}

	/* --- nossos nummeros --- */
	#nossos-numeros .container{
		max-width: 100%;
	}
	#nossos-numeros .row .display-3{
		font-size: 59px;
	}
	#nossos-numeros .row span.text-warning{
		font-size: 49px;
		margin-left: -27px;
	}
	#nossos-numeros .row p.h5{
		font-size: 15px;
		margin-top: -3px;
	}

	/* --- diferenciais --- */
	#diferenciais .parceiros,
	#diferenciais .assistencia,
	#diferenciais .variedade,
	#diferenciais .atendimento,
	#diferenciais .simulacao{
		background-size: cover;
		height: 160px;
		clip-path: none;
	}
	#diferenciais .row .col-xl-3{
		max-width: 100%;
	}
	#diferenciais .row p{
		line-height: 14px;
	}
	#diferenciais .row p.mod-text-azul{
		font-size: 12.68px;
	}
	#diferenciais .row p.mod-descricao{
		font-size: 11.09px;
	}

	/* --- para voce --- */
	#para-voce .container{
		max-width: 100%;
	}
	#para-voce .row .conteudo{
		margin-left: -55px;
	}

	/* --- para empresa --- */
	#para-empresa .container{
		max-width: 100%;
	}
	#para-empresa .row .conteudo{
		margin-right: -60px;
	}

	/* --- formulário --- */
	#formulario{
		background: url(../imagens/banner/bg-formulario-tablet.jpg)no-repeat center top;
		background-size: cover;
		padding-top: 25px;
		padding-bottom: 25px;
	}

	/* --- footer --- */
	footer.mod-bg-azul-1 .container{
		max-width: 100%;
	}
	footer iframe{
		max-width: 180px;
		max-height: 180px;
	}
}

@media screen and (max-width: 425px){
	footer .row div {
       min-width: 100% !important;
       text-align: center;
       padding: 0 !important;
    }
    footer .row div hr {
       display: none;
    }
    footer .row div p {
       margin-bottom: 10px !important;
       border-bottom: 1px solid #345b9c;
       width: 80%;
       margin: auto;
       padding-bottom: 10px;
    }
	header .col-6.col-md-4.col-lg-3.col-xl-2.py-2.mod-bg-amarelo.text-center {
       padding: 0;
       font-size: 13px;
       display: flex;
       -webkit-align-items: center;
       align-items: center;
       -webkit-justify-content: center;
       justify-content: center;
    }
	header .col.col-md.col-lg.py-2.text-left {
      padding: 0;
      -webkit-align-items: center;
      align-items: center;
      display: flex;
      font-size: 11px;
      -webkit-justify-content: center;
      justify-content: center;
    }
    .col-6.col-md.order-1.order-md-1 {
      min-width: 100%;
      margin-bottom: 30px;
    }
    #quem-somos p {
      padding: 0 !important;
    }
	/* --- global --- */
	.title{
		font-size: 28.50px;
	}

	/* --- header - top --- */
	header #topo .mod-bg-amarelo{
		padding: 0;
	}

	/* --- banner --- */
	#carousel .carousel-item {
		background-position: 59% 0%;
	}
	#carousel .carousel-item h1{
		font-size: 33.82px;
		margin-top: 100px;
		line-height: 40px;
	}
	#carousel .carousel-caption {
	    right: 5%;
	}

	/* --- conheça --- */
	.btn-slick-carousel-left{
		left: 15px;
	}
	.btn-slick-carousel-right{
		right: 15px;
	}

	/* --- diferenciais --- */
	#diferenciais .parceiros,
	#diferenciais .assistencia,
	#diferenciais .variedade,
	#diferenciais .atendimento,
	#diferenciais .simulacao{
		background-size: cover;
		height: 170px;
	}

	/* --- para voce --- */
	#para-voce .row .conteudo{
		margin-left: 0px;
	}
	#para-voce .accordion h5 button {
	    font-size: 18px!important;
	}

	/* --- para empresa --- */
	#para-empresa .accordion h5 button {
	    font-size: 18px!important;
	}

	/* --- conheça --- */
	#assistencia .btn-slick-carousel-left{
		left: -15px;
	}
	#assistencia .btn-slick-carousel-right{
		right: -15px;
	}

	/* --- footer --- */
	footer .col-12 img{
		width: 200px;
	}

	footer .new-contato a{
		font-size: 13px;
	}
}

@media screen and (max-width: 320px) {
	header #topo .mod-bg-amarelo a span{
		font-size: 13px;
	}
	/* --- carousel --- */
	#carousel .carousel-item h1 {
	    font-size: 28px;
	    line-height: 30px;
	}

	/* --- para voce / para empresa --- */
	#para-voce .accordion h5 button,
	#para-empresa .accordion h5 button{
		font-size: 14px!important;
	}
}