/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
  color: #222;
}

body {
  font-size: 1em;
  line-height: 1.4;
}

/*
		* Remove text-shadow in selection highlight: h5bp.com/i
		* These selection rule sets have to be separate.
		* Customize the background color to match your design.
		*/

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
		* A better looking default horizontal rule
		*/

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
		* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
		*/

img {
  vertical-align: middle;
}

/*
		* Remove default fieldset styles.
		*/

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
		* Allow only vertical resizing of textareas.
		*/

textarea {
  resize: vertical;
}

/* ==========================================================================
			Chrome Frame prompt
			========================================================================== */

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
			Author's custom styles
			========================================================================== */

/* ==========================================================================
			Helper classes
			========================================================================== */

/*
		* Image replacement
		*/

.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  /* IE 6/7 fallback */
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

/*
		* Hide from both screenreaders and browsers: h5bp.com/u
		*/

.hidden {
  display: none !important;
  visibility: hidden;
}

/*
		* Hide only visually, but have it available for screenreaders: h5bp.com/v
		*/

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
		* Extends the .visuallyhidden class to allow the element to be focusable
		* when navigated to via the keyboard: h5bp.com/p
		*/

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
		* Hide visually and from screenreaders, but maintain layout
		*/

.invisible {
  visibility: hidden;
}

/*
		* Clearfix: contain floats
		*
		* For modern browsers
		* 1. The space content is one way to avoid an Opera bug when the
		*    `contenteditable` attribute is included anywhere else in the document.
		*    Otherwise it causes space to appear at the top and bottom of elements
		*    that receive the `clearfix` class.
		* 2. The use of `table` rather than `block` is only necessary if using
		*    `:before` to contain the top-margins of child elements.
		*/

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/*
		* For IE 6/7 only
		* Include this rule to trigger hasLayout and contain floats.
		*/

.clearfix {
  *zoom: 1;
}

/* ==========================================================================
		Página DNA
			========================================================================== */

html,
body {
  background-color: #fff !important;
  font-family: "Helvetica Neue", "Helvetica" !important;
}

.container-perguntas {
  /* display: none; */
  width: 1021px !important;
  margin: 0 auto;
}

.container-perguntas .conteudos-dna {
  margin: 0;
}

#titulo_dna {
  background-image: url(/wp-content/themes/intentionally-blank/shortcodes/dna_empreendedor/img/background-titulo.png) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  height: 129px;
  color: #222 !important;
  margin: 0 0 37px 0;
}

#titulo_dna h1 {
  font-weight: bold;
  font-style: italic;
  font-size: 28px;
}

.progresso {
  /* border: 1px solid green; */
  position: relative;
  height: 32px;
  margin: 0 0 85px 0;
}

.progress-bar {
  font-size: smaller;
  background-color: #f79633 !important;
}

.progress {
  background-color: #2957a4 !important;
  color: rgba(255, 255, 255, 10);
  position: absolute;
  width: unset;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 98%;
  height: 4px !important;
}

.bolas {
  width: 100%;
  top: 0;
  margin: 0 auto;
  position: absolute;
  height: 32px;
}

.bolas span {
  position: relative;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #2957a4;
  color: #fff;
  text-align: center;
  line-height: 2;
}

.bolas .bola1 {
  position: absolute;
  left: 0;
}

.bolas .bola4 {
  position: absolute;
  right: 0;
}

.bolas .bola4 i {
  position: absolute;
  top: 6px;
  left: 6px;
}

