/* CSS customizado do tutorial, que irá prevalecer sobre o css do tema */

body.pagina_demonstracao {
	border-left:10px solid #233c4c;
}

header.geral {
	border-bottom:6px solid #0c2934;
	background:#233c4c;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#053545+0,233c4c+100 */
	
}

.index header.geral h1 {
	/* background:url(../midia/tema/icone_cnh_digital.png) no-repeat 50px center; */
	background:url(../midia/tema/icone_abertura_aplicativo_novo.png) no-repeat 50px center;
	background-size:105px;
	padding-left:168px;
	/* color:#fecd00; */
}

.pagina_demonstracao header.geral h1 {
	/* background:url(../midia/tema/icone_cnh_digital.png) no-repeat 71px 6px; */
	/* background:url(../midia/tema/icone_abertura_aplicativo_novo.png) no-repeat 71px 6px; */
	background:url(../midia/tema/icone_abertura_aplicativo_novo.png) no-repeat 57px 12px;
	/* background-size:50px; */
	background-size:40px;
	/* padding-left:126px; */
	padding-left:105px;
	/* color:#fecd00; */
	font-size:11pt;
}

.pagina_demonstracao header.geral {
	background:/*cor*/url("../midia/tema/aba_cor.svg") no-repeat 15px -6px,		
			   /*sombra*/url("../midia/tema/aba_sombra.svg") no-repeat right 6px;
}

section.conteudo header {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f1f1f1+0,f1f1f1+25,f1f1f1+25,f9f9f9+25,f9f9f9+25,f9f9f9+100 */
background: #f1f1f1; /* Old browsers */
background: -moz-linear-gradient(left,  #f1f1f1 0%, #f1f1f1 25%, #f1f1f1 25%, #f9f9f9 25%, #f9f9f9 25%, #f9f9f9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #f1f1f1 0%,#f1f1f1 25%,#f1f1f1 25%,#f9f9f9 25%,#f9f9f9 25%,#f9f9f9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #f1f1f1 0%,#f1f1f1 25%,#f1f1f1 25%,#f9f9f9 25%,#f9f9f9 25%,#f9f9f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#f9f9f9',GradientType=1 ); /* IE6-9 */

}

.index section.conteudo .topico > li > span::before {
    background-color: #B2C8AC;
}


.index section.conteudo .topico .demonstracao li a::before {
	background:#F6BE0D;
}

.index section.conteudo header h3 {
	color:#298090;
}

body#indice_demonstracoes nav.menuCategorias > ul > li.ativo::before {
	background: #F6BE0D;
}

.index section.conteudo .topico > li > span {
    border-right: 1px solid #298090;
}

.index section.conteudo .topico .demonstracao li a:focus, 
.index section.conteudo .topico .demonstracao li a:active {
	color:#404040 !important;
}

.navega ul li::before {
	background:#F6BE0D;
}

body.pagina_demonstracao nav.menuCategorias > ul > li ul li a:hover,
body.pagina_demonstracao nav.menuCategorias > ul > li > ul > li:hover > a,
body.pagina_demonstracao nav.menuCategorias > ul > li > ul > li > ul > li:hover > a {
	color:#444 !important;
}

.pagina_demonstracao section.conteudo header {
	box-shadow:0 0 3px rgba(0, 0, 0, 0.2); 
}

.navegacao_demonstracoes a.demo_anterior {
	background: 
		url("../midia/tema/bt_anterior_light.svg") no-repeat top right, 
		url("data:image/svg+xml;utf8,<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.3 30'><polygon class='cls-1' points='14.15 9.92 14.15 0 0 15 14.15 30 14.15 20.08 25.3 20.08 25.3 15 25.3 9.92 14.15 9.92' fill='rgba(12,71,92,1)'/></svg>") no-repeat top right;
}
.navegacao_demonstracoes a.proxima_demo {
	background: 
		url("../midia/tema/bt_proxima_light.svg") no-repeat top right,
		url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25.3 30' style='enable-background:new 0 0 25.3 30;' xml:space='preserve'><polygon class='st0' points='11.15 20.08 11.15 30 25.3 15 11.15 0 11.15 9.92 0 9.92 0 15 0 20.08 11.15 20.08' fill='rgba(12,71,92,1)'/></svg>") no-repeat top right;
}

