/* ESTILOS DO GUIA */

/* SESSÃO CSS */
#css { background-color: #eaeaee; padding: 50px 0; }

#css .title-section { margin-top: 0; }

#css .description-section { margin-top: 48px; }

#css .link-personalizado {
  color: #337ab7;
  text-decoration: none;
  font-family: OpenSans;
  font-weight: normal;
}

#css .link-personalizado:focus {
  color: #0b67bd;
  text-decoration: none;
  outline: 0;
  box-shadow: none;
}

/* SESSÃO PRÁTICA */
.pratica { padding: 50px 0; overflow: hidden; }

.pratica .description-section { margin-top: 48px;  }

.pratica .arquivos { margin-top: 48px; }

.pratica .arquivos .titulo { font-size: 22px; font-family: OpenSans Bold; }

.pratica .arquivos .texto { font-size: 16px; }

.pratica .arquivos .texto .importante { color: #cc092f; }

.pratica .span-icon {
  color: #337ab7;
  text-decoration: none;
  font-family: OpenSans;
  font-weight: normal;
  font-size: 18px;
  margin-left: 15px;
}

.pratica .span-link {
  color: #337ab7;
  text-decoration: none;
  font-family: OpenSans;
  font-size: 16px;
}

.divider-section { width: 70%; }

/* SESSÃO BIBLIOTECA */
#biblioteca { padding: 50px 0; }

#biblioteca .subtitulo {
  margin-top: 58px;
  font-family: 'Montserrat';
  font-weight: 300;
  font-size: 30px;
  margin-bottom: 5px;
}

#biblioteca .texto { font-size: 16px; margin-top: 0; }

#biblioteca .titulo-exemplo {
  margin-top: 50px;
  margin-bottom: 0;
  color: #a5aab6;
  font-size: 18px;
  font-family: 'Montserrat';
  font-weight: 300;
}

#biblioteca .hr-exemplos {
  border-top: 1px solid #d2d4da;
  margin-top: 10px;
  margin-bottom: 30px;
}

#biblioteca .select-fontes {
  color: #4d4e53;
  width: 260px;
  border-radius: 8px;
  border: 1px solid #d2d4da;
  margin-bottom: 15px;
  padding: 20px 10px;
  text-align: center;
  font-size: 16px;
}

#biblioteca .select-fontes:focus { outline: 0; }

#biblioteca .paleta-de-cores { margin-top: 30px; }

#biblioteca .exemplo-alinhamento { padding: 0 15px 10px 15px; }

#biblioteca .icon-big { font-size: 50px; }

#biblioteca .icon-red { color: #cc092f; }

/* ESTILOS DA BRADESCO SEGUROS */

/* TIPOS DE FONTE */
.font-NJ-Regular { font-family: 'Montserrat';
  font-weight: 400; }
.font-NJ-Medium { font-family: 'Montserrat';
  font-weight: 500; }
.font-NJ-Bold {font-family: 'Montserrat';
  font-weight: 700; }
.font-OS-Regular { font-family: OpenSans Light; }
.font-OS-Medium { font-family: OpenSans Semibold; }
.font-OS-Bold { font-family: OpenSans Bold; }

.font-MS-Regular{ font-family: 'Montserrat' sans-serif; font-weight: 400;}
.font-MS-Medium{ font-family: 'Montserrat' sans-serif; font-weight: 500;}
.font-MS-SemiBold{ font-family: 'Montserrat' sans-serif; font-weight: 600;}
.font-MS-Bold{ font-family: 'Montserrat' sans-serif; font-weight: 700;}


/* TAMANHOS DE FONTE */
.font9px { font-size: 0.9em;  line-height: 1.5em; }
.font10px { font-size: 1.0em; line-height: 1.5em; }
.font11px { font-size: 1.1em; line-height: 1.5em; }
.font12px { font-size: 1.2em; line-height: 1.5em; }
.font14px { font-size: 1.4em; line-height: 1.5em; }
.font16px { font-size: 1.6em; line-height: 1.5em; }
.font18px { font-size: 1.8em; line-height: 1.5em; }
.font20px { font-size: 2.0em; line-height: 1.5em; }
.font22px { font-size: 2.2em; line-height: 1.5em; }
.font24px { font-size: 2.4em; line-height: 1.5em; }
.font26px { font-size: 2.6em; line-height: 1.5em; }
.font28px { font-size: 2.8em; line-height: 1.5em; }
.font30px { font-size: 3.0em; line-height: 1.5em; }
.font36px { font-size: 3.6em; line-height: 1.5em; }
.font42px { font-size: 4.2em; line-height: 1.5em; }
.font50px { font-size: 5.0em; line-height: 1.5em; }
.font60px { font-size: 6.0em; line-height: 1.5em; }
.font70px { font-size: 7.0em; line-height: 1.5em; }
.font80px { font-size: 8.0em; line-height: 1.5em; }
.font90px { font-size: 9.0em; line-height: 1.5em; }
.font100px { font-size: 10.0em; line-height: 1.5em; }
.font150px { font-size: 15.0em; line-height: 1.5em; }

/* CORES DE FUNDO */
.bg-darkergray { background-color: #4d4e53; }
.bg-darkgray { background-color: #a5aab6; }
.bg-gray { background-color: #d2d4da; }
.bg-lightgray { background-color: #e8e9ec; }
.bg-lightergray { background-color: #f4f4f6; }
.bg-darkblue { background-color: #2365a7; }
.bg-blue { background-color: #0b67bd; }
.bg-lightblue { background-color: #0e81ed; }
.bg-darkred { background-color: #99000f; }
.bg-red { background-color: #cc092f; }
.bg-lightred { background-color: #e60935; }

/* CORES DE TEXTO */
.font-darkergray { color: #4d4e53; }
.font-darkgray { color: #a5aab6; }
.font-gray { color: #d2d4da; }
.font-lightgray { color: #e8e9ec; }
.font-lightergray { color: #f4f4f6; }
.font-white { color: #ffffff; }
.font-darkblue { color: #2365a7; }
.font-blue { color: #0b67bd; }
.font-lightblue { color: #0e81ed; }
.font-darkred { color: #99000f; }
.font-red { color: #cc092f; }
.font-lightred { color: #e60935; }

/* ALINHAMENTO DE TEXTO (ja existe left, center e right)*/
.text-justify { text-align: justify; }

/* ALIAMENTO DE ELEMENTO */
.elem-center {  margin: 0 auto;}
.elem-left { float: left; }
.elem-right { float: right; }
.elem-clear { clear: both; }

/* ESTILOS DO ANTIGO GUIA */

/* PALETA DE COR */
.color-palette {
	border: 1px solid #d2d4da;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(210,212,218,0.8);
	-moz-box-shadow: 0px 0px 5px 0px rgba(210,212,218,0.8);
	box-shadow: 0px 0px 5px 0px rgba(210,212,218,0.8);
  margin-right: 30px;
  margin-bottom: 30px;
}

.color-palette [class^="bg"] { height: 120px; border-radius: 3px 3px 0 0; }

.color-palette>.div-palette { text-align: center; }

.color-palette>.div-palette:nth-child(2) { padding-top: 15px; }

.color-palette>.div-palette:last-child { padding-bottom: 15px; }

.color-palette .hr-palette { margin: 15px 0; border-top: 1px solid #d2d4da; }