.modal_etapas {
  width: auto;
  height: auto;
  display: flex;
  text-align: center;
  margin: 0 auto;
  background-image: url(/wp-content/themes/intentionally-blank/shortcodes/dna_empreendedor/img/fundo_etapas.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  padding: 0;
}

.check_dna {
  position: absolute;
  width: 106px;
  height: 81px;
  display: flex;
  text-align: center;
  margin: 0 auto;
  background-image: url(/wp-content/themes/intentionally-blank/shortcodes/dna_empreendedor/img/check.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  padding: 0;
  right: 20px;
  bottom: 20px;
}

.modal_etapas > .modal_etapas_cirtculo {
  width: 364px;
  height: 364px;
  border-radius: 50%;
  background-color: #0a73b9;
  text-align: center;
  padding: 0;
  margin: 0 auto 0 auto;
}

.modal_etapas > .modal_etapas_cirtculo > h1 {
  font-size: 35px;
  font-weight: bold;
  color: #f79633;
  padding: 0;
  margin: 84px auto 17px auto;
}

/* .festa {
		 width: 173px;
		 height: 174px;
		 display: flex;
		 text-align: center;
		 margin: 0 auto;
		 background-image: url(/wp-content/themes/intentionally-blank/shortcodes/dna_empreendedor/img/efeito.gif);
		 background-repeat: no-repeat;
		 background-size: contain;
		 background-position: center;
		 padding: 0;
		 position: relative;
		 left: 0;
		 right: 0;
		 top: -17px;
	 } */

.modal_etapas > .modal_etapas_cirtculo > p {
  font-size: 20px;
  font-weight: normal;
  color: #fff;
  width: 340px;
  text-align: center;
  padding: 0;
  margin: 0 auto 33px auto;
}

.modal_etapas > .modal_etapas_cirtculo > input {
  padding: 0;
  margin: 0 auto 0 auto;
  width: 104px;
  height: 40px;
  text-align: center;
  background-color: #f79633;
  font-size: 18px;
  font-weight: bold;
  border: none;
  color: #fff;
  outline: none;
  cursor: pointer;
}

.wizard > .steps {
  display: none !important;
  font-family: "Helvetica Neue", "Helvetica" !important;
}

.wizard > .content {
  background: none !important;
  /* min-height: 20em !important; */
  font-family: "Helvetica Neue", "Helvetica" !important;
  /* margin: 130px 0 0 0 !important; */
}

.wizard > .content > .body {
  background-color: transparent !important;
  font-family: "Helvetica Neue", "Helvetica" !important;
}

.wizard > .actions a,
.wizard > .actions a:hover,
.wizard > .actions a:active {
  background: #f79633 !important;
  width: 131px;
  text-align: center;
}

.wizard > .actions .disabled a,
.wizard > .actions .disabled a:hover,
.wizard > .actions .disabled a:active {
  background: #6e81a2 !important;
  color: #aaa;
}

.wizard > .content > .body input {
  display: none !important;
}

.btn-group,
.btn-group-vertical {
  width: 100%;
}

.wizard > .content > .body {
  left: 0;
  height: auto !important;
  /* position: relative !important; */
  /* float: initial !important; */
  width: 100% !important;
  padding: 0 !important;
}

.wizard > .content > .body label {
  text-align: center;
  margin: 0 auto;
  width: 60%;
  font-family: "Helvetica Neue", "Helvetica" !important;
  background-color: #fff;
  color: #000;
  white-space: unset !important;
}

.wizard > .actions {
  text-align: center !important;
}

div.pgetapas {
  position: absolute;
  top: 215px;
  width: 100%;
  margin: 0 auto 0 auto;
  color: #fff;
  text-align: center;
  left: 0;
  right: 0;
}

div.pgetapas > div.pgs {
  font-weight: 100;
}

.card {
  background-color: transparent !important;
  border: none !important;
}

.card-title {
  color: #222;
  font-size: 20px;
  font-weight: 500;
}

.card-body {
  text-align: center;
}

#perguntas_passos {
  padding: 0 !important;
}

.iziModal {
  box-shadow: none !important;
}

#perguntas_passos > div > label {
  border: none;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  background-color: #0098da;
  color: #fff;
  min-height: 40px;
  font-size: 18px;
  margin: 0 0 10px 0;
}

