/* Articles list description -----------------------------------------------*/

.articles-list-description {
  /* width: 958px; */
  width: 100%;
  margin-bottom: 5px;
  background: white;
  border: 1px solid lightsteelblue;
}

.articles-list-description hr {
  margin-left: 20px;
  margin-right: 20px;
  color: #33739E;
}

.articles-list-description img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
}



/* Articles list element -----------------------------------------------*/

.articles-list-element {
  /* width: 468px; */
  width: 100%;
  margin-bottom: 5px;
  background: white;
  border: 1px solid lightsteelblue;
  min-height: 350px;
}

.articles-list-element hr {
  margin-left: 20px;
  margin-right: 20px;
  color: #33739E;
}


.articles-list-element h3 {
  margin-left: 20px;
  margin-right: 20px;
  color: #33739E;
  text-align: center;

  padding: 10px 10px 10px 10px;
  background-color: cornsilk;
  border-color: bisque;
  border-style: solid;
  border-width: 1px 0px 1px 0px;
  border-radius: 4px;


}

.articles-list-element a {
  text-decoration: none;
  color: #33739E;
  text-align: right;
}

.articles-list-element a:hover {
  color: #2C495D;
}



.articles-list-element img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  border-radius: 5%;
}

.articles-list-element p {

  /*
  padding: 10px 10px 10px 10px;
  background-color: cornsilk;
  border-radius: 4px;*/

  color: black;
  text-align: justify;
}


/* Articles single element -----------------------------------------------*/

.articles-single-element {
  /* width: 958px; */
  width: 100%;
  margin: auto;
  margin-bottom: 5px;
  background: white;
  border: 1px solid lightsteelblue;
  min-height: 350px;
  overflow: auto;
}



.articles-single-element hr {
  margin-left: 20px;
  margin-right: 20px;
  color: #33739E;
}


.articles-single-element h3 {
  margin-left: 20px;
  margin-right: 20px;
  color: #33739E;
  text-align: center;

  padding: 10px 10px 10px 10px;
  background-color: cornsilk;
  border-color: bisque;
  border-style: solid;
  border-width: 1px 0px 1px 0px;
  border-radius: 4px;


}

.articles-single-element a {
  text-decoration: none;
  color: darkorange;
  text-align: right;
}

.articles-single-element a:hover {
  color: orangered;
}


.articles-single-element-img {
    width: 100%;
}

.articles-single-element img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* width: 430px; */
  width: 50%;

  border-radius: 5%;
}

.articles-single-element p {

  /*
  padding: 10px 10px 10px 10px;
  background-color: cornsilk;
  border-radius: 4px;*/

  color: black;
  text-align: justify;
}

/*
.articles-single-element h1 {
    margin-left: 20px;
    margin-right: 20px;
    color: #33739E;
    padding: 10px 10px 10px 10px;
    background-color: bisque;
    border-radius: 4px;
}*/


.articles-image-normalize
{
  width: 200px;
  height: 200px;
}


.articles-grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

/* Numbered headers---------------------------------------------------------*/

.numbered-headers h1,h2,h3,h4,h5,h6 { margin-left: 20px;
margin-right: 20px; color: #33739E; font-size: 17px; }

.numbered-headers h3 {padding:0; text-align: left;
font-size:100%; background: none; border: none;}



.numbered-headers {counter-reset: h1counter; }
.numbered-headers h1 { counter-reset: h2counter; }
.numbered-headers h2 { counter-reset: h3counter; }
.numbered-headers h3 { counter-reset: h4counter; }
.numbered-headers h4 { counter-reset: h5counter; }
.numbered-headers h5 { counter-reset: h6counter; }
.numbered-headers h6 {}

.numbered-headers h1:before {
      counter-increment: h1counter;
      content: counter(h1counter) ".\0000a0\0000a0";
  }

.numbered-headers h2:before {
    counter-increment: h2counter;
    content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
}

.numbered-headers h3:before {
    counter-increment: h3counter;
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
}

.numbered-headers h4:before {
    counter-increment: h4counter;
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
}

.numbered-headers h5:before {
    counter-increment: h5counter;
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) ".\0000a0\0000a0";
}

.numbered-headers h6:before {
    counter-increment: h6counter;
    content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) "." counter(h6counter) ".\0000a0\0000a0";
}

/*-------------------------------------------------------------------------*/


.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.article-content {
  width: 70%;
  float: left;
}

.article-toc {
  width: 30%;
  float: right;

}

.article-toc-layout {
    background: bisque;
    border-radius: 5%;
    text-align: left;
    border: 1px solid lightsteelblue;
    margin-right: 20px;
}


.article-toc-layout a {
  text-decoration: none;
  color: #33739E;
}

.article-toc-layout a:hover {
  color: #2C495D;
}



/*
.sticky {
  position: fixed;
  top: 10px;
  width: 280px;
  right: 197px
}*/

.toc-padding-h1 {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 8px;
  font-size: 15px;

}

.toc-padding-h2 {
  margin-left: 40px;
  margin-right: 20px;
  margin-bottom: 8px;
  font-size: 15px;
}

.toc-padding-h3 {
  margin-left: 60px;
  margin-right: 20px;
  margin-bottom: 8px;
  font-size: 15px;
}

.toc-padding-h4 {
  margin-left: 60px;
  margin-right: 20px;
  margin-bottom: 8px;
  font-size: 15px;
}

.toc-padding-h5 {
  margin-left: 80px;
  margin-right: 20px;
  margin-bottom: 8px;
  font-size: 15px;
}

.toc-padding-h6 {
  margin-left: 100px;
  margin-right: 20px;
  margin-bottom: 8px;
  font-size: 15px;
}