@charset "UTF-8";
/*
	variables para definir altura para los elementos
	que tienen position: fixed
*/
/*
	variables para definir colores
*/
/*
	variables para definir bordes
*/
/*
	variables para definir sombras
*/
/*
	formatiamos las margenes y espaciados que definen los
	navegadores por defecto
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
	body
*/
body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  min-height: 100vh;
}

/*
	tag-a: estilos generales para esta etiqueta
*/
a {
  text-decoration: none;
}

/*  
    header_component: definimos position: fixed junto con sus 
	propiedades top, left, right y z-index para fijar el menu
	de navegacion en la parte superior
*/
.header_component {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  background-color: #fff;
  border-bottom: 1px solid #eaecef;
  transition: box-shadow 0.2s;
  /*
  	js_header_scroll: clase añadida con javascript en "./src/js/main.js"
  	definimos una sombra cuando inicia el scroll
  */
  /*
  	header_container: definimos display flex junto con sus 
  	propiedades justify-content y align-items mas una altura 
  	para centrar de manera vertical y horizontal los elementos 
  	que este contiene, finalmente definimos un espaciado en 
         el eje-X para esta medida
  */
}
.header_component.js_header_scroll {
  box-shadow: 0 2px 5px rgba(179, 177, 177, 0.3019607843);
}
.header_component .header_container {
  display: flex;
  justify-content: space-between;
  height: 70px;
  align-items: center;
  padding: 0 6%;
  /*  
      tag-h4
  */
  /*
      tag-span
  */
  /*
  	header_box_menu_icon
  */
}
.header_component .header_container .nitlogo_box a h4 {
  color: #5c5b5b;
  font-size: 30px;
}
.header_component .header_container .nitlogo_box a h4 span {
  color: #00618b;
}
.header_component .header_container .header_box_menu_icon {
  cursor: pointer;
  /*
  	tag-span: definimos la propiedad display: block para hacer 
  	visible las lineas del menu hamburgesa, finalmente definimos
  	un ancho y alto para darles tamaño	
  */
}
.header_component .header_container .header_box_menu_icon span {
  display: block;
  width: 26px;
  height: 3px;
  background-color: #5c5b5b;
  border-radius: 10px;
  /*
  	seleccionamos el segundo elemento tag-span y generamos
  	un margen en el eje-Y
  */
  /*
  	dispositivos mayores a 720px: definimos display: none 
  	para ocultar el icono de menu de la vista
  */
}
.header_component .header_container .header_box_menu_icon span:nth-child(2) {
  margin: 4px 0;
}
@media (min-width: 720px) {
  .header_component .header_container .header_box_menu_icon span {
    display: none;
  }
}

