/*||||||||||||||||||||||||||||||||||||||*/
/*||||||||   RESOLUÇÃO MOBILE   ||||||||*/
/*||||||||||||||||||||||||||||||||||||||*/
@media (min-width: 0px) and (max-width: 960px){
/*
===========
==GENERAl==
===========
*/
.container{display: block; margin: 0 auto; position: relative!important; width: 100%; float: left;}
body{width: 100%; background: #fff}
.content{padding: 0; float: left; width: 100%; display: block;}
.tt-page{color: #000; font-size: 25px; font-weight: bold; height: auto; line-height: 50px; padding-left: 17px; margin-bottom: 30px; width: 95%; float: left;}
.content h1{font-size: 20px; line-height: 30px; padding-top: 10px;}
.content h2{font-size: 17px; line-height: 25px;}
.content h3{font-size: 16px; line-height: 20px;}
.content p, .content li{font-size: 14px; line-height: 25px; padding-bottom: 10px;} 
.content .col{float: left; padding: 0%; width: 100%;}
.tt-page span{float: left; width: 100%;}
.tt-page nav{float: left; text-align: center; height: 30px; line-height: 30px; padding-top: 7px; display: table; width: 100%;}
.tt-page nav a{display: block; color: #000; font-size: 14px; margin-top: 5px;}

.content ul.fotos{display: table; width: 100%;} 

/*
==========
==HEADER==
==========
*/
#header{height: 70px; background-image: none; margin-top: -70px;box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.75);}
#header .container{background-color: #FFF; height: 70px;}
#header .fones .containerFone{width: 100%; text-align: center;}
#header .fones .containerFone ul{width: 100%;}

#header .triangulo{display: none}

#header .logo{background: #fff; float: left; height: 53px;width: 150px;margin-left: 0px;}
#header .logo img{display: block; padding: 5px 14px; float: left; height: 60px; float: left;}
#header nav{background: #fff; float: left; display: none}
#header nav > ul{display: block;}
#header nav ul > li{float: left; height: 90px; line-height: 90px; position: relative;}
#header nav ul > li > a{background: url(imgs/menu-fle-down.png) no-repeat 92% 50%; display: block; font-size: 14px; padding: 0 20px 0 20px;}
#header nav ul > li:hover{background-color: #f9f9f9;}
#header nav ul > li:hover ul{display: block;}
#header nav ul li ul{background: url(imgs/menu-fle-top.png) no-repeat 50% 0; display: none; padding-top: 7px; position: absolute; top: 82px; width: 100%; z-index: 10000;}
#header nav ul li ul li{background: #fff; border-bottom: 1px solid #f9f9f9; display: block; height: 40px; line-height: 40px; width: 100%;}
#header nav ul li ul li a{background: none!important; font-size: 12px; display: block; text-align: center; padding: 0px;}
.mobile-menu{display: block; float: right !important; background: #fff; float: left;}
.mobile-menu a{display: block; width: 100%; height: 100%; float: left; text-align: center;}
.mobile-menu a.active{color: #FFF; background-color: #198d00;}
.mobile-menu a p{display: block; float: left; height: 100%; text-align: center; font-weight: bolder; font-size: 25px; line-height: 60px;}
.mobile-menu a img{display: block; float: right; margin: 10px 5px 0 100px; width:50px; transition: 0.8s;}
.mobile-menu ul{position: absolute; width: 100%; z-index: 999999; margin-top:70px; left: 0%; display: none;box-shadow: 0px 25px 53px -1px rgba(0,0,0,0.75);}
.mobile-menu ul li{display: block; width: 100%; float: left;}
.mobile-menu ul li a{display: block; text-align: center; padding: 10px 0; background: #eee; border-bottom: 1px solid #ccc}
.telefones-mob{display: block; width: 100%; height: 73px; background: #fff; float: left;}
.telefones-mob p{display: block; text-align: center; font-weight: bold; font-size: 18px; padding: 5px 0}
.telefones-mob a{display: block; width: 100%; float: left; text-align: center; font-size: 18px; padding: 7px 0 0 0}
.faixa{display: none;}
.bannerPrinc{width: 100%; margin-top: 70px;}
.owl-dots{display: none;}

/*
==========
==FOOTER==
==========
*/
#footer .address article.last {
	width: 100%;
}
#footer .address{border-bottom: 1px dotted #8d8d8d; display: table; padding: 15px 0;}
#footer .address article{border-right: 1px dotted #8d8d8d; color: #8d8d8d; display: block; text-align: center; vertical-align: middle; width: 100%; margin: 10px 0}
#footer .address article.last{border-right: 0px;}
#footer .address article h1{font-size: 22px;}
#footer .address article h2{font-size: 14px; font-weight: lighter;}
#footer .facebook{-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-ms-filter: grayscale(0%);-o-filter: grayscale(0%);filter: grayscale(0%);}
#footer .copyright{color: #8d8d8d; font-size: 12px; text-align: center;}

/*
===========
==CHAMADA==
===========
*/
#chamada{padding: 15px; box-sizing: border-box;}

/*
===========
==EMPRESA==
===========
*/
#empresa .col{padding: 15px; box-sizing: border-box;}
#empresa ul.icons{display: block; margin: 10px auto 20px; width: 90%;}
#empresa ul.icons li{color: #8d8d8d; display: inline-block; font-size: 12px; text-align: center; min-height: 200px; padding: 10px 0; vertical-align: top; width: 50%; float: left; margin-left: 0px;}
#empresa ul.icons li:nth-child(even){border-right:none;}
#empresa ul.icons li h2{padding: 10px 0 5px;}
#empresa ul.icons li p{font-size: 12px; line-height: 20px;}

#empresa ul.fotos{display: table; width: 100%;}
#empresa ul.fotos li{display: table-cell; padding: 5px;}
#empresa ul.fotos li img{width: 100%;}

/*
=========
==FOTOS==
=========
*/
#fotos ul{display: block; width: 100%;}
#fotos ul li{width: 100%;text-align: center;}
#fotos ul li img{width: 45%;}
#fotos ul li:nth-child(even){float: left;}

/*
=======
==CNH==
=======
*/
#txtMoto p, #txtCarro p{text-align: justify;}
#cnh .container .content{box-sizing: border-box; padding: 15px;}
#cnh ul.itens{font-size: 0px; text-align: center; margin-bottom: 15px; margin-top: -32px; width: 100%;}
#cnh ul.itens li{border:none;border-top:1px solid #8d8d8d;float: left; margin: 1px; vertical-align: top; width: 100%;}
#cnh ul.itens li:first-child{border:none;}
#cnh ul.itens li:nth-child(2){float: left;}
#cnh ul.itens li img{-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-o-filter: grayscale(0%);filter: grayscale(0%);}
#cnh ul.itens li h3{color: #000; line-height: 35px; height: 35px;}
#cnh ul.itens li p{display: none; font-size: 12px; line-height: 20px!important; padding: 0px 5px 10px;}
#cnh ul.itens li .bt{border: 1px solid #198d00; background-color: #198d00; border-radius: 4px; display: block; font-size: 11px!important; margin: 0 auto; line-height: 20px; padding:10px 0; text-align: center; width: 29%;}
#cnh ul.itens li .img.moto{background-image: url('imgs/moto.png');}
#cnh ul.itens li .img.carro{background-image: url('imgs/carro.png');}
#cnh .textRepresentacao{width: 100%;}

/*
===============
==SINALIZACAO==
===============
*/
#sinalizacao .container .content{padding: 15px;box-sizing: border-box;}
#sinalizacao #sinalizacaoregulametacao ul{border-bottom: 1px dotted #8d8d8d; width: 100%;}
#sinalizacao #sinalizacaoregulametacao ul:last-child{border-bottom: 0px;}
#sinalizacao #sinalizacaoadvertencia ul{border-bottom: 1px dotted #8d8d8d; width: 100%;}
#sinalizacao #sinalizacaoadvertencia ul:last-child{border-bottom: 0px;}
#sinalizacao #semaforica img.right{float: left; margin-right: 5px;}
#sinalizacao #semaforica ul{border-bottom: none!important; padding: 0px;}
#sinalizacao #semaforica ul li{padding: 0px;}
#sinalizacao #semaforica .textRepresentacao{width: 100%;}
#sinalizacao #indicacao{display: none;}
#sinalizacao #indicacao ul{width: 100%;}
#sinalizacao #indicacao ul li{border-top: 3px solid #8d8d8d; display: inline-block; position: relative; padding: 0 0.5% 30px; vertical-align: top; width: 18.6%;}
#sinalizacao #indicacao ul li h3{text-align: center;}
#sinalizacao #indicacao ul li p{text-align: justify;}
#sinalizacao #indicacao ul li span{display: block; height: 60px; line-height: 60px; padding: 10px 0 5px; text-align: center;}
#sinalizacao #gestos ul{width: 100%;}
#sinalizacao #gestos li{display: inline-block; line-height: 18px; padding: 10px 0; vertical-align: top; width: 48%;}
#sinalizacao #gestos li img{float: left; margin-right: 5px; width: 76px;}
#sinalizacao #gestos .textRepresentacao{width: 100%;}

/*
=========
==AULAS==
=========
*/
#aulas #praticas, #aulas #teoricas, #aulas #simulador{display: none;}
#aulas #teoricas h3{line-height:40px;}
#aulas #teoricas nav{display: table; margin-right: 32px; width: 100%;}
#aulas #teoricas nav a{width: 100%; font-size: 13px; line-height: 30px; height: 30px; text-align: center; display: block;}
#aulas .textRepresentacao{width: 100%;}

/*
===========
==CONTATO==
===========
*/
#contato fieldset{border: none; padding: 0px!important; margin: auto; width: 90%; height: 290px;}
#contato p{text-align: center;}
#contato .col{float: left; margin: 0px; padding: 0; width: 100%;}
#contato .col:last-child{padding-right: 0px!important;}
#contato fieldset label{display: block; padding: 0px; margin: 0px!important; width: 100%;}
#contato fieldset button{background: #888888; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; color: #fff; font-size: 13px; float: right; margin: 10px 0 0; height: 37px; width: 100%;}

/*
=========================
==PAGAMENTOS E SERVIÇOS==
=========================
*/
.like-box {width: 100%; text-align: center; margin: 0;}
#pagamento article{width: 100%; display: block; margin-top: 20px; text-align: center;}
#pagamento article div{text-align: center;}
#pagamento .cartoes{text-align: center !important;padding-right: 0 !important;}
#pagamento .cartoes ul{width: 100%; display: block; margin: auto;}
#pagamento .cartoes li{width: 52px;}
#pagamento .links{padding-right: 0px !important;}
#pagamento .links h1{margin-left: 0 !important;}
#pagamento .links .bt{float: none; clear: both; margin: 10px 200px; display: none;}
#pagamento .links ul{display: block; float: none; width: 100%; margin: auto; padding-top: 5px;}
#pagamento .links li{display: inline-block; font-size: 0px; height: 36px; margin-right: 17px; width: 36px;}
#pagamento .links li a{display: block; height: 36px; opacity: 1; position: relative;}
#pagamento .links li a:hover span{display: inline-block; text-align: center;}
#pagamento .links li a img{position: absolute; top: -7px; left: 5px; opacity: 1; -moz-opacity: 1;}
#pagamento .links li span{background: #fff; border: 1px solid #dcdcdc; border-radius: 6px; display: none; position:absolute; font-size: 10px; left: 0px; line-height: 13px; top: 46px; padding: 4px 10px; z-index: 10;}
}

/*||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||   RESOLUÇÃO DE 0px à 624px   ||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||*/
@media (min-width: 0px) and (max-width: 624px){

/*
===============
==SINALIZACAO==
===============
*/
#sinalizacao #gestos .linkGestos a{width: 100%;display: block;padding: 10px 0; border-right:none;}
#sinalizacao #gestos .linkGestos a.active{border-bottom: none; font-weight: bold;}

}

/*||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||   RESOLUÇÃO DE 0px à 600px   ||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||*/
@media (min-width: 0px) and (max-width: 600px){

/*
=========
==AULAS==
=========
*/
.content ul.fotos li {
    display: block;
    width: 100%;
}
#aulas .bgImgRepresentacaoUm{display:none;}
#aulas .horarioNovo{float:none; width:auto}
#aulas .imgAulaOnline {
    float: none;
    width: 80%;
    padding: 20px 20px 10px 10px;
    text-align: center;
    margin-top: 20px;
    border-radius: 10px;
    position: relative;
    height: 128px;
}
/*
===============
==SINALIZACAO==
===============
*/
#sinalizacao #gestos li{width: 100%; float: left;}
#sinalizacao #gestos li:nth-child(even){float: left;}

}

/*||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||   RESOLUÇÃO DE 0px à 420px   ||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||*/
@media (min-width: 0px) and (max-width: 420px){
/*
===========
==EMPRESA==
===========
*/
#empresa ul.icons li{width: 100%; border-right: none}
#empresa ul.icons li:hover{border-bottom: none;}

/*
=========
==FOTOS==
=========
*/
#fotos ul li img{
	width: 100%;
}

/*
=======
==CNH==
=======
*/
#cnh .bgImgRepresentacao{width: 100%;text-align: center;}

/*
=========
==AULAS==
=========
*/
#aulas .bgImgRepresentacao{width: 100%;text-align: center;}

/*
===============
==SINALIZACAO==
===============
*/
#sinalizacao #semaforica .bgImgRepresentacao{width: 100%;text-align: center;}
#sinalizacao #gestos .bgImgRepresentacao{width: 100%;text-align: center;}

}

/*||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||   RESOLUÇÕES PARA AJUSTE DO BANNER   ||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||*/

/*|||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||   RESOLUÇÃO DE 1400px acima   ||||||||*/
/*|||||||||||||||||||||||||||||||||||||||||||||||*/
@media (min-width: 1400px){

.banner-item{
    background-repeat: no-repeat;
    background-size: 100%;
}

.banner04 .txtBanner{
	right: 50% !important;
}

}