/*---------------------------------------------------------------------*/
/*zera tudo - Eric Meyer Reset CSS*/
/*---------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
:focus {
    outline: 0;
}

body {
    background: white;
    line-height: 1;
    color: black;
}

ol, ul {
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    font-weight: normal;
    text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
/*---------------------------------------------------------------------*/
/*zera tudo*/
/*---------------------------------------------------------------------*/


/***************************************************************************************
****************************************************************************************/
/* FONTES */
/***************************************************************************************
****************************************************************************************/
/* BEGIN Light */
@font-face {
  font-family: 'Open Sans';
  src: url("./fontes/OpenSans-Light.eot?v=1.1.0");
  src: url("./fontes/OpenSans-Light.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("./fontes/OpenSans-Light.woff2?v=1.1.0") format("woff2"), url("./fontes/OpenSans-Light.woff?v=1.1.0") format("woff"), url("./fontes/OpenSans-Light.ttf?v=1.1.0") format("truetype"), url("./fontes/OpenSans-Light.svg?v=1.1.0#Light") format("svg");
  font-weight: 300;
  font-style: normal; }
/* END Light */
/* BEGIN Light Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("./fontes/OpenSans-LightItalic.eot?v=1.1.0");
  src: url("./fontes/OpenSans-LightItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("./fontes/OpenSans-LightItalic.woff2?v=1.1.0") format("woff2"), url("./fontes/OpenSans-LightItalic.woff?v=1.1.0") format("woff"), url("./fontes/OpenSans-LightItalic.ttf?v=1.1.0") format("truetype"), url("./fontes/OpenSans-LightItalic.svg?v=1.1.0#LightItalic") format("svg");
  font-weight: 300;
  font-style: italic; }
/* END Light Italic */
/* BEGIN Regular */
@font-face {
  font-family: 'Open Sans';
  src: url("./fontes/OpenSans-Regular.eot?v=1.1.0");
  src: url("./fontes/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("./fontes/OpenSans-Regular.woff2?v=1.1.0") format("woff2"), url("./fontes/OpenSans-Regular.woff?v=1.1.0") format("woff"), url("./fontes/OpenSans-Regular.ttf?v=1.1.0") format("truetype"), url("./fontes/OpenSans-Regular.svg?v=1.1.0#Regular") format("svg");
  font-weight: normal;
  font-style: normal; }
/* END Regular */
/* BEGIN Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("./fontes/OpenSans-Italic.eot?v=1.1.0");
  src: url("./fontes/OpenSans-Italic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("./fontes/OpenSans-Italic.woff2?v=1.1.0") format("woff2"), url("./fontes/OpenSans-Italic.woff?v=1.1.0") format("woff"), url("./fontes/OpenSans-Italic.ttf?v=1.1.0") format("truetype"), url("./fontes/OpenSans-Italic.svg?v=1.1.0#Italic") format("svg");
  font-weight: normal;
  font-style: italic; }
/* END Italic */
/* BEGIN Semibold */
@font-face {
  font-family: 'Open Sans';
  src: url("./fontes/OpenSans-Semibold.eot?v=1.1.0");
  src: url("./fontes/OpenSans-Semibold.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("./fontes/OpenSans-Semibold.woff2?v=1.1.0") format("woff2"), url("./fontes/OpenSans-Semibold.woff?v=1.1.0") format("woff"), url("./fontes/OpenSans-Semibold.ttf?v=1.1.0") format("truetype"), url("./fontes/OpenSans-Semibold.svg?v=1.1.0#Semibold") format("svg");
  font-weight: bold;
  font-style: normal; }
/* END Semibold */
/* BEGIN Semibold Italic */
@font-face {
  font-family: 'Open Sans';
  src: url("./fontes/OpenSans-SemiboldItalic.eot?v=1.1.0");
  src: url("./fontes/OpenSans-SemiboldItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("./fontes/OpenSans-SemiboldItalic.woff2?v=1.1.0") format("woff2"), url("./fontes/OpenSans-SemiboldItalic.woff?v=1.1.0") format("woff"), url("./fontes/OpenSans-SemiboldItalic.ttf?v=1.1.0") format("truetype"), url("./fontes/OpenSans-SemiboldItalic.svg?v=1.1.0#SemiboldItalic") format("svg");
  font-weight:bold;
  font-style: italic; }
/* END Semibold Italic */
/* BEGIN Bold */
@font-face {
    font-family: 'Open Sans Bold';
    src: url('fontes/OpenSans-Bold-webfont.eot');
    src: url('fontes/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontes/OpenSans-Bold-webfont.woff') format('woff'),
         url('fontes/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('fontes/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* END Bold */

/***************************************************************************************
****************************************************************************************/
/* HTML E BODY */
/***************************************************************************************
****************************************************************************************/
html {min-height:100%}

body{
	margin:0;
	background:/*url(../midia/tema/logo_demonstra_footer.png) no-repeat 5.7% bottom, */url(../midia/tema/bg_body.png) repeat-y 10px top, #d4d4d4;
	background-size: /*auto, */16.55% 1px;
	border-left:10px solid #d4d4d4;
	font-family: 'Open Sans', sans-serif;
	color:#000;
	padding: 0;
	min-height:100%;
}

body.pagina_demonstracao {
	background:#f3f3f3;
	border-left: 10px solid #00470d;
}


/***************************************************************************************
****************************************************************************************/
/* LINKS */
/***************************************************************************************
****************************************************************************************/

a:hover {
	color:#ff6600 !important;
	text-decoration:none !important;
	}


/***************************************************************************************
****************************************************************************************/
/* TITULOS */
/***************************************************************************************
****************************************************************************************/
h1
{
color:#1A4065;
font-size:12pt;
margin-bottom:9px;
}

h2
{
		font-size:10pt;	
color:#ff6600;
display: inline;
}

/* TITULO DO TÓPICO */

h3.nome_topico {
	color:#D98100;
	font-size:1.1em;
	font-weight:normal;
	display:inline;
}
	
h4.acao {
	background:transparent url(../midia/tema/seta_h4.png) no-repeat scroll 0 0;
	color:#1C5675;
	font-size:1.5em;
	font-weight:normal;
	height:33px;
	padding-left:31px;
	padding-top:13px;
	position:relative;
	width:auto;
	bottom: 11px;
}

h5 {
	background:transparent url(../midia/tema/seta_menor.png) no-repeat scroll 0 5px;
	padding-left:11px;
	margin:4px 0;
}


h5.titulo_demonstracao {
font-size: 22px;
    position: relative;
    color: orange;
    z-index: 8;
    display: block;
    background: none;
    text-align: center;
    font-weight: lighter;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: -0.2px;
    background-color:rgba(0, 0, 0, 0.58);
    padding: 29px 7px;
	top:280px;
}

/***************************************************************************************
****************************************************************************************/
/* HEADER */
/***************************************************************************************
****************************************************************************************/
.header{
background:url(../midia/tema/bg_topo.png) repeat-x;
left:0;
margin-bottom:26px;
width:inherit;
z-index:200;
height:107px;    
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; 
}

.header .container{
/*controlado por script - nao alterar*/width:970px;
margin:0 auto;
}

header.geral {
	/* background-image: url(../midia/tema/bg_header.png); */
	height:150px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-bottom:6px solid #00470d;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#16902d+0,107924+59,055d15+100 */
background: #16902d; /* Old browsers */
background: -moz-linear-gradient(top,  #16902d 0%, #107924 59%, #055d15 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #16902d 0%,#107924 59%,#055d15 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #16902d 0%,#107924 59%,#055d15 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16902d', endColorstr='#055d15',GradientType=0 ); /* IE6-9 */

}

.pagina_demonstracao header.geral {
	background: 
		/*cor*/url("../midia/tema/aba_cor.svg") no-repeat 15px -6px,		
		/*sombra*/url("../midia/tema/aba_sombra_light.svg") no-repeat right 6px;
    height: 75px;
    position:fixed;
    z-index: 10;
    padding: 0;
    margin: 0;
    width: 240px;
    float: right;
	right:0;
	z-index:11;
	border:none;
	display:table;
}

.pagina_demonstracao section.conteudo header {
	position:fixed;
	width:100%;
	z-index:10;
	top: 0;
	box-shadow: 0 1px 6px rgba(0,0,0,0.15);
	/* padding-left:50px; */
}

header.geral .volta_home{
	/* background:url(../midia/tema/logo_tutorial.png) no-repeat 74px 54px; */
	display:block;
	height:100%;
	width:100%;
	text-indent:-10000px;
	position:absolute;
	top:0;
	left:0;
}

.pagina_demonstracao header.geral .volta_home {
/* background: url(../midia/tema/logo_tutorial_interno.png) no-repeat right 15px; */
    display: block;
    height: 62px;
    width: 190px;
    text-indent: -10000px;
    display: block;
    position: absolute;
    left: 20%;
    top: 0px;
}

header.geral h1{
	/* display:none; */
	color: #FFFFFF;
    font-weight: bold;
    letter-spacing: -0.02em;
    padding: 7px 10px 20px 67px;
	display:table-cell;
	vertical-align:middle;
}

/***************************************************************************************
****************************************************************************************/
/* MENU CATEGORIAS */
/***************************************************************************************
****************************************************************************************/
nav.menuCategorias {
	background-color: #eaeaea;
	color: #c8c7c5;
	padding-right: 0;
	padding-left: 0;
	/* margin-top:-150px; */
	margin-top:0px;
	clear: both;
	z-index:12;
	/* min-height:700px; */
	margin-bottom: 50px;		
}


.pagina_demonstracao nav.menuCategorias {
	margin-top:0;
	position:absolute;
	left:-500px;
	background:url(../midia/tema/logo_demonstra_footer.png) no-repeat center bottom #eaeaea;
}


nav.menuCategorias .tituloMenuCategorias{
  text-align: right;
  padding-right: 15px;
  margin: 15px 0 15px;
  color:#686868;
}

nav.menuCategorias li {
	text-align: right;
	position: relative;
	background-color: #fff;
	border-top: 1px solid #f3f3f3;
	border-right: 1px solid #de6d6d6;
	transition:all 1s;
}
body#indice_demonstracoes nav.menuCategorias > ul > li.ativo{	
	width:109%;
	background-color: #f9f9f9;
	border-right: none;
	transition:all 1s;
}
nav.menuCategorias li a {
	color: #009CBE;
	display: block;
	padding: 18px 4%;
	font-weight: 400;
	line-height: 125%;
	font-size: 14px;	
}
nav.menuCategorias li a:hover,
nav.menuCategorias li a:focus {
	text-decoration:none;
	color:rgb(59, 59, 59) !important;
}

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

body#indice_demonstracoes nav.menuCategorias > ul > li.ativo > a {
	border-top:2px solid #fff;
	border-bottom:3px solid #dedede;
	color: #848484;
	padding: 18px 9%;
	font-weight:500;
	margin-bottom:-1px;
	outline: none;
    box-shadow: 0 0 34px rgba(0, 0, 0, 0.13) inset;
}

body#indice_demonstracoes nav.menuCategorias > ul:hover > li.ativo:hover > a {
	color: #fff;
}

body#indice_demonstracoes nav.menuCategorias > ul > li.ativo:before{
	content:'';
	position:absolute;
	right:0px;
	top:-1px;
	width:6px;
	background:orange;
	height:101%;
	display:block;
	border-top:1px solid rgba(0,0,0,0.1);
	border-right:1px solid rgba(0,0,0,0.1);
	border-bottom:1px solid rgba(0,0,0,0.1);
}

/* mostrar/esconder menu */
.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 30px; 
  top: 20px;
  z-index: 11;
  
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6' fill='rgba(0,0,0,0.3)'/><rect y='24' width='30' height='6' fill='rgba(0,0,0,0.3)'/><rect y='12' width='30' height='6' fill='rgba(0,0,0,0.3)'/></svg>");
  background-size: contain;
}
label[for="nav-trigger"]:hover {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6' fill='rgba(0,0,0,0.6)'/><rect y='24' width='30' height='6' fill='rgba(0,0,0,0.6)'/><rect y='12' width='30' height='6' fill='rgba(0,0,0,0.6)'/></svg>");
}

.nav-trigger + label, 
section.conteudo, 
nav.menuCategorias {
	transition: left 0.2s;
}

.nav-trigger.menu_clicado + label {
	left: 19%;
}

.pagina_demonstracao section.conteudo:not(.menu_clicado) {
	width:100%;
}

section.conteudo.menu_clicado {
	left: 0px;
}

nav.menuCategorias.menu_clicado {
	position:relative;
	left:0;
}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
/* .dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;} */
.dropdown-submenu>a{display:block;}
/*.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}*/
.dropdown-submenu{float:none;}
/* .dropdown-submenu>.dropdown-menu{left:-100%;margin-right:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;} */
/* .sidebar{float:right;margin-right:20px;} */

.navega {
	font-size:100%;
	width:100%;
	display: block; 
	position: static;
}

.navega.dropdown-menu,
.navega .dropdown-menu,
.navega .dropdown-submenu .dropdown-menu .dropdown-submenu {
	background-color: #F9F6F6;
	border:none;
	box-shadow:none;
	margin:0;
	padding:0;
	height:auto !important;
	box-shadow: 5px 0px 5px #D8D8D8 inset;
}
.dropdown-menu > li > a {
	white-space:normal;
	line-height:inherit;
}
.dropdown-menu > li a:focus, 
.dropdown-menu > li a:hover {
	background:transparent;
	color:#0086B0;
}

.navega  ul  {
	width:300px;
	/* display:block; */
}
.navega.dropdown-menu > li.dropdown-submenu ul  {
	box-shadow: 13px 2px 4px -3px rgba(0, 0, 0, 0.25), 0 5px 5px rgba(0, 0, 0, 0.08), 0px 5px 0px rgba(0, 0, 0, 0.25);
}

.navega  ul > li {
	border:none;
	background:#fff;
	font-size:15px;
	text-align:left;
	padding-left:20px;
	/* box-shadow: inset 26px 1px 52px -27px rgba(0, 0, 0, 0.45); */
}
.navega  ul > li  a:hover{
	text-decoration:underline;
}
.navega.dropdown-menu > li.dropdown-submenu > ul > li:nth-child(even) {
	background-color: #f1f1f1;
}
.navega.dropdown-menu ul > li:nth-child(even) {
	background-color: #f1f1f1;
}
.navega  ul > li a {
	padding-left: 20px 8%;
}

body.pagina_demonstracao .navega .ativo > a {
	color:#ff6600;
}

/* MENU DROP Sweep To Right */
.navega ul li {
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.navega ul li:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: orange;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

/* MUDA COISAS NO MENU */

.navega ul li:hover, .navega ul li:focus, .navega ul li:active {
  color: white;
  background-color: rgba(0,0,0,0.10);
}
.navega ul li:hover:before, .navega ul li:focus:before, .navega ul li:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.navega ul li:hover > a, .navega ul li:focus > a, .navega ul li:active > a {
  color:#fff !important;
}


ul.navega.dropdown-menu ul.dropdown-menu {
	cursor: default ;
	}

ul.navega ul.dropdown-menu {
    /* border-top: #00A2BD solid 2px; */
	
}

ul.navega ul.dropdown-menu ul.dropdown-menu {
	top:-1px;
	/* border-top: #03C3FF solid 2px; */
	border-top:1px solid #ececec;
	
	}
	
ul.navega ul.dropdown-menu ul.dropdown-menu li a {
    /* padding: 14px 4%; */
    padding: 18px 4%;

}	

.logo_demonstra_footer {
    background: url('../midia/tema/logo_demonstra_footer.png') no-repeat scroll 0 0 transparent;
    bottom: 0;
    display: block;
    height: 29px;
    left: 8.95%;
    margin-left: -60px;
    position: absolute;
    text-indent: -10000px;
    width: 119px;
	opacity:0.5;
}

/***************************************************************************************
****************************************************************************************/
/* ESPECIFICIDADES DA PÁGINA INDEX.HTML (indice) */
/***************************************************************************************
****************************************************************************************/
.index section.conteudo header h3 {
	padding-top: 30px;
	color: #0086B0;
	text-transform: uppercase;
	padding-bottom: 15px;
	padding-left:10%;
	font-size: 19px;
	font-weight: 400;
}
.index section.conteudo header h3:nth-child(2) {
	padding-left:5.8%;
}
.index header.geral h1{
	/* background:url(../midia/tema/logo_tutorial.png) no-repeat 84px 40px, url(../midia/tema/logo_tutorial_nome.png) no-repeat 90% 57px ; */
	display:block;
	/* width:100%; */
	/* text-indent:-10000px; */
	position:absolute;
	top:0;
	left:0;
	padding: 50px 70px;
	font-size:2.7em;
	font-weight:bold;
	color:#fff;
	letter-spacing: -0.05em;
}

.index section.conteudo .topico {
	padding-left: 0;
	padding-right: 0;
	border-top: 1px solid #d4d4d4;
	box-shadow: 5px 7px 25px -10px rgba(0, 0, 0, 0.28);
}
.index section.conteudo .topico li a {
	color:#404040;
}
.index section.conteudo .topico li a:hover {
	text-decoration:none;
}
.index section.conteudo .topico > li {
	background-color: #eaeaea;
	border-bottom: 4px solid #fff;
	position: relative;
}
.index section.conteudo .topico > li:nth-child(even) {
	background-color: #f9f9f9;
}
.index section.conteudo .topico > li:last-child {
	border-bottom: none;
}
.index section.conteudo .topico > li > span {
	position: absolute;
	top: 0;
	bottom: 0;
	vertical-align: middle;
	display: table-caption;
	padding-left: 10%;
	padding-top: 18px;
	border-right: 1px solid #0086B0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-shadow: 12px 0px 1px rgba(0, 0, 0, 0.05) inset;
}
.index section.conteudo .topico > li > span::before {
	content:'';
	width:9px;
	height:9px;
	display:block;
	position:absolute;
	background-color:#0086B0;
	margin-left: -19px;
    margin-top: 4px;
}
.index section.conteudo .topico .demonstracao li {
	background-color: #f3f3f3;

	/* box-shadow: inset 13px 0px 20px -13px #000000; */
	box-shadow: 30px 0 25px -25px rgba(0, 0, 0, 0.5) inset;
}
.index section.conteudo .topico .demonstracao li:nth-child(even) {
	background-color: #e4e4e4;
}
.index section.conteudo .topico .demonstracao li a:hover {
	background:#585858;
	/* box-shadow: inset 13px 0px 20px -13px #000000; */
	box-shadow: 30px 0 25px -25px rgba(0, 0, 0, 0.27) inset;
	color:#fff;
	text-decoration:underline;
}
/* EFEITOS LINKS */ 
/* PAGINAI PRINCIPAL Sweep To Right */
.index section.conteudo .topico .demonstracao li a {	
  padding: 18px 10%;
  display: block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.index section.conteudo .topico .demonstracao li a:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: orange;
  box-shadow:30px 0 25px -25px rgba(0, 0, 0, 0.5) inset;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.index section.conteudo .topico .demonstracao li a:hover{
  color: inherit !important;
  background-color: rgba(0,0,0,0.10);
  font-weight:bold;
} 
.index section.conteudo .topico .demonstracao li a:focus,
.index section.conteudo .topico .demonstracao li a:active {
  color: #fff !important;
  font-weight:bold;
  text-decoration:none;
}
.index section.conteudo .topico .demonstracao li a:hover:before, 
.index section.conteudo .topico .demonstracao li a:focus:before, 
.index section.conteudo .topico .demonstracao li a:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.tabela_topicos {
	width: 100%;
}

.tabela_topicos  a{
	display:block;
}

/***************************************************************************************
****************************************************************************************/
/* BREADCRUMB */
/***************************************************************************************
****************************************************************************************/
.breadcrumb {
	font-size:1em;
	margin-top:63px;
	position:absolute;
	color:#666666;
}

.breadcrumb ul {
	list-style-type:none;
	height:29px;
	margin:0;
	padding:0;
	background: #e7e7e7 url(../midia/tema/breadcrumb_bg.gif) repeat-x top left;
}

.breadcrumb ul li {
	float:left;
	margin:0;
	height:29px;
	padding:6px 19px 6px 10px;
	background:url(../midia/tema/divisoria_breadcrumb.gif) no-repeat top right;
}

.breadcrumb ul li.last {
	text-decoration:none;
	height:21px;
	background:url(../midia/tema/divisoria_breadcrumb_active.gif) no-repeat top right;
}

.breadcrumb ul li.first {
	border-left:1px solid #dadada;
	padding:0;
	text-decoration:underline;
}

.breadcrumb ul li a {
	color:#666666;
	text-decoration:none;
	height:21px;
	padding:6px 19px 6px 10px;
	display:block;
}

.breadcrumb ul li a:hover {
	color:#333333;

}

.breadcrumb ul li.first a {
	background:url(../midia/tema/home_off.gif) no-repeat 12px 5px;
	text-decoration:none;
	height:21px;
	padding:6px 19px 6px 10px;
	display:block;
	width:20px;
}

.breadcrumb ul li.first a:hover {
	color:#333333;
	text-decoration:underline;
	background:url(../midia/tema/home_on.gif) no-repeat 12px 5px;
}

/***************************************************************************************
****************************************************************************************/
/* NAVEGAÇÃO ENTRE DEMONSTRAÇÕES */
/***************************************************************************************
****************************************************************************************/
.navegacao_demonstracoes {
	position: fixed;
    right: 240px;
    top: 21px;
	z-index:11;
}
.navegacao_demonstracoes a {
display: inline-block;
    height: 30px;
    overflow: hidden;
    text-indent: -10000px;
    width: 30px;
    margin-right: 5px;
    position: relative;
    z-index: 99;
	transition:all 0.1s linear;
}
.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(9,177,220,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(9,177,220,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(147,232,245,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(147,232,245,1)'/></svg>") no-repeat top right;
	margin-right:2px;	
	margin-left:3px;	
}
/***************************************************************************************
****************************************************************************************/
/* GERAL */
/***************************************************************************************
****************************************************************************************/
ul {
	list-style-type:none;
	padding:0;
}

.apresentacao ul,
.texto_informacao ul,
.texto_instrucao ul,
.texto_introducao ul,
.texto_conclusao ul {
	list-style-type:disc;
	padding: 7px 0 0 25px;
}
.texto_informacao ul {
	margin-bottom:10px;
}
.texto_introducao ul,
.texto_conclusao ul {
	padding:7px 0 15px 30px;
}
.texto_introducao ul > li,
.texto_conclusao ul > li {
	margin-bottom:10px;
}

.texto_informacao ul > li > ul {
	list-style-type:none;
	padding: 7px 0 20px 35px;
}

.texto_informacao ul > li > ul > li::before {
	content: "→";
	position: absolute;
	margin-left: -22px;
	font-weight: bold;
	font-size: 12px;
	color: rgba(0,0,0,0.5);
	margin-top: 1px;
}

.apresentacao a,
.texto_informacao a,
.texto_instrucao a {
	color:#FB8D00;
	text-decoration:none;
}

.texto_informacao p,
.texto_instrucao p {
	margin: 0 0 10px;
}

.demonstracao img {
    /*controlado por script - nao alterar max-width:970px;*/
	max-width:none;
    width:100%;
	height:auto;
}

.pagina_demonstracao .demonstracao > * {
	font-family:Arial;
	line-height:120%;
}

.interacao audio {
    display:block;
	padding-top:10px;
	z-index:7;
}

textarea.retorna_xml{
width:600px;
height:500px;
display:none;
}


/*classes de função instrucional (tags do XML)*/
.xml_topico {

}
.xml_subtopico{

}

.xml_label{
font-weight: bold;
}

.xml_texto_adicional{

}
.xml_texto_principal{
color: #333333;
}
.print_tela{
position:absolute;

}
.print_acao_fim{

}
.texto_instrucao{
color:#DF8200;
font-style:italic;
font-weight:bold;
}

.instrucao_preto {
color: #333333;
font-style:normal;
font-weight:normal;
}

.meta{
display:none;
}

/* .modulo,
.topico,
.subtopico {
	width:inherit;
} */

.subtopico {
	/*display:none;*/
	padding: 73px 0 0;
}

.passo {
    /*controlado por script - nao alterar*/width:970px;
	display:inherit;
	background-color: #fff;
	padding: 0px;	
	margin:0 auto;
	margin-left:auto;
}

.interacao {
	/*controlado por script - nao alterar*/width:970px;
	overflow:hidden;
	background-color: #fff;	
	/*width:100%;*/
	margin: 0 auto;
	position:relative;
}

.area_informacao{
	background-color: #fff;	
	width:100%;
	margin: 0 auto;
	position:relative;
}

.metainfo{
	background-color: #ddd;
	padding:5px 10px;
	color:#999;
}

.modelo
{
	width:100%;
	background-color: #fff;
	min-height:100px;
}
.ajuda_intermediaria{
background-color: #ccffcc;
}

.consequencia{
	background-color: #fafafa;
	position:absolute;
	display:none;
	padding:10px;
	border:2px solid #aaaaaa;
	max-width:500px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	text-align:center;
	z-index:10;
}

.consequencia_hit{
	width:300px;
	position:absolute;
	background:#feedbf;
	border:1px solid #e6952a;
	font-size:13px;
	z-index:7;
	padding:12px;
	cursor:move;
}

.texto_adicional {
	font-size:14px;
	text-align:left;
	margin-bottom:8px;
}

.hit {
	background-color:transparent;
	/* background-image:url(midia/tema/pixel.gif); */
	border:3px solid #e08d12;
	z-index:4;
	font-size:10px;
	font-weight:bold;	
	display:none;
	cursor:pointer;
	/*opacity:0.4;*/
	color:transparent;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}

.hit_off{
	/*border:3px solid green;*/
	/*border:3px solid #005577;*/
	border:3px solid #e08d12;
	cursor:pointer;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
}

.efeito_mascara{
	position:absolute;
	background-color:#000;
	display:none;
	z-index:6;
	top:0;
	left:0;
}

.efeito_mascara_indice{
	position:fixed;
	background-color:#000;
	display:none;
	z-index:12;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.efeito_mascara_inicio{
	position:absolute;
	background:rgba(0,0,0,1);
	display:none;
	z-index:8;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.efeito_mascara_fim{
	position:absolute;
	background-color:#000;
	display:none;
	z-index:8;
	top:0;
	left:0;
	opacity:0.8;
	width:100%;
	height:100%;
}

.texto_intro_tutorial {
    background: #FFFFFF none repeat scroll 0 0;
    border: 1px solid #999999;
    color: #333333;
    display: none;
    font-size: 14px;
    padding: 25px;
    position: absolute;
    width: 590px;
    z-index: 101;
    line-height: 137%;
    top: 50%;
    left: 50%;
    margin-left: -200px;
    -moz-box-shadow: 0px 0px 7px #333;
    -webkit-box-shadow: 0px 0px 7px #333;
    border-radius: 4px;
}


.texto_intro_tutorial h1{
font-size: 23px;
    color: #39B1DD;
    margin-bottom: 16px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: -1.05px;
    background-color: #FBFBFB;
    padding: 5px;
    text-transform: uppercase;
	
}

.texto_intro_tutorial p{
	margin-bottom: 10px;
    margin-left: 50px;
    margin-right: 29px;
}

.texto_intro_tutorial b,
.texto_intro_tutorial strong  {
    font-weight: inherit;
	font-family:'Open Sans Bold', sans-serif;
}

.texto_intro_tutorial h5{
	color: #333;
    font-family: "Open Sans",sans-serif;
    font-size: 1.15em;
    font-weight: 600;
	padding-left:0;
	background:none;
}

.texto_intro_tutorial p + h5{
	margin-top:30px;
}

.texto_intro_tutorial h6{
	font-family:'Open Sans Bold', sans-serif;
	margin-bottom:12px;
	background:none;
	font-size:1.1em;
	margin-left:50px;
}

.texto_intro_tutorial p + h6{
	margin-top:30px;
}

.texto_intro_tutorial a{
	color:orange;
}
.texto_intro_tutorial a:hover{
	color:orange;
	text-decoration:underline;
}

.texto_intro_tutorial ul {
	list-style-type: disc;
	padding: 7px 0 15px 90px;
}

.botoes_intro_tutorial {
	text-align:center;
	margin-top:20px;
}

.texto_intro_tutorial input {
	color:#fff;
	font-size:0.9em;
	background:none;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:none;
	text-transform:uppercase;
	padding:7px 10px;
	cursor:pointer;
	text-decoration:none;
}

.texto_intro_tutorial input:hover{
	/*background:#ff9a12;*/
	text-decoration:none;
}

.texto_intro_tutorial #inicia_tutorial {
	/*background:#256A94;*/
}

.texto_intro_tutorial #inicia_tutorial:hover {
	/*background:#28709c;*/
}

.coordenada {
	display:none;	
}

.proxima_acao {
    /*controlado por script - nao alterar*/width:970px;
	margin:25px auto;
	text-align:right;
	color:#2e2e2e;
	font-size:1.1em;
}

a.link_proxima_acao, a.link_proxima_acao:visited {
	color:#D98100;
	text-decoration:none;
}
a.link_proxima_acao:hover{
	text-decoration:underline;
}

.url_img{
	display:none;
}


.main{
    /*controlado por script - nao alterar*/width:970px;
	margin:0 auto;
}

.main.index {
	margin:-29px 0 0;
}

.passo .imperativo {
	display:none;
}

.passo .orientacao .imperativo {
	display:inline;
}

.logo {
	background:transparent url(../midia/tema/logo_libreoffi.png) no-repeat scroll 0 0;
	height:62px;
	position:relative;
	float:right;
	width:100px;
	margin-top:32px;
}

.logo a {
	color: #1A4065;
    display: block;
    font-size: 20px;
    height: 62px;
    text-decoration: none;
}

.logo.index {
	float: left;
    height: 62px;
    left: 27px;
    margin-top: 37px;
    z-index: 2;
	width:auto;
}

.descricao_acao {
	font-size:1.1em;
	margin:15px 0 30px;
	color:#2e2e2e;
}

.descricao_acao .texto_introducao {
line-height:130%;
display:inline;
}

.conclusao {
	/*controlado por script - nao alterar*/width:970px;
	margin:25px auto 0;
}

.conclusao .texto_conclusao {
	color: #2E2E2E;
    font-size: 1.1em;
	line-height:130%;
}

.descricao_acao .localizacao {
background:transparent url(../midia/tema/seta_menor.png) no-repeat scroll 0 5px;
padding-left:11px;
font-size:0.9em;
margin:15px 0 25px;	
}

.descricao_acao p + p { 
margin-top: 0.4em; 
}

.glossario {
	display:none;
}

a.link_glossario, a.link_glossario:visited {
	color:#2e2e2e;
	text-decoration:underline;
}
a.link_glossario:hover {
	color:#000;
	text-decoration:underline;
}

.navegacao_hits {
	text-align:right;
	margin-top:10px;
}

.navegacao_hits .hit_anterior {
	background-image:url(../midia/tema/hit_anterior.png);
	background-repeat:no-repeat;
	background-position:5px 5px;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}

.navegacao_hits .hit_proximo {
	background-image:url(../midia/tema/hit_proximo.png);
	background-repeat:no-repeat;
	background-position:7px 5px;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}

.navegacao_hits input {
	background-color:#FFBB57;
	border:none;
	margin-right:2px;
	cursor:pointer;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	color:#FBF2E1;
	padding:0 3px;
	width:13px;
	height:19px;
}
.navegacao_hits input:hover {
	background-color:#FFAF3D;
}


/*HOMOLOG - inicio*/
.especialista {
	background:#ff9999;
}

.id_interacao {
	color:blue;
	text-align:right;
}
.id_interacao  .referencia{
	color:red;
	text-align:right;
	font-weight:bold;
	padding:20px 30px 15px;
	display:inline-block;
}
.caixa_texto_hit .id_interacao {
	display:none;
}
/*HOMOLOG - fim*/

#anterior{
float:left;

}

#proximo{
float:right;

}

/*classes dinâmicas, adicionadas pelo javascript*/

.navegacao{
	width:100%;
	margin:0;
	text-align:center;
	padding-top:7px;
	padding-bottom:7px;	
	padding-left:auto;
	font-size:14px;
	background:#EFEFEF;
	position:fixed;
	z-index:20;
	top:0;
}

.navegacao a.link_subtopico{
	color:#666666;
	text-decoration:none;
}
.navegacao a.link_subtopico:visited{
	color:#666666;
}
.navegacao a.link_subtopico:hover{
	color:#cc0033;
	text-decoration:underline;
}
.navegacao a.link_subtopico_destaque{
	color:#000000;
	text-decoration:none;
	font-size:16px;
	font-weight:bold;
	background-color:#ffffff;
	border:1px solid #999999;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	padding:0 4px;
}

.navegacao input {
	/*background-color:#f79200;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	/*border:1px;*/
}

.navegacao_subtopicos {
	display:inline;
	position:absolute;
	top:134px;
	z-index:2;
}

.navegacao_passo {
	text-align:center;
}

.hit_pre_marcado {	
	border:3px solid #3e7988;
	/*-moz-box-shadow: 0px 0px 7px #333; /* FF 3.5+ */
	/*-webkit-box-shadow: 0px 0px 4px #333; /* Safari 3.0+, Chrome */
	/*box-shadow: 0px 0px 4px #333; /* Opera 10.5, IE 9.0 */ 
	/*filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#333'); /* IE6,IE7 */ 
	/*-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px,Color='#333')"; /* IE8 */ 
	z-index:12;
	font-size:14px;
	position:absolute;
	background-color:#98eafe;
	display:inline;
}

.hit_marcado {	
	/*border:1px solid #3e7988;
	z-index:10;
	font-size:14px;
	position:absolute;
	background-color:#bef2ff;
	display:inline;*/
	background-color:transparent;
	/* background-image:url(midia/tema/pixel.gif); */
	border:3px solid #e08d12;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	z-index:4;
	font-size:10px;
	font-weight:bold;
	/*opacity:0.4;*/
	color:transparent;
	position:absolute;
	display:inline;
}

.info_hit {
	font-size:10px; 
	text-align:right;
	position:absolute; 
	top:0; 
	left:0; 
	background:#fafafa; 
	padding:5px;
	border:1px solid #333;
	visibility: hidden;
	/*borda arredondada*/
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	z-index:12;
}

.info_hit_marcado {
	font-size:14px; 
	text-align:left;
	position:absolute; 
	top:0; 
	left:0; 
	background:#fff299; 
	padding:5px;
	border:1px solid #333;
	visibility: hidden;
	/*borda arredondada*/
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.caixa_texto_hit {
	color: #333333;
}

.informacao  .caixa_texto_hit {
	min-height:59px;
}

.caixa_texto_hit .importante{
	font-weight:bold;
	margin: 0.4em 0;
}

.caixa_texto_hit p + p { 
margin-top: 0.4em; 
}

.caixa_texto_hit  textarea{
width:290px;
height:100px;
}

.texto_hit.borda .texto_informacao,
.texto_hit.borda .texto_informacao p:last-child,
.texto_hit.borda .texto_instrucao,
.texto_hit.borda .texto_instrucao p:first-child {
	display:inline;
}

.texto_hit  select{
font-size:10px;
}

.texto_introducao  textarea, .texto_conclusao textarea{
width:100%;
height:100px;
}

h4.acao input {
width:500px;
}

.xml_texto_consequenciahit {
	width:177px;
	background:#ffffff;
	padding:3px;
	font-size:12px;
	margin-bottom:5px;
	border:1px solid #c0c0c0;
}
.xml_texto_consequenciahit textarea {
	width:171px;
	hight:100px;
}


.comandos_passo{
	background-color:#fcc385;	
	z-index:10;
	width:250px;
	margin:0 auto 5px;
	padding:10px;
	text-align:center;
	/*borda arredondada*/
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	position:fixed;
	top:61px;
}

.arquivo_xml{
	background-color:#a0b6be;	
	margin:0 auto;
	padding:10px;
	text-align:center;
	border:1px solid #7b9aa6;
	position:absolute;
	z-index:1;
	right:0;
}

.edita{

position: relative;
top:30px;
left:30px;
background-color:#fff299;
height:50px;
width:100px;
}

.nohit{
	background-color:#fff299;	
	z-index:10;
	width:250px;
	margin:3px auto;
	padding:10px;
	text-align:center;
	/*borda arredondada*/
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	position:fixed;
	top:410px;
}

.loading {
	background:transparent url(../midia/tema/loading.gif) no-repeat scroll 50% 50%;
	height:300px;
}

.loading_edicao {
	background:gray;
	height:100%;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:500;
}

.texto_hit {
	width:432px;
	position:absolute;
	background:#feedbf;
	border:solid #e6952a;
	border-width:1px 1px 3px 1px;
	font-size:16px;
	z-index:7;
	padding:20px;
	/*cursor:move;*/
	-moz-box-shadow: 2px 2px 3px #666; /* FF 3.5+ */
	-webkit-box-shadow: 2px 2px 3px #666; /* Safari 3.0+, Chrome */
	box-shadow: 2px 2px 3px #666; /* Opera 10.5, IE 9.0 */
}
.importante_hit {
	width:300px;
	position:absolute;
	display:none;
}
.hit_seta {
	width:16px;
	height:16px;
	background:url(../midia/tema/hit_seta.png) no-repeat;
	background-position:left top;
	left:-17px;
	position:absolute;
}
.hit_etapa {
	text-align:right;
	font-size:11px;
	color:#6c6c6c;
	margin-top:13px;
	position:absolute;
}

.botao_seguir, .botao_avanca_passo_marcahit{
	float:right;
	color:#fff;
	font-size:0.9em;
	background:#FB8D00;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:none;
	text-transform:uppercase;
	padding:7px 10px;
	margin-top:10px;
	cursor:pointer;
}
.botao_seguir:hover{
	background:#ff9a12;
}

.botao_iniciar_demo{
	background: url("../midia/tema/playmonstra.png") no-repeat scroll 0 0 transparent;
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 0.9em;
    height: 135px;
    left: 50%;
    margin-left: -55px;
    margin-top: 10px;
    overflow: hidden;
    padding: 10px 20px;
    position: absolute;
    text-indent: -10000px;
    text-transform: uppercase;
    top: 90px;
    width: 113px;
    z-index: 9;
}



.botao_salvar {
	display:block;
}

.localizacao_sistema {
	background:url(../midia/tema/icone_localizacao_sistema.png) no-repeat 14px 18px #ececec;
	color:#333333;
	width:425px;
	padding:15px 15px 15px 50px;
	margin:20px auto;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	position:absolute;
	left:50%;
	margin-left:-245px;
	top:220px;
	z-index:9;
}

/* TELA FIM DE DEMO - início */
.texto_fim_demo {
	/*controlado por script - nao alterar*/width:970px;
	color:#fff;
	top:40px;
	z-index:9;
	position:absolute;
	font-size:1.45em;
	font-family:'Open Sans', sans-serif;
	display:none;
}

.texto_fim_demo h5{ 
	background: #FF9626;
    border-left: 19px solid #FF801C;
    font-size: 26px;
    height: 46px;
    letter-spacing: -1px;
    padding-left: 6px;
    padding-top: 8px;
    width: 306px;
}

.texto_fim_demo .botoes {
	width:700px;
	margin:30px auto 0;
}

.texto_fim_demo .botoes img,
.texto_fim_demo .botoes svg {
	left: 37px;
    position: absolute;
    top: 70px;
    width: 83px;
    height: 77px;
    z-index: 1;
	transition:all 0.2s ease-in-out;
}

.texto_fim_demo .botoes > div:hover img,
.texto_fim_demo .botoes > div:hover svg {
	-ms-transform: scale(1.3, 1.3); /* IE 9 */
    -webkit-transform: scale(1.3, 1.3); /* Safari */
    transform: scale(1.3, 1.3);
}
.texto_fim_demo .botoes > div svg .cls-4 { fill:#d6d6d6; transition:all 0.3s ease-in-out;}
.texto_fim_demo .botoes > div:hover svg .cls-4 { fill:#323232; }

.texto_fim_demo .botoes > div {
	width:157px;
	height:270px;
	float:left;
	margin-left:15px;
	cursor:pointer;
	position:relative;
	border:1px solid #212121;
	box-shadow:4px 4px 2px rgba(0, 0, 0, 0.1);
	/* transition:all 0.1s ease-in-out; */
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2e2e2e+0,2e2e2e+5,323232+5,323232+100 */
	background: #2e2e2e; /* Old browsers */
	background: -moz-linear-gradient(left,  #2e2e2e 0%, #2e2e2e 13px, #323232 13px, #323232 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #2e2e2e 0%,#2e2e2e 13px,#323232 13px,#323232 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #2e2e2e 0%,#2e2e2e 13px,#323232 13px,#323232 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e2e2e', endColorstr='#323232',GradientType=1 ); /* IE6-9 */
}

.texto_fim_demo .botoes > div.botao_fim_tutorial > div {
	padding-left:0;
	padding-right:4px;
}
.texto_fim_demo .botoes > div.botao_fim_tutorial > div span:last-of-type {
	font-size:13px;
}

.texto_fim_demo .botoes > div.botao_fim_tutorial {
	cursor:default;
}

.texto_fim_demo .botoes > div:hover {
	border:1px solid #ff9626;
}

.texto_fim_demo .botoes > div:after { 
	content:'';
	position:absolute;
	top:0;
	height:2px;
	width:155px;
	background:#414141;
}

/* .texto_fim_demo .botoes > div:before { */
	/* content:''; */
	/* position:absolute; */
	/* bottom:50px; */
	/* width:155px; */
	/* height:0; */
	/* z-index:1; */
	/* transition:all 0.3s ease-in-out; */
/* } */

/* .texto_fim_demo .botoes > div:hover:before { */
	/* content:''; */
	/* height:218px; */
/* } */


.texto_fim_demo .botoes > div:before {
	content:'';
	position:absolute;
	bottom:50px;
	height:0;
	width:155px;
	z-index:1;
	transition:all 0.3s ease-in-out;
	background: #ffa23f; /* Old browsers */
	background: -moz-linear-gradient(left,  #ff9626 0%, #ff9626 13px, #ffa23f 13px, #ffa23f 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #ff9626 0%,#ff9626 13px,#ffa23f 13px,#ffa23f 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #ff9626 0%,#ff9626 13px,#ffa23f 13px,#ffa23f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF801C', endColorstr='#ffa23f',GradientType=1 ); /* IE6-9 */
}

.texto_fim_demo .botoes > div:not(.botao_fim_tutorial):hover:before {
	content:'';
	height:218px;
}

.texto_fim_demo .botoes > div  > div {
	height:63px;
	width:100%;
	position:absolute;
	bottom:0;
	background:#262626;
	border-left:13px solid #232323;
	color:#d6d6d6;
	font-size:14px;
	padding:12px 15px 0 16px;
	z-index:2;
}

.texto_fim_demo .botoes > div  > div span:first-of-type {
	display:block;
	font-size:18px;
	color:#ff9626;
}

.texto_fim_demo .botoes > div:hover  > div span:first-of-type {
	color:#d6d6d6;
}

.texto_fim_demo .botoes > div  > div span:last-of-type {
	display:block;
	text-transform:uppercase;
}

.texto_fim_demo .botoes > div.botao_voltar_para_indice > div,
.texto_fim_demo .botoes > div.botao_proxima_demonstracao > div,
.texto_fim_demo .botoes > div.botao_fechar_demo > div,
.texto_fim_demo .botoes > div.botao_fim_tutorial > div{
	text-align:right;
}

.texto_fim_demo .botoes > div.botao_destaque {
	border:1px solid #ff9626;
}
.texto_fim_demo .botoes > div.botao_destaque  > div span:first-of-type{color:#d6d6d6;}
.texto_fim_demo .botoes > div.botao_destaque  > div span:last-of-type{color:#ff9626;}

.texto_fim_demo .botoes > div.botao_destaque img,
.texto_fim_demo .botoes > div.botao_destaque svg {
	left: 42px;
    top: 73px;
	-ms-transform: scale(1.5, 1.5); /* IE 9 */
    -webkit-transform: scale(1.5, 1.5); /* Safari */
    transform: scale(1.5, 1.5);
}
.texto_fim_demo .botoes > div.botao_destaque svg .cls-4 {transition:all 0.5s ease; fill:#ff9626;}
.texto_fim_demo .botoes > div.botao_destaque:not(.botao_fim_tutorial):hover svg .cls-4 {fill:#323232;}

body:not(.iframe_fancybox) .texto_fim_demo .botoes > div.botao_fechar_demo {
	display:none;
}

/* TELA FIM DE DEMO - fim */


/* .botao_rever_demo { */
	/* background:#0d0d0d url(../midia/tema/rever_demo.gif) no-repeat 8px 5px;	 */
	/* border:none; */
	/* color:#cdcdcd; */
	/* cursor:pointer; */
	/* font-size:13px; */
	/* margin-top:15px; */
	/* padding:10px 10px 10px 32px; */
	/* width:200px; */
	/* -moz-border-radius:3px; */
	/* -webkit-border-radius:3px; */
	/* border-radius:3px; */
	/* box-sizing: border-box; */
	/* -moz-box-sizing: border-box; */
	/* -webkit-box-sizing: border-box; */
/* } */
/* .botao_rever_demo:hover { */
	/* background:#000 url(../midia/tema/rever_demo.gif) no-repeat 8px 5px; */
	/* color:#FFFFFF; */
/* } */
/* .botao_ultima_etapa { */
	/* background:#0d0d0d url(../midia/tema/ultima_etapa.gif) no-repeat 13px 12px;	 */
	/* border:none; */
	/* color:#cdcdcd; */
	/* cursor:pointer; */
	/* font-size:13px; */
	/* margin-top:15px; */
	/* padding:10px 10px 10px 32px; */
	/* width:200px; */
	/* -moz-border-radius:3px; */
	/* -webkit-border-radius:3px; */
	/* border-radius:3px; */
	/* box-sizing: border-box; */
	/* -moz-box-sizing: border-box; */
	/* -webkit-box-sizing: border-box;	 */
/* } */
/* .botao_ultima_etapa:hover { */
	/* background:#000 url(../midia/tema/ultima_etapa.gif) no-repeat 13px 12px; */
	/* color:#FFFFFF; */
/* } */
/* .botao_voltar_para_indice { */
	/* background:#0d0d0d url(../midia/tema/voltar_para_indice.gif) no-repeat 9px 8px;	 */
	/* border:none; */
	/* color:#cdcdcd; */
	/* cursor:pointer; */
	/* font-size:13px; */
	/* margin-top:15px; */
	/* padding:10px 10px 10px 32px; */
	/* width:200px; */
	/* -moz-border-radius:3px; */
	/* -webkit-border-radius:3px; */
	/* border-radius:3px; */
	/* box-sizing: border-box; */
	/* -moz-box-sizing: border-box; */
	/* -webkit-box-sizing: border-box; */
/* } */
/* .botao_voltar_para_indice:hover { */
	/* background:#000 url(../midia/tema/voltar_para_indice.gif) no-repeat 9px 8px; */
	/* color:#FFFFFF; */
/* } */
/* .botao_fechar_demo { */
	/* background:#0d0d0d url(../midia/tema/fechar_demonstracao.gif) no-repeat 9px 10px;	 */
	/* border:none; */
	/* color:#cdcdcd; */
	/* cursor:pointer; */
	/* font-size:13px; */
	/* margin-top:15px; */
	/* padding:10px 10px 10px 32px; */
	/* width:200px; */
	/* -moz-border-radius:3px; */
	/* -webkit-border-radius:3px; */
	/* border-radius:3px; */
	/* box-sizing: border-box; */
	/* -moz-box-sizing: border-box; */
	/* -webkit-box-sizing: border-box; */
/* } */
/* .botao_fechar_demo:hover { */
	/* background:#000 url(../midia/tema/fechar_demonstracao.gif) no-repeat 9px 10px; */
	/* color:#FFFFFF; */
/* } */

/* .botao_proxima_demonstracao { */
    /* background: none repeat scroll 0 0 #fb8d00; */
    /* border: 1px solid #333; */
    /* border-radius: 3px; */
    /* color: #fff; */
    /* cursor: pointer; */
    /* font-size: 13px; */
    /* margin-top: 15px; */
    /* padding: 10px 25px 10px 32px; */
/* } */

.menu_subtopico{
	display:inline;
}

/* paginação da navegação */
.navegacao_subtopicos .paginacao{
	display:inline;
	margin-left:3px;
}
.navegacao_subtopicos .paginacao a,
.navegacao_subtopicos .paginacao a:visited{
	color:#ffffff;
	text-decoration:none;
	width:13px;
	height:13px;
	display:inline-block;
	background: transparent url(../midia/tema/bola_off.gif) no-repeat scroll 0 0;
	margin-left:7px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
}
.navegacao_subtopicos .paginacao a:hover{
	color:#333333;
	text-decoration:none;
	background: transparent url(../midia/tema/bola_hover.gif) no-repeat scroll 0 0;
}
.navegacao_subtopicos .paginacao a.link_subtopico_destaque,
.navegacao_subtopicos .paginacao a.link_subtopico_destaque:visited{
	color:#ffffff;
	text-decoration:none;
	background: transparent url(../midia/tema/bola_on.gif) no-repeat scroll 0 0;
	width:13px;
	height:13px;
	display:inline-block;
	margin-left:7px;
}

.navegacao_interacoes .paginacao{
	margin:0 auto;
	width:965px;
	/*margin:0;*/
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	padding-right:5px;
	font-size:14px;
	background:#eeeeee;
}
.navegacao_interacoes .paginacao a,
.navegacao_interacoes .paginacao a:visited{
	color:#ffffff;
	text-decoration:none;
	border:1px solid #ffffff;
	padding-top:5px;
	width:25px;
	height:21px;
	display:inline-block;
	background:#666666;
	margin-left:2px;
	margin-bottom:2px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
}
.navegacao_interacoes .paginacao a:hover{
	color:#333333;
	text-decoration:none;
	background:#fafafa;
	border:1px solid #333333;
}
.navegacao_interacoes .paginacao a.destaque{
	color:#ffffff;
	text-decoration:none;
	font-size:14px;
	background-color:#BD810F;
	border:1px solid #ffffff;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	padding-top:5px;
	width:25px;
	height:21px;
	display:inline-block;
	margin-left:2px;
}
/*oculta navegação interações na visão aluno*/
.pagina_demonstracao .navegacao_interacoes{
	display:none;
}

/* Botão de upload de imagem - modo de edição do passo */
#upload span {	
	color:#333333;
	text-decoration:none;
	background-color:#f0f0f0;
	border:1px solid #cccccc;
	/*width:25px;
	height:21px;*/
	display:inline-block;
	margin-left:2px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	margin-top:3px;
}	

/*LAYOUT INFORMACAO*/
.texto_hit.informacao {
	top: 60px;
	left: 50% !important;
	margin-left: -225px;
	width: 445px;
	position: absolute;
	border: none;
	border-bottom: 4px solid #fb8d00;
	font-size: 16px;
	z-index: 7;
	padding: 25px 20px 20px 90px;
	color: #333;
	background: url(../midia/tema/informacao_bg.jpg) no-repeat left top #fff;
	-moz-box-shadow: 0px 0px 7px #333; /* FF 3.5+ */
	-webkit-box-shadow: 0px 0px 7px #333; /* Safari 3.0+, Chrome */
	box-shadow: 0px 0px 7px #333; /* Opera 10.5, IE 9.0 */ 
	filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#333'); /* IE6,IE7 */ 
	-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px,Color='#333')"; /* IE8 */  
}
.texto_hit.informacao .texto_instrucao,
.texto_hit.neutro .texto_instrucao {
	display:none;
}
.texto_hit.informacao .hit_etapa {
	color:#aaa;
	margin-bottom:25px;
}
.texto_hit.informacao .botao_seguir {
	margin-top:15px;
}

.informacao .orientacao textarea {
width:340px;
height:70px;
}

/* ANIMA BOTAO INICIAR*/ 


/* Hang */
@-webkit-keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

@keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

@-webkit-keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

@keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

.botao_iniciar_demo {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.botao_iniciar_demo:hover, .botao_iniciar_demo:focus, .botao_iniciar_demo:active {
  -webkit-animation-name: hvr-hang-sink, hvr-hang;
  animation-name: hvr-hang-sink, hvr-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}




	
/*  ANIMA ITENS DENTRO DA DEMONSTRACAO*/
	
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

h5.titulo_demonstracao {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:0.5s;
  -moz-animation-duration:0.5s;
  animation-duration:0.5s;
    animation-delay: 0.5s;
}


/* botao tutorial */


.botoes_intro_tutorial {
	background-color: #3bb3e0;
    width: 160px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    text-decoration: none;
    color: #fff;
    margin: 0 auto;
    position: relative;
    padding: 5px 14px;
    padding-right: 50px;
    margin-right: 22px;
    float: right;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)) );
    border-radius: 5px;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.botoes_intro_tutorial:active {
top: 3px;
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(62,184,229)), color-stop(1, rgb(44,160,202)) );
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

.botoes_intro_tutorial::before {
background-color: #2591b4;
    background-image: url(../midia/tema/right_arrow.png);
    background-repeat: no-repeat;
    background-position: center center;
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -9px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}

.botoes_intro_tutorial:active::before {
    top: 50%;
    margin-top: -12px;
    -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}


/***************************************************************************************
****************************************************************************************/
/* CONTEÚDO */
/***************************************************************************************
****************************************************************************************/
section.conteudo {
	padding-left:0;
	padding-right:0;
	box-shadow: 12px 0px 1px rgba(0, 0, 0, 0.05) inset;
}

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

section.conteudo header h2 {
	color: #757575;
	font-weight: 400;
	text-align:right;
	font-size:1.1em;
	padding-top:20px;
	padding-left:50px;
	padding-bottom:16px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
section.conteudo header h3 {
	color: #A7A4A4;
	font-weight: 400;
	font-size:0.9em;
	padding-top:20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
section.conteudo header h4 {
    color: #ff9626;
    font-weight: 400;
    font-size: 1.2em;
    padding-bottom: 16px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


.pagina_demonstracao section.conteudo .demonstracao {
    margin-top: 40px;
}

section.conteudo .demonstracao .interacao{
	box-shadow:0 0 13px 5px rgba(0, 0, 0, 0.2);
}

section.conteudo .conteudo_texto{
	font-size:1em;
	font-family:Arial;
	/*margin:0 auto;
	float:none;*/
	background:#444;
	line-height:140%;
	padding:50px 50px 70px;
	position:relative;
}


section.conteudo .conteudo_texto:before{
	display:block;
	content:" ";
	float:left;
	width:0;
	height:0;
	border-color:transparent;
	border-style:solid;
	border-width:48px 20px 48px 0;
	border-right-color:#829897;
	margin-top:5px;
	margin-right:-10px;	
	position:absolute;
	left:-20px;
	top:150px;
	cursor:pointer;
	-webkit-filter:drop-shadow;
}

section.conteudo .conteudo_texto:after{
	display:block;
	content:" ";
	float:right;
	width:0;
	height:0;
	border-color:transparent;
	border-style:solid;
	border-width:48px 0 48px 20px;
	border-left-color:#829897;
	margin-top:5px;
	margin-right:-10px;	
	position:absolute;
	right:15px;
	top:150px;
	cursor:pointer;
	-webkit-filter:drop-shadow;
}

section.conteudo .conteudo_texto h5:before {
	content:'';
	width:9px;
	height:9px;
	display:block;
	position:absolute;
	background-color:#555;
	margin-left: -19px;
    margin-top: 4px;
}

section.conteudo .conteudo_texto h5{
	font-family:'Open Sans', sans-serif;
	margin-bottom:30px;
}

section.conteudo .conteudo_texto p{
	margin-bottom:23px;
}

section.conteudo .conteudo_texto a{
	color:#ffc600;
}
section.conteudo .conteudo_texto a:hover{
	color:#ffc600;
	text-decoration:underline;
}

aside.direita {
  height: 350px;
  margin-top:-150px;
}

footer {
clear:both;
}






section.conteudo .texto_introducao,
section.conteudo .texto_conclusao{
	/*controlado por script - nao alterar*/width:970px;
    background: #f9f9f9;
    font-family: "Open Sans", sans-serif;
    font-size: 1em;
    color: #555;
    line-height: 140%;
    padding: 50px 137px 35px 150px;
    margin: 0 auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

section.conteudo .texto_introducao {
	margin-bottom:-40px;
	padding-bottom:30px;
}

section.conteudo .texto_conclusao {
	padding-top:60px;
}

section.conteudo .texto_introducao p,
section.conteudo .texto_conclusao p{
	margin-bottom:23px;
}


.texto_introducao b,
.texto_introducao strong,
.texto_conclusao b,
.texto_conclusao strong  {
    color: #333;
    font-weight: inherit;
	font-family:'Open Sans Bold', sans-serif;
}

.texto_informacao b,
.texto_informacao strong  {
    font-weight: bold;
	font-family:inherit;
}

section.conteudo .texto_introducao h5:before,
section.conteudo .texto_conclusao h5:before {
	content:'';
	width:9px;
	height:9px;
	display:block;
	position:absolute;
	background-color:#ddd;
	margin-left: -19px;
    margin-top: 6px;
}

section.conteudo .texto_introducao h5,
section.conteudo .texto_conclusao h5{
	font-family:'Open Sans Bold', sans-serif;
	margin-bottom:30px;
	background:none;
	font-size:1.1em;
	padding-left:0;
}

section.conteudo .texto_introducao p + h5,
section.conteudo .texto_conclusao p + h5{
	margin-top:45px;
}

section.conteudo .texto_introducao h6,
section.conteudo .texto_conclusao h6{
	font-family:'Open Sans Bold', sans-serif;
	margin-bottom:30px;
	background:none;
	font-size:1em;
}

section.conteudo .texto_introducao p + h6,
section.conteudo .texto_conclusao p + h6{
	margin-top:45px;
}

section.conteudo .texto_introducao a,
section.conteudo .texto_conclusao a{
	color:#ff9600;
}
section.conteudo .texto_introducao a:hover,
section.conteudo .texto_conclusao a:hover{
	color:#ff9600;
	text-decoration:underline;
}

aside.direita {
  height: 350px;
  margin-top:-150px;
}

footer {
clear:both;
}

/***************************************************************************************
****************************************************************************************/
/* TABELA */
/***************************************************************************************
****************************************************************************************/
.texto_introducao table,
.texto_conclusao table {
	border-collapse:separate;
	/* font-size:14px; */
	text-align:center;
	line-height:14px;
	margin:30px 0 50px;
}

.texto_introducao table th,
.texto_conclusao table th {	
	background:#111;
	text-align:center;
	padding:12px 10px;
	display:table-cell;
	position:relative;
	vertical-align:bottom;
	color:#999;
	border: 1px solid #444;
	transition:all 0.2s ease;
	font-weight:bold;
}

.texto_introducao table td,
.texto_conclusao table td {
	background:#383737;
	border: 1px solid #444;
    padding: 10px;
	display:table-cell;
	vertical-align:middle;
	min-width:65px;
	transition:all 0.2s ease;
	line-height:17px;
}

.texto_introducao table tr:nth-child(even) td,
.texto_conclusao table tr:nth-child(even) td {
	background:#313030;	
}

.texto_introducao table tr:hover td,
.texto_conclusao table tr:hover td {
	background:#181818;
}


/***************************************************************************************
****************************************************************************************/
/* PLUGIN TIPTIP */
/***************************************************************************************
****************************************************************************************/
#tiptip_holder {
	max-width:350px !important;
}


/***************************************************************************************
****************************************************************************************/
/* OCULTA ELEMENTOS QUANDO DEMO ESTÁ EM FANCYBOX */
/***************************************************************************************
****************************************************************************************/
body.iframe_fancybox {
	border:none;
}

body.iframe_fancybox .subtopico {
	padding:0;
}

body.iframe_fancybox section.conteudo header {
	position:static;
	padding-left:0;
}

/* body.iframe_fancybox .texto_fim_demo { */
	/* margin-left:-304px; */
/* } */

body.iframe_fancybox .texto_fim_demo .botoes {
	width:530px;
}

body.iframe_fancybox section.conteudo header h2 {
	text-align:left;
	padding-top:15px;
	margin-bottom:-26px;
	display:block;
}

body.iframe_fancybox section.conteudo .demonstracao {
	margin-top:0;
}

body.iframe_fancybox section.conteudo header h3 {
	padding-top:16px;
}

body.iframe_fancybox section.conteudo .texto_introducao {
	margin-bottom:10px;
}

body.iframe_fancybox header.geral, 
body.iframe_fancybox .menuCategorias, 
body.iframe_fancybox .navegacao_demonstracoes, 
body.iframe_fancybox section.conteudo .subtopico > header > h2, /* Comentar linha para MOSTRAR nome do módulo/categoria */
body.iframe_fancybox #nav-trigger,
body.iframe_fancybox label[for="nav-trigger"] ,
body.iframe_fancybox .botao_fim_tutorial{
	display:none;
}

/***************************************************************************************
****************************************************************************************/
/* OCULTA DEMONSTRAÇÃO - nas páginas que não possuem demonstração, apenas conteúdo em texto */
/***************************************************************************************
****************************************************************************************/
.subtopico.demo_oculta .interacao,
.subtopico.demo_oculta .navegacao_interacoes {
	display:none !important;
}
.subtopico.demo_oculta .conclusao {
	margin-top:25px !important;
}

/***************************************************************************************
****************************************************************************************/
/* FILTRO DE DEMONSTRAÇÕES - na home do tutorial */
/***************************************************************************************
****************************************************************************************/
#botao_filtro_demos {
	background: url("../midia/tema/search.svg") no-repeat center center / 100% 100%;
	text-indent:-10000px;
	width:30px;
	height:30px;
	outline:0;
	position:absolute;
	display:block;
	bottom:10px;
	right:11px;
	transition:0.35s all ease;
	opacity:0.35;
}

.conteudo:hover #botao_filtro_demos {
	opacity:1;
}

/* #botao_filtro_demos { */
	/* background: url("../midia/tema/search.svg") no-repeat center center / 100% 100%; */
	/* text-indent:-10000px; */
	/* width:30px; */
	/* height:30px; */
	/* outline:0; */
	/* position:absolute; */
	/* display:block; */
	/* bottom:-30px; */
	/* right:11px; */
	/* transition:0.3s all ease; */
/* } */

/* .conteudo:hover #botao_filtro_demos { */
	/* bottom:10px; */
/* } */

.filtro_demonstracoes{
	position:absolute;
	background-color:rgba(0,0,0,0.85);
	z-index:100;
	top:0;
	left:0;
	width:100%;
	min-height:100%;
	padding-bottom:50px;
	display:none;
}

.campo_filtro_demonstracoes {
	width:65%;
	margin:100px auto 0;
}

.campo_filtro_demonstracoes > input{
	background: #e0e0e0 url("../midia/tema/search.svg") no-repeat scroll 8px center / auto 77%;
    border: 2px solid #111;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset;
    color: #000;
    font-size: 35px;
    height: 67px;
    padding: 0 15px 0 68px;
    width: 100%;	
}

.filtro_demonstracoes .tabela_modulos {
	width:65%;
	margin:20px auto;
}

.filtro_demonstracoes .tabela_modulos .lista_paginas {
	/*margin:0 0 10px;	*/
}

.filtro_demonstracoes .tabela_modulos .lista_paginas li {
	margin:15px 0;
	font-size:16px;
	color:#666;
	transition:0.5s all ease;
}

.filtro_demonstracoes .tabela_modulos .lista_paginas li:not([style*="display:none"]):last-child {
	margin-bottom:25px;
}

.filtro_demonstracoes .tabela_modulos .lista_paginas li > span{
	color:#ccc;
	/*white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
	display:inline-block;*/
}

.filtro_demonstracoes .tabela_modulos .lista_paginas li > a{
	color:#ffa500;
	font-size:22px;
}

.filtro_demonstracoes .tabela_modulos .lista_paginas li > a:hover{
	text-decoration:underline !important;
}

.filtro_demonstracoes  .fechar_filtro {
	text-indent:-10000px;
}

#fecha_filtro_demos {
	position: absolute;
    right: 20px;
    top: 20px;
    width: 40px;
	cursor:pointer;
}


/***************************************************************************************
****************************************************************************************/
/* JQUERY UI - estilo para a função resizable(), que redimensiona uma div */
/***************************************************************************************
****************************************************************************************/
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}


/***************************************************************************************
****************************************************************************************/
/* 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:13px 20px;
		font-size:2.3em;
	}
	
	.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 */
	nav.menuCategorias {
		min-height: auto;
		margin-top:auto;
		width:50%;
		float:left;
		transition:0.3s all ease;
	}
	nav.menuCategorias.oculto_responsivo {
		margin-left:-50%;
	}
	
	nav.menuCategorias .tituloMenuCategorias {
		padding:18px 15px;
		text-align:left;
		margin:0;	
		/* font-size:3vw; */
	}
	
	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%;
	}
	
	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:#00bad9;
	}
	
	.seta_voltar_categoria {
		background: #FFA500;
		border-radius: 4vw;
		height: 5vw;
		left: 2vw;
		position: absolute;
		width: 5vw;
		top:2.6vw;
	}
	/* .seta_voltar_categoria:after,  */
	/* .seta_voltar_categoria:before { */
		/* right: 39%; */
		/* 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: #FFA500; */
		/* border-width: 1vw; */
		/* margin-top: 1vw; */
		/* margin-right:-2px; */
	/* } */
	/* .seta_voltar_categoria:before { */
		/* border-color: transparent; */
		/* border-right-color:#414141; */
		/* border-width: 2vw; */
	/* } */
	.seta_voltar_categoria:before {
		border-color: #414141;
		border-image: none;
		border-style: solid;
		border-width: 0 0 0.4vw 0.4vw;
		content: "";
		height: 2vw;
		left: 1.8vw;
		position: absolute;
		top: 1.5vw;
		transform: rotate(45deg);
		width: 2vw;
	}
	
	/* CONTEÚDO */
	section.conteudo{
		width:50%;
		float:left;
	}
	section.conteudo header {
		display:none;
	}	
	
	.index section.conteudo .topico > li > span {
		position:static;
		width:100%;
		height:auto;		
		padding:4vw 3vw 4vw 6vw;
		display:block;
		font-size:3.5vw;
		color:#666;
		border-top:1px solid #aaa;
		background-color:#e0e0e0;
	}
	
	.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;
		border-bottom:1px solid rgba(0,0,0,0.15);
	}
	
	.index section.conteudo .topico > li {
		background-color:#EAEAEA !important;
	}
	
	.pagina_demonstracao section.conteudo header { background:#fafafa; display:block; }
	.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:20%; }
	
	.pagina_demonstracao .menu_clicado {
		width:20%;
	}
	
	.pagina_demonstracao nav.menuCategorias .tituloMenuCategorias {
		margin-top:0;
		padding-top:15px;
	}
	
	.index .logo_demonstra_footer {
		display:none;
	}
	
}

@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 Compras */
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 5px center #fff;
	padding: 10px 0 10px 45px;
	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; }

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

#fancybox_lanceaberto a,
#etapa9 a,
#etapa10 a {
	color:#FB8D00;
	text-decoration:none;
}

#fancybox_lanceaberto p,
#etapa9 p,
#etapa10 p {
	margin: 0 0 10px;
}

#fancybox_lanceaberto .titulo,
#etapa9 .titulo,
#etapa10 .titulo {
	background: #e9e9e9;
	padding: 5px 10px;
	border-radius: 3px;
}
/*#etapa9 h5:before,
#etapa10 h5:before {
	content:'';
	width:9px;
	height:9px;
	display:block;
	position:absolute;
	background-color:#999;
	margin-left: -19px;
    margin-top: 7px;
}*/

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