/*  
    components_container
*/
.components_container {
  /* 
        nav_component: definimos position: fixed junto con sus propiedades 
  top, left y z-index para fijar el menu de navegacion y
  posicionarlo en la parte izquierda de la pantalla, con
  hight: 100vh hacemos que este elemento tome todo el alto de la 
  pantalla y finalmente definimos un espaciado en el eje-X y con 
  overflow: auto generamos un scroll en el eje-Y para cuando la altura 
  de la pantalla sea menor a la altura del menu de navegacion
    */
  /* 
        main_components: definimos position alsolute junto con su 
  propiedad top para posicionar este elemento, finalmente 
  definimos un espaciado en el eje-X para este elemento
    */
}
.components_container .nav_component {
  position: fixed;
  top: 70px;
  left: 0;
  z-index: 8;
  border-right: 1px solid #eaecef;
  width: 240px;
  height: 100vh;
  padding: 0 18px;
  overflow: auto;
  /*
  	::-webkit-scrollbar: definimos un ancho del
  	scrollbar
  */
  /*
  	::-webkit-scrollbar-thumb: definimos display: none
  	para ocultar el scrollbar
  */
  /*
  	cuando hacemos :hover sobre nav_component 
  	seleccionamos el pseudo elemento 
  	::-webkit-scrollbar-thumb y definimos display: block
  	para hacer visible el scrollbar
  */
  /*
  	dispositivos menores a 719px: definimos transform: translateX() 
  	para desplazar el menu de navegacion ocultandolo de la vista
  */
  /*
  	search_box: definimos position: relative debido a que uno de sus 
            elementos hijos tiene definido position: absolute, finalmente definimos 
  	un margen en la parte superior 
  */
  /*
  	nav_menu: definimos un espaciado personalizado en el eje-Y para este elemento 
  	el espaciado inferior permite solucionar un error que se presenta 
  	impidiendo que el ultimo item del menu se vea correctamente
  */
}
.components_container .nav_component::-webkit-scrollbar {
  width: 8px;
}
.components_container .nav_component::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
  display: none;
}
.components_container .nav_component:hover::-webkit-scrollbar-thumb {
  display: block;
}
@media (max-width: 719px) {
  .components_container .nav_component {
    background-color: #fff;
    transform: translateX(-1000px);
    transition: transform 0.3s;
    /*
    	js_show_navbar: clase añadida con javascript en "./src/js/main.js"
    	definimos transform: translateX(0px) para retornanr el menu de 
    	navegacion en su posicion original haciendolo nuevamente visible
    */
  }
  .components_container .nav_component.js_show_navbar {
    transform: translateX(0px);
  }
}
.components_container .nav_component .search_box {
  position: relative;
  margin-top: 30px;
  /*
  	tag-input: definimos outline: none  para remover el borde que 
  	generan los navegadores en los inputs, finalmente definimos 
  	un espaciado en el eje-X para este elemento 
  */
  /*
  	search_btn
  */
}
.components_container .nav_component .search_box input {
  outline: none;
  background-color: transparent;
  color: #5c5b5b;
  border: 1px solid #eaecef;
  font-size: 17px;
  letter-spacing: 0.5px;
  width: 100%;
  height: 35px;
  padding: 0 8px;
  transition: box-shadow 0.2s;
  /*
  	cuando tag-input tiene el foco, modificamos 
  	el color del borde y añadimos una sombra
  */
}
.components_container .nav_component .search_box input:focus {
  border: 1px solid rgba(0, 97, 139, 0.5843137255);
  box-shadow: 0 0 8px 0 rgba(179, 177, 177, 0.3019607843);
}
.components_container .nav_component .search_box .search_btn {
  /*
  	tag-svg: definimos vertical-align: top para remover un 
  	espaciado que generan los navegadores en los iconos, 
  	finalmente con position: absolute y sus propiedades top
  	y right posicionamos el icono dentro del input
  */
}
.components_container .nav_component .search_box .search_btn svg {
  vertical-align: top;
  position: absolute;
  top: 6px;
  right: 6px;
  fill: #00618b;
  width: 24px;
  height: 24px;
}
.components_container .nav_component .nav_menu {
  padding: 30px 0 70px;
  /*
  	li_dropdown: definimos un margen en la parte inferior de este 
  	elemento
  */
}
.components_container .nav_component .nav_menu .li_dropdown {
  list-style: none;
  margin-bottom: 18px;
  /*
      cuando hacemos :hover sobre la tag-li, seleccionamos a 
      tag-a y modificamos el color de este elemento
  */
  /*
      cuando hacemos :hover sobre la tag-li, seleccionamos a 
      tag-svg y modificamos el color de este elemento
  */
  /*
  	cuando li_dropdown tiene la clase js_show_dropdown_menu
  	seleccionamos a dropdown_menu y definimos display block
  	y una altura para hacer visible los elementos que este
  	contiene
  */
  /*
  	cuando li_dropdown tiene la clase js_show_dropdown_menu
  	seleccionamos a la tag-svg que se encuentra dentro de la
  	tag-a y definimos una rotacion de 180 grados
  */
  /*
  	tag-a: definimos flexbox con su propiedad
  	justify-content para generar un espaciado entre
  	el enlace y el icono y align-items para centrar de manera
  	vertical los elementos que este contiene 
  */
  /*
  	dropdown_menu: definimos un max-height: 0 para
  	reducir la altura de este elemento luego
  	con la propiedad overflow: hidden ocultamos 
  	los valores que sobresalen del elemento,
  	finalmente definimos un espaciado en el eje-Y 
  	para este elemento
  */
}
.components_container .nav_component .nav_menu .li_dropdown:hover > a {
  color: #00618b;
}
.components_container .nav_component .nav_menu .li_dropdown:hover svg {
  fill: #00618b;
}
.components_container .nav_component .nav_menu .li_dropdown.js_show_dropdown_menu .dropdown_menu {
  display: block;
  max-height: 999px;
}
.components_container .nav_component .nav_menu .li_dropdown.js_show_dropdown_menu a svg {
  transform: rotate(180deg);
}
.components_container .nav_component .nav_menu .li_dropdown a {
  color: #5c5b5b;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*
  	cuando hacemos :hover sobre la tag-a modificamos
  	el color de este elemento
  */
  /*
  	tag-svg: definimos vertical-align: top para remover un 
  	espaciado que generan los navegadores en los iconos, 
  	finalmente una transicion para suavizar el giro del
  	icono al momento de hacer click en li_dropdown
  */
}
.components_container .nav_component .nav_menu .li_dropdown a.js_active_link {
  color: #00618b;
}
.components_container .nav_component .nav_menu .li_dropdown a.js_active_link svg {
  fill: #00618b;
}
.components_container .nav_component .nav_menu .li_dropdown a svg {
  vertical-align: top;
  fill: #5c5b5b;
  width: 12px;
  height: 12px;
  transition: transform 0.3s;
}
.components_container .nav_component .nav_menu .li_dropdown .dropdown_menu {
  max-height: 0;
  overflow: hidden;
  padding: 0 13px;
  /*
  	tag-li: definimos un espaciado en el eje-Y para este elemento
  */
}
.components_container .nav_component .nav_menu .li_dropdown .dropdown_menu li {
  list-style: none;
  padding: 10px 0;
  /*
  	tag-a
  */
}
.components_container .nav_component .nav_menu .li_dropdown .dropdown_menu li a {
  font-size: 1rem;
  /*
  	cuando hacemos :hover sobre la tag-a modificamos
  	el color de este elemento
  */
}
.components_container .nav_component .nav_menu .li_dropdown .dropdown_menu li a:hover {
  color: #00618b;
}
.components_container .main_components {
  position: absolute;
  top: 70px;
  color: #5c5b5b;
  padding: 0 6%;
  /*
  	dispositivos mayores a 720px: definimos right: 0 para
  	posicionar este elemento a la parte derecha de la
  	pantalla para que le deje el espacio al menu de navegacion, 
  	tambien definimos un ancho calculado y a 100% y le 
  	restamos el ancho del menu de navegacion
  */
  /*
  	dispositivos menores a 719px: definimos left: 0 para
  	posicionar este elemento a la parte izquierda de la
  	pantalla para que tome el espacio dejado por el 
  	menu de navegacion, finalmente modificamos el ancho a
  	100% para que tome el ancho total de la pantalla 
  */
  /*
  	banner_component
  */
  /*
  	description_component
  */
  /*
  	section_banner  
  */
  /*
  	sections_container
  */
  /*
  	section_footer: definimos un margen personalizado en
  	el eje-Y para este elemento 
  */
}
@media (min-width: 720px) {
  .components_container .main_components {
    right: 0;
    width: calc(100% - 240px);
  }
}
@media (max-width: 719px) {
  .components_container .main_components {
    left: 0;
    width: 100%;
  }
}
.components_container .main_components .banner_component {
  text-align: center;
  font-size: 3rem;
  margin: 30px 0 40px;
  /*
  	dispositivos menores a 952px: modificamos el tamaño de
  	fuente y el margen inferior de este elemento
  */
  /*
  	dispositivos menores a 418px: modificamos el tamaño de
  	fuente de este elemento
  */
  /*
  	tag-h1
  */
}
@media (max-width: 952px) {
  .components_container .main_components .banner_component {
    font-size: 1.9rem;
    margin: 30px 0;
  }
}
@media (max-width: 418px) {
  .components_container .main_components .banner_component {
    font-size: 1.3rem;
  }
}
.components_container .main_components .banner_component h1 {
  color: #5c5b5b;
  /*
  	tag-strong
  */
  /*
  	tag-span
  */
}
.components_container .main_components .banner_component h1 strong {
  color: #00618b;
}
.components_container .main_components .banner_component h1 span {
  color: #e69208;
}
.components_container .main_components .description_component {
  /*
  	description_paragraph: definimos una separacion de lineas y un margen
  	en el eje-Y para este elemento
  */
}
.components_container .main_components .description_component .description_paragraph {
  font-size: 1.5rem;
  line-height: 1.5;
  margin-bottom: 30px;
  /*
  	tag-strong
  */
}
.components_container .main_components .description_component .description_paragraph strong {
  color: #00618b;
}
.components_container .main_components .section_banner {
  /*
  	tag-h2: definimos un margen en la parte superior de
  	este elemento
  */
  /*
  	banner_line_titles
  */
  /*
  	tag-p: definimos una separacion de lineas y un margen 
  	en el eje-Y para este elemento
  */
}
.components_container .main_components .section_banner h2 {
  font-size: 2.8rem;
  margin-top: 30px;
  /*
  	dispositivos menores a 350px: modificamos el tamaño de
  	fuente para este elemento
  */
  /*
  	dispositivos menores a 330px: modificamos el tamaño de
  	fuente para este elemento
  */
}
@media (max-width: 350px) {
  .components_container .main_components .section_banner h2 {
    font-size: 2.6rem;
  }
}
@media (max-width: 330px) {
  .components_container .main_components .section_banner h2 {
    font-size: 2.3rem;
  }
}
.components_container .main_components .section_banner .banner_line_titles {
  border: 2px solid #00618b;
  width: 100px;
}
.components_container .main_components .section_banner p {
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 30px 0 80px;
  /*
  	tag-strong
  */
}
.components_container .main_components .section_banner p strong {
  color: #00618b;
}
.components_container .main_components .sections_container {
  /*
  	sect_content
  */
  /*
  	division_line: definimos un margen en la parte
  	inferior para este elemento
  */
}
.components_container .main_components .sections_container .sect_content {
  /*
  	tag-h3: definimos un margen en la parte inferior de
  	este elemento
  */
  /*
  	code_box: definimos un margen en la parte inferior de este 
  	elemento y un espaciado de 12px para todos los ejes
  */
  /*
  	sect_box_img: definimos un margen en la parte inferior
  	de este elemento
  */
}
.components_container .main_components .sections_container .sect_content h3 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 40px;
  /*
  	dispositivos menores a 336px: modificamos el tamaño de
  	fuente de este elemento
  */
}
@media (max-width: 336px) {
  .components_container .main_components .sections_container .sect_content h3 {
    font-size: 1.7rem;
  }
}
.components_container .main_components .sections_container .sect_content .code_box {
  background-color: #343d4d;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 6px 0 #ccc;
  margin-bottom: 40px;
  padding: 12px;
  /*
  	tag-span y tag-strong
  */
}
.components_container .main_components .sections_container .sect_content .code_box span,
.components_container .main_components .sections_container .sect_content .code_box strong {
  color: #e69208;
}
.components_container .main_components .sections_container .sect_content .sect_box_img {
  text-align: center;
  margin-bottom: 80px;
  /*
  	tag-img: definimos vertical-align: top para remover un 
  	espaciado que generan los navegadores en los imagenes, 
  	finalmente con object-fit ajustamos la img a su contenedor 
  */
}
.components_container .main_components .sections_container .sect_content .sect_box_img img {
  vertical-align: top;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 2px 6px 0 #ccc;
}
.components_container .main_components .sections_container .division_line {
  text-align: center;
  color: #ccc;
  margin-bottom: 90px;
}
.components_container .main_components .section_footer {
  text-align: center;
  color: #ccc;
  font-size: 1.2rem;
  margin: 60px 0 30px;
}/*# sourceMappingURL=style.css.map */