/* Colors */
/* Afternoon 10:
Verde: #027B63
Amarillo: #F1C435
Naranga: #F2A534
*/
/* Morning 2:
Azul: #9CD5CO
Amarillo: #F2DA5D
Crema: #F3CA99
Naranga: #F29545
Rojo: #F26934
*/

/*Container home header*/
/*color=dark*/
.home_section_css {
  display: flex;
  background: #f2a534;
}
.home_section_css .container {
  display: flex;
  background: #f2a534;
}
.home_section_css .container .header {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.home_section_css .container .header .box {
  flex: 1;
  background: #f2a534;
  color: #000000;
  border-radius: 2px;
  margin: 20px 10px;
  padding: 15px 20px;
  text-align: center;
}
.home_section_css .container .header .box:nth-of-type(1) {
  flex-grow: 1;
  background: #f2a534;
  color: #000000;
  border-radius: 2px;
  margin: 20px 10px;
  padding: 15px 20px;
  text-align: left;
}
.home_section_css .container .header .box:nth-of-type(2) {
  flex-grow: 1;
  background: #f2a534;
  color: #000000;
  border-radius: 2px;
  margin: 20px 10px;
  padding: 15px 20px;
  text-align: center;
}

/* Container home chapters */
.home_chapter_css {
  display: flex;
  background: #17a2b8;
}
.home_chapter_css .container {
  display: flex;
  background: #ffffff;
}
.home_chapter_css .container .box {
  flex: 1;
  background: #f2a534;
  color: #000000;
  height: 300px;
  border-radius: 5px;
  margin: 20px 10px;
  padding: 15px 20px;
  text-align: center;
}
.home_chapter_css .container .box:nth-of-type(1) {
  background: #ffffff;
  flex-grow: 0.1;
}
.home_chapter_css .container .box:nth-of-type(2) {
  background: #f2a534;
  flex-grow: 3;
}
.home_chapter_css .container .box:nth-of-type(3) {
  background: #f2a534;
  flex-grow: 3;
}
.home_chapter_css .container .box:nth-of-type(4) {
  background: #f2a534;
  flex-grow: 3;
}
.home_chapter_css .container .box:nth-of-type(5) {
  background: #f2a534;
  flex-grow: 3;
}
.home_chapter_css .container .box:nth-of-type(6) {
  background: #ffffff;
  flex-grow: 0.1;
}
/* End container home chapters */

/* Container chapter 2 */
.section_chapter2 .container {
  background-color: #f29545;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
}
.column {
  background: #f29545;
  display: flex;
  flex-direction: column;
  border: #ccc solid 0px;
  margin: 10px;
  padding: 10px;
  text-align: left;
  border-radius: 10px;
  flex: 1;
}
.column1 .box {
  flex: 1;
  background: #568c63;
  border-radius: 10px;
  margin: 20px 10px;
  padding: 15px 20px;
}
.column2 .box {
  flex: 1;
  background: #568c63;
  border-radius: 10px;
  margin: 20px 10px;
  padding: 15px 20px;
}
.column3 .box {
  flex: 1;
  background: #568c63;
  border-radius: 10px;
  margin: 20px 10px;
  padding: 15px 20px;
}
.column4 .box {
  flex: 1;
  background: #568c63;
  border-radius: 10px;
  margin: 20px 10px;
  padding: 15px 20px;
}
/* End container chapter 2 */

/*Container buttons section chapters*/
.container_buttons_links_chapters {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.container_buttons_links_chapters a:hover {
  color: #568c63;
}
/*End container buttons section chapters*/

/*Container buttons section header*/
.container_buttons_links_header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.container_buttons_links_header a:hover {
  color: #f2a534;
}
/*color=dark*/
.container_buttons_links_header btn {
  width: 100px;
  height: 100px;
  background: #f2a534;
  color: #000000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/*Chat layout*/
.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
  color: black;
  text-align: left;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3;
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .home_section_css .container {
    flex-direction: column;
    padding-top: 20px;
    text-align: center;
  }
  .home_section_css .container .header .box:nth-of-type(2) {
    flex-grow: 1;
    background: #f2a534;
    color: #000000;
    border-radius: 2px;
    margin: 0px 10px;
    padding: 15px 20px;
    text-align: center;
    max-width: 325px;
  }
  .home_chapter_css .container {
    flex-direction: column;
    padding: 10px;
    text-align: center;
  }
  .statistics_summary3_css {
    flex-direction: column;
    padding: 10px;
    text-align: center;
  }
  .section_chapter2 .container {
    flex-direction: column;
    padding: 10px;
    text-align: center;
  }
}