#perguntas_passos > div > label:focus,
#perguntas_passos > div > label:hover {
  background-color: #f79633;
}

#btn_steps {
  display: block !important;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: #fff !important;
  background-color: #f79633 !important;
  border-color: #f79633 !important;
}

.mudarCor {
  background: #f79633 !important;
  color: #fff !important;
}

#caracteristicas > .card-body > .card-title {
  text-align: left;
}

#caracteristicas > .card-body > .card-text {
  text-align: left;
  color: #222;
  font-size: 18px;
}

.pontuacao_card {
  text-align: center;
  position: relative;
  left: 10px;
  opacity: 0.9;
  /* display: none; */
}

.pontuacao_legenda {
  text-align: center;
  position: relative;
  opacity: 0.9;
  margin-top: 15px;
  display: inline-block;
}

.legendas {
  margin: 0px 0 30px 0;
  text-align: center;
}

.legendas span {
  vertical-align: middle;
  display: inline-block;
}

.legendas .cor {
  width: 20px;
  height: 10px;
  margin-right: 5px;
}

.legenda-verde .cor {
  background-color: #2dbc70;
}

.legenda-amarela .cor {
  background-color: #ffb441;
}

.legenda-vermelha .cor {
  background-color: #d73232;
}

#caracteristicas-dicas > .card-body {
  background-color: #efefef;
  color: #222;
  text-align: left;
}

li#anterior > a {
  color: #fff !important;
  background: #6e81a2 !important;
}

li#anterior > a:hover {
  background: #d47525 !important;
  color: #fff !important;
}

li#proximo > a:hover {
  background: #d47525 !important;
  color: #fff !important;
}

.wizard > .content > .body {
  left: 0;
}

#descricao-titulo {
  text-align: center;
  width: 100%;
  height: auto;
  color: #222;
  font-size: 20px;
  margin: 0px 0 40px 0;
  padding: 0 15px;
  display: block;
}

#descricao-titulo > span {
  width: 100%;
  height: auto;
  font-size: 20px;
}

.btn_imprimir {
  background-color: #f79633;
  color: #fff;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  padding: 0 30px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 18px;
  margin: 10px 0 0 0;
  border: none;
}

#imprimir:hover {
  background-color: #f77b00;
}

canvas#radar {
  margin: 0 auto !important;
  height: 497px !important;
  width: auto !important;
}

.imagem_lateral {
  display: flex;
}

.dna_conteudo {
  margin: 0 auto;
}

.grafico {
  width: 100%;
  display: none;
  margin: 20px 0 68px 0px;
}

.dicas {
  display: none;
}

.curso {
  z-index: 99;
  position: relative;
}

.curso-info {
  font-size: 14px;
  margin: 0;
  line-height: 23px;
}

.curso-nome {
  color: #222222;
  font-size: 18px;
  padding: 0;
  margin: 0;
}

.curso-nome p {
  margin: 0;
  line-height: 23px;
  margin-bottom: 5px;
}

.curso-link {
  background-color: #f79633;
  color: #fff;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  padding: 0 30px;
  border-radius: 3px;
  font-weight: bold;
  font-size: 18px;
  margin: 10px 0 0 0;
}

.curso-link:focus,
.curso-link:hover {
  background-color: #f77b00;
  text-decoration: none;
  color: #fff;
}

#perguntas_dna_container:before {
  content: "";
  background-image: url(/wp-content/themes/intentionally-blank/shortcodes/dna_empreendedor/img/efeito-cadeia-de-dna.png);
}

/* ==========================================================================
			EXAMPLE Media Queries for Responsive Design.
			These examples override the primary ('mobile first') styles.
			Modify as content requires.
			========================================================================== */
@media screen and (max-width: 320px) {
  #grafico-dados > #radar {
    width: 320px !important;
  }

  .blocker {
    padding: 0 !important;
  }
}