.navegacao_demonstracoes a.demo_anterior:hover {
	background: 
		url("../midia/tema/bt_anterior_light.svg") no-repeat top right, 
		url("data:image/svg+xml;utf8,<svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25.3 30'><polygon class='cls-1' points='14.15 9.92 14.15 0 0 15 14.15 30 14.15 20.08 25.3 20.08 25.3 15 25.3 9.92 14.15 9.92' fill='rgba(68,116,131,1)'/></svg>") no-repeat top right;
	margin-right:8px;	
}
.navegacao_demonstracoes a.proxima_demo:hover {
	background: 
		url("../midia/tema/bt_proxima_light.svg") no-repeat top right,
		url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25.3 30' style='enable-background:new 0 0 25.3 30;' xml:space='preserve'><polygon class='st0' points='11.15 20.08 11.15 30 25.3 15 11.15 0 11.15 9.92 0 9.92 0 15 0 20.08 11.15 20.08' fill='rgba(68,116,131,1)'/></svg>") no-repeat top right;
	margin-right:2px;	
	margin-left:3px;	
}

.texto_intro_tutorial h1 {
	color:#298090;
}

.botoes_intro_tutorial {
	background-color: #233c4c;
    background-image: linear-gradient(bottom, rgb(21,56,70) 0%, rgb(12,41,52) 100%);
    background-image: -o-linear-gradient(bottom, rgb(21,56,70) 0%, rgb(12,41,52) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(21,56,70) 0%, rgb(12,41,52) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(21,56,70) 0%, rgb(12,41,52) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(21,56,70) 0%, rgb(12,41,52) 100%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(21,56,70)), color-stop(1, rgb(12,41,52)) );

    box-shadow: inset 0px 1px 0px #062223, 0px 5px 0px 0px #062223, 0px 10px 5px #999;
}

.botoes_intro_tutorial:active {
    background-image: linear-gradient(bottom, rgb(12,41,52) 0%, rgb(21,56,70) 100%);
    background-image: -o-linear-gradient(bottom, rgb(12,41,52) 0%, rgb(21,56,70) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(12,41,52) 0%, rgb(21,56,70) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(12,41,52) 0%, rgb(21,56,70) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(12,41,52) 0%, rgb(21,56,70) 100%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(12,41,52)), color-stop(1, rgb(21,56,70)) );
    -webkit-box-shadow: inset 0px 1px 0px #062223, 0px 2px 0px 0px #062223, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #062223, 0px 2px 0px 0px #062223, 0px 5px 3px #999;
    -o-box-shadow: inset 0px 1px 0px #062223, 0px 2px 0px 0px #062223, 0px 5px 3px #999;
    box-shadow: inset 0px 1px 0px #062223, 0px 2px 0px 0px #062223, 0px 5px 3px #999;
}

.botoes_intro_tutorial::before {
	background-color: #062223;
    -webkit-box-shadow: inset 0px 1px 0px #000, 0px 1px 0px #1f4b5c;
    -moz-box-shadow: inset 0px 1px 0px #000, 0px 1px 0px #1f4b5c;
    -o-box-shadow: inset 0px 1px 0px #000, 0px 1px 0px #1f4b5c;
    box-shadow: inset 0px 1px 0px #000, 0px 1px 0px #1f4b5c;
}

.botoes_intro_tutorial:active::before {
	background-color:#0D2A35;
    -webkit-box-shadow: inset 0px 1px 0px #1f4b5c, 0px 3px 0px #000, 0px 6px 3px #062223;
    -moz-box-shadow: inset 0px 1px 0px #1f4b5c, 0px 3px 0px #000, 0px 6px 3px #062223;
    -o-box-shadow: inset 0px 1px 0px #1f4b5c, 0px 3px 0px #000, 0px 6px 3px #062223;
    box-shadow: inset 0px 1px 0px #1f4b5c, 0px 3px 0px #000, 0px 6px 3px #062223;
}

/* Destaque 'Importante'*/
.destaque_importante {
	border:1px solid #e6952a;
	padding: 10px 5px 4px 12px;
	border-left-width:10px;
	margin-top:15px;
}
.texto_introducao .destaque_importante {
	padding: 18px 10px 0px 20px;
	margin-top:0;
}

/***************************************************************************************
****************************************************************************************/
/* Orientações Importantes - Procedimentos */
/***************************************************************************************
****************************************************************************************/
ul.procedimentos {
	list-style-type:none;
	padding-left:80px;
	margin-bottom:30px;
}

ul.procedimentos  li{
	background:#dadada;
	border-radius:0 10px 10px 0;
	min-height:80px;
	padding:28px 20px 10px 25px;
	position:relative;
	margin-bottom:5px;
	color:#000;
}

ul.procedimentos  li::before{
	content:'';
	background:#233c4c;
	width:80px;
	height:80px;
	position:absolute;
	top:0;
	left:-80px;
	border-radius:10px 0 0 10px;
	color:#fff;
	text-align:center;
	font-size:36px;
	padding-top:27px;
	transition:0.3s all ease;
}

ul.procedimentos  li:hover{
	background:#e7e7e7;;
}

ul.procedimentos  li:hover::before{
	background:#447483;
}

ul.procedimentos  li:nth-child(1) { padding-top:17px; }
ul.procedimentos  li:nth-child(4), ul.procedimentos  li:nth-child(5) { padding:6px 20px 7px 25px; }

ul.procedimentos  li:nth-child(1)::before{ content:'1'; }
ul.procedimentos  li:nth-child(2)::before{ content:'2'; }
ul.procedimentos  li:nth-child(3)::before{ content:'3'; }
ul.procedimentos  li:nth-child(4)::before{ content:'4'; }
ul.procedimentos  li:nth-child(5)::before{ content:'5'; }
ul.procedimentos  li:nth-child(6)::before{ content:'6'; }
ul.procedimentos  li:nth-child(7)::before{ content:'7'; }
ul.procedimentos  li:nth-child(8)::before{ content:'8'; }
ul.procedimentos  li:nth-child(9)::before{ content:'9'; }
ul.procedimentos  li:nth-child(10)::before{ content:'10'; }

ul.procedimentos  li::after{
	content:'';
	position:absolute;
	top:31px;
	left:-1px;
	width: 0;
	height: 0;
	border: 0 solid transparent;
	border-bottom-width: 9px;
	border-top-width: 9px;
	border-left: 0px solid #233c4c;
	transition:0.3s all ease;
}

ul.procedimentos  li:hover::after{
	border-left: 10px solid #447483;
}

/* imagem cnh introdução */
.cnh_introducao {
	/* margin: 0px 0px 20px 20px;  */
	/* width: 147px;  */
	/* float: right; */
	
	display: block;
    margin: 37px auto 40px;
    width: 523px;
	border-radius:7px;
}

section.conteudo header h4 {
	font-size:1.3em;
}

/* ícones página de contatos */
.contatos { 
	list-style-type:none !important; 
	/* padding-left:0 !important; */
	border:1px solid #e6952a;
	border-left-width:10px;
	padding:20px 10px 5px 22px !important;
}
.contatos li {
	padding-left:70px;
	min-height:53px;
	margin-bottom:20px !important;
}
.contatos li:nth-child(1) {background:url(../midia/tema/icone_email.png) no-repeat left center; padding-top:4px; }
.contatos li:nth-child(2) {background:url(../midia/tema/icone_formulario.png) no-repeat 8px center; padding-top:13px; }

/***************************************************************************************
****************************************************************************************/
/* VÍDEO */
/***************************************************************************************
****************************************************************************************/
video {
	box-shadow:0 0 20px rgba(0, 0, 0, 0.2);
	margin:15px auto;
}

.download_video {
    text-align: center;
}
.botao_video {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    box-shadow: 0 -1px 3px #ccc inset;
    color: #888;
    font-weight: bold;
    line-height: 250%;
    margin-left: 3px;
    margin-right: 3px;
    padding: 6px 10px;
    text-decoration: none;
}


/***************************************************************************************
****************************************************************************************/
/* RESPONSIVIDADE DA PÁGINA INICIAL */
/***************************************************************************************
****************************************************************************************/
.categoria_responsivo {
	display:none;
}