@media screen and (max-width: 576px) {
  .bolas > div.bola1 {
    position: absolute;
    left: -18px;
  }

  .bolas > div.bola2 {
    position: absolute;
    left: 27% !important;
  }

  .bolas > div.bola3 {
    position: absolute;
    right: 27% !important;
  }

  .bolas > div.bola4 {
    position: absolute;
    right: -18px;
  }

  .conteudo_centro {
    width: 100%;
  }

  .modal {
    width: 100% !important;
    padding: 0 !important;
  }

  canvas#radar {
    height: auto !important;
    width: 450px !important;
  }

  div#descricao-titulo {
    padding: 0 30px;
  }

  .progress {
  }

  .progress-bar {
    min-width: 30px;
  }

  .col-12 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  div#caracteristicas > .card-body {
    padding: 0 !important;
  }

  div#caracteristicas > div.card-body > p.card-text {
    padding: 0 30px !important;
  }

  div#caracteristicas-dicas {
    padding: 0 !important;
  }

  /* div#caracteristicas-dicas > .card-body {
			 padding: 0 !important;
		 } */

  div#caracteristicas-dicas > .card-body > ul {
    padding: 10px 30px !important;
  }

  #perguntas_passos > div > label {
    width: 100%;
  }

  .modal_etapas > .modal_etapas_cirtculo > p {
    font-size: 18px;
    width: 270px;
  }

  .modal_etapas > .modal_etapas_cirtculo > h1 {
    font-size: 30px;
    margin: 34px auto 17px auto;
  }

  .festa {
    width: 143px;
    height: 144px;
  }

  .modal_etapas > .modal_etapas_cirtculo {
    width: 314px;
    height: 314px;
  }
}

@media screen and (min-width: 576px) and (max-width: 768px) {
  .bolas > div.bola1 {
    position: absolute;
    left: -20px;
  }

  .bolas > div.bola2 {
    position: absolute;
    left: 29% !important;
  }

  .bolas > div.bola3 {
    position: absolute;
    right: 29% !important;
  }

  .progress {
    /* top: -156px; */
  }

  canvas#radar {
    height: auto !important;
    width: 90% !important;
  }

  .wizard > .content > .body label {
    width: 100%;
  }

  /* .wizard > .content {
			 margin: 0 !important;
		 } */

  .container {
    max-width: unset !important;
  }

  section#rodape {
    /* bottom: -113px; */
  }
}

@media screen and (max-width: 800px) {
  .check_dna {
    width: 60px;
    height: 60px;
    right: 5px;
    bottom: 5px;
  }
}

/* ==========================================================================
			Print styles.
			Inlined to avoid required HTTP connection: h5bp.com/r
			========================================================================== */

@media print {
  * {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: exact !important; /* Chrome, Safari */
    color-adjust: exact !important; /*Firefox*/
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  /*
				* Don't show links for images, or javascript/internal links
				*/

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group; /* h5bp.com/t */
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
  /* pagina DNA */
  button#imprimir {
    display: none;
    background-color: #f79633;
  }

  section#rodape {
    display: none;
  }

  body .container {
    min-width: 0 !important;
  }

  .pagebreak {
    clear: both;
    page-break-after: avoid;
  }

  .container-perguntas {
    /* display: none; */
    /* -webkit-print-color-adjust: exact; */
    width: 100% !important;
  }

  canvas#radar {
    margin: 0 auto !important;
    height: 497px !important;
    width: auto !important;
  }

  .card-body {
    /* -webkit-print-color-adjust: exact; */
    background-color: #efefef !important;
  }

  i,
  .check_dna {
    /* -webkit-print-color-adjust: exact; */
  }

  #dicas_caracteristicas,
  footer {
    display: none !important;
  }

  .elementor-element-10b0a2d8 {
    margin: 0 auto;
  }

  #titulo_dna {
    /* -webkit-print-color-adjust: exact; */
  }
}