@media screen and (max-width: 1005px) {
	body.index {
		border-left:0;
		background-image:none;
		overflow-x:hidden;
		width:100%;
	}
	
	html.html_index { overflow-x:hidden }
	
	header.geral {
		height:80px;
	}
	
	.index header.geral h1 {
		padding: 19px 20px;
		font-size: 2.3rem;
		padding-left: 87px;
		background-size: 60px;
		background-position: 18px center;
	}
	
	.index .responsivo {
		width:200%;
		background:red;
	}
	
	/* TEXTO APRESENTAÇÃO */
	.texto_intro_tutorial {		
		left: 10%;		
		margin-left: 0;
		margin-top:0 !important;
		top: 10%;
		width: 80%;
		font-size:3vw;
	}
	
	.texto_intro_tutorial h1 {
		font-size:5vw;
	}
	
	.texto_intro_tutorial p {
		margin-bottom:5%;
	}
	
	.botoes_intro_tutorial {
		font-size:3vw;
		margin:30px auto;
		float:none;
		width:auto;
	}
	
	/* MENU CATEGORIAS */
	.index nav.menuCategorias {
		min-height: auto;
		margin-top:auto;
		width:50%;
		float:left;
		transition:0.3s all ease;
	}
	.index nav.menuCategorias.oculto_responsivo {
		margin-left:-50%;
	}
	
	.index nav.menuCategorias .tituloMenuCategorias {
		padding:18px 15px;
		text-align:left;
		margin:0;	
		/* font-size:3vw; */
	}
	
	.index nav.menuCategorias li a {
		/* font-size:3vw; */
		padding:4%;
	}
	
	body#indice_demonstracoes nav.menuCategorias > ul > li.ativo {
		width:auto;
	}
	
	body#indice_demonstracoes nav.menuCategorias > ul > li.ativo > a {
		padding:4%;
	}
	
	.index nav.menuCategorias li {
		text-align:left;
	}
	
	body#indice_demonstracoes nav.menuCategorias > ul > li.ativo::before {
		left:0;
		top:0;
	}
	
	.index .categoria_responsivo {
		display:block;
		font-size:4vw;
		cursor:pointer;
		padding:3vw 3vw 3vw 9vw;
		color:#298090;
	}
	
	.seta_voltar_categoria {
		background: #F6BE0D;
		border-radius: 4vw;
		height: 5vw;
		left: 2vw;
		position: absolute;
		width: 5vw;
		top:2.6vw;
	}
	.seta_voltar_categoria:after, 
	.seta_voltar_categoria:before {
		right: 37%;
		top: 12%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	.seta_voltar_categoria:after {
		border-color: transparent;
		border-right-color: #F6BE0D;
		border-width: 1vw;
		margin-top: 1vw;
		margin-right:-2px;
	}
	.seta_voltar_categoria:before {
		border-color: transparent;
		border-right-color:#233c4c;
		border-width: 2vw;
	}
	
	/* CONTEÚDO */
	.index section.conteudo{
		width:50%;
		float:left;
	}
	.index section.conteudo header {
		display:none;
	}	
	
	.index section.conteudo .topico > li {
		border:none;
	}
	
	.index section.conteudo .topico > li > span {
		position:static;
		width:100%;
		height:auto;		
		padding:3vw 3vw 3vw 6vw;
		display:block;
		font-size:3.5vw;
		color:#000;
		border-top:10px solid #fafafa;
		border-right:none;
	}
	
	.index section.conteudo .topico > li > span::before {
		height: 1.5vw;
		margin-left: -3vw;
		margin-top: 1vw;
		width: 1.5vw;
	}
	
	.index section.conteudo .topico .demonstracao li  {
		box-shadow:none;
	}
	
	.index section.conteudo .topico .demonstracao li:nth-child(2n) {
		background-color:#f3f3f3;
	}
	
	.index section.conteudo .topico > li > ul li a{
		font-size:3vw;
		padding:5vw 5vw 5vw 10vw !important;
		color:#000;
	}
	
	.index section.conteudo .topico > li {
		background-color:#e4e4e4 !important;
	}
	
	.pagina_demonstracao section.conteudo header { background:#f1f1f1; }
	.pagina_demonstracao header > h2 { display:none; }
	.pagina_demonstracao header > h3 { padding-left:70px; }
	.pagina_demonstracao header > h4 { padding-left:70px; }
	
	.nav-trigger.menu_clicado + label { z-index:15; left:22%; }
	
	.pagina_demonstracao .menu_clicado {
		width:20%;
	}
	
	.pagina_demonstracao nav.menuCategorias .tituloMenuCategorias {
		margin-top:0;
		padding-top:15px;
	}
}

@media screen and (max-width: 500px) {
	.index nav.menuCategorias .tituloMenuCategorias {	
		font-size:8vw;
	}
	
	.index nav.menuCategorias li a {
		font-size:8vw;
	}
}

@media screen and (min-width: 501px) and (max-width:1005px) {
	.index nav.menuCategorias .tituloMenuCategorias {	
		font-size:4vw;
	}
	
	.index nav.menuCategorias li a {
		font-size:4vw;
	}
}

/* texto fancybox - específico para tutorial CDT */
a.link_fancybox {
	/* background: url('../midia/tema/interacao.gif') no-repeat 5px center rgba(255,255,255,0.6); */
	background: url('../midia/tema/interacao.gif') no-repeat 7px center #fff;
	padding: 10px 0 10px 50px;
	display: block;
	border-radius: 5px;
	transition:0.2s all ease;
}
a.link_fancybox:hover {
	/* background-color:#fff; */
	transform: scale(1.2);
	box-shadow: 0 0 13px 10px rgba(0,0,0,0.25);
}

#texto_fancybox { display:none; }

#etapa18 {
	padding: 20px 25px 20px 25px;
	line-height: 130%;
}
#etapa18 ul {
	list-style-type:disc;
	margin-bottom:10px;
	padding:7px 0 15px 60px;
}
#etapa18 ul > li > ul {
	list-style-type:circle;
	margin-bottom:0;
	padding-bottom:1px;
	padding-left:50px;
}
#etapa18 ul > li {
	margin-bottom:10px;
}

#etapa18 a {
	color:#FB8D00;
	text-decoration:none;
}

#etapa18 p {
	margin: 0 0 10px;
}

#etapa18 .titulo {
	background: #e9e9e9;
	padding: 5px 10px;
	border-radius: 3px;
}


#etapa18 h5{
	font-family:'Open Sans Bold', sans-serif;
	margin-bottom:30px;
	background:none;
	font-size:1.5em;
	padding-left:0;
}