#content{
    padding: 20px;
}


#cover h1 {
    font-family: 'Open Sans';
    font-size: 20px
}



/* img{
    max-width: 400px;
} */

h3 {
  width: 200%;
  height: 80px;
  background-color:black;
  position:absolute;
  left: 0;
  top: -50px;
}

.container{
  position: relative;
  display: grid;
  align-content: center;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  height: 300px;
  margin-left: 15%;
  margin-right: 15%;
  margin-top: 100px;
  text-align: center;
}
.pers1 {
  grid-column: 1;
  grid-row: 1;
}
.pers2 {
  grid-column: 2;
  grid-row: 1;
}
.pers3 {
  grid-column: 3;
  grid-row: 1;
}
.PERSOpcr {
  grid-column: 1;
  grid-row: 2;
}
.PERSOpcr {
  display:block;
  overflow: hidden;
  width: 300px;
  height: 350px;
  margin-top: 0px;
  margin-left: 0px;
  border:0px;
}
.PERSOpcr img {
  position:static;
  width: 100px;
  height: auto;
}
.PERSOpcr img:hover {
  position:static;
  width: 300px;
  height: 350px;
  margin-top: 0px;
  margin-left: 0px;
  border:0px;
}
.PERSOpcr  img:hover {
  position:static;
  width: 140px;
  height: auto;
}

.PERSOgm {
  grid-column: 2;
  grid-row: 2;
}
.PERSOgm {
  display:block;
  overflow: hidden;
  width: 300px;
  height: 350px;
  margin-top: 0px;
  margin-left: 0px;
  border:0px;
}

.PERSOgm img {
  position:static;
  width: 120px;
  height: auto;
}
.PERSOgm img:hover {
  position:static;
  width: 380px;
  height: 420px;
  margin-top: 0px;
  margin-left: 0px;
  border:0px;
}
.PERSOgm img:hover {
  position:static;
  width: 150px;
  height: auto;
}

.PERSOgml {
  grid-column: 3;
  grid-row: 2;
}
.PERSOgml {
  display:block;
  overflow: hidden;
  width: 350px;
  height: 350px;
  margin-top: 20px;
  margin-left: 0px;
  border:0px;
}
.PERSOgml img {
  position:static;
  width: 180;
  height: auto;
}
.PERSOgml img:hover {
  position:static;
  width: 350px;
  height: 350px;
  margin-top: 0px;
  margin-left: 0px;

  border:0px;
}
.PERSOgml img:hover {
  position:static;
  width: 250px;
  height: auto;
}

h1 {
  font-size: 60px;
  text-align: center;
  margin-top: 80px;
  font-family:
}
h2 {
  font-size: 40px;
  text-align: center;
  font-family: 'kaushan_scriptregular';
}

.chapter {
font-family: 'AveriaRegular';
  font-size: 20Px;
  font-weight: lighter;
  font-style:normal;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 50px;
}



.container2{
  align-content: center;
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top:auto;
  text-align: center;
}
.texte1{
  grid-column: 1 / span 2;
  grid-row: 1;
  text-align: justify;
  margin-right: 30px;
  margin-top: 150px;
}
.imgch1{
  grid-column: 3;
  grid-row: 1;
  width: 180px;
}

.container3{
  align-content: center;
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 200px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 10px;
  text-align: center;
}

.texte2{
  grid-column: 1 / span 3;
  grid-row: 1;
  text-align: justify;
}


.container4{
  align-content: center;
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 100px;
  margin-left:auto;
  margin-right:auto;
  margin-top:auto;
  text-align: center;
}

.texte3{
  grid-column: 1 / span 3;
  grid-row: 2;
  text-align: justify;
  margin-top: 20px;
}
.imgch3{
  grid-column: 1 / span 3;
  grid-row: 1;
}

.container5{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 400px;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.texte4{
  grid-column: 1/ span 3;
  grid-row: auto;
}

.container6{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 400px;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.imgch51{
  grid-column: 2 / span 2;
  grid-row: 2;
}

.imgch52{
  grid-column: 1;
  grid-row: 1;
}

.texte5{
  grid-column: 2 / span 2;
  grid-row: 1;
}

#u31 {
  width: 200px;
  margin-top: 80px;
}

.container7{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 250px;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  margin-top: -20px;
}

.texte6 {
  grid-column: 1 / span 3;
  grid-row: auto;
}

.container8{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 380px;
  margin-left:auto;
  margin-right:auto;
  text-align: justify;
}

.texte7 {
  grid-column: 2 / span 2;
  grid-row: 1  / 2;

}

.imgch72 {
  grid-column: 1;
  grid-row: 1 / 2;
}

.imgch71 {
  grid-column: 2 / span 2;
  grid-row: 2 / 2;
}

#u41 {
  width: 250px;
  margin-left: 200px;
  margin-top: 60px;
}

#u42 {
  width: 150px;
}

.container9{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 150px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 10px;
  text-align: center;
}

.texte8 {
  grid-column: 1 / span 3;
  grid-row:auto;
}

.container10{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 250px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 10px;
  text-align: center;
}
.texte9 {
  grid-column: 2;
  grid-row:auto;
  margin-top: 50px;
}

.imgch91 {
  grid-column: 1;
  grid-row:auto;
  margin-top: -60px;
}

.imgch92 {
  grid-column: 3;
  grid-row:auto;
  margin-top: -60px;
}

#u51 {
  width: 200px;
  margin-right: 20px;
}

#u52 {
  width: 220px;
  margin-left: 20Px;
}

.container11{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 100px;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}

.texte10{
  grid-column: 1 / span 3;
  grid-row: auto;
}

.container12{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 350px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 10px;
  text-align: center;
}

.texte12 {
  grid-column: 2 / span 2;
  grid-row:1;
  color:rgb(115, 115, 115);
  margin-top: 30px;
}

.imgch111 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.imgch112 {
  grid-column: 3;
  grid-row:2;
}

#u61 {
  width: 250px;
}

#u62 {
  width: 100px;
}

.container13{
  position: relative;
  display: grid;
  grid-template-columns: 2;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 220px;
  margin-left:auto;
  margin-right:auto;
  margin-top: -50px;
  text-align: center;
}

#u7 {
  width: 300px;

}

.container14{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 300px;
  margin-left:auto;
  margin-right:auto;
  margin-top: -60px;
  text-align: center;
}

.texte13 {
  grid-column: 1 / span 3;
  grid-row:1;
  color: rgb(140, 140, 140)
}

.texte13 {
  grid-column: 2;
  grid-row: 1;
  color: 	rgb(128, 128, 128)
}

.imgch13 {
  grid-column: 1;
  grid-row: auto;
}


.container15 {
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  margin-left:auto;
  height: 350px;
  margin-right:auto;
  margin-top: 10px;
  text-align: center;
}

.texte14 {
  grid-column: 1 / span 3;
  grid-row: 1 / span 3;
  color:rgb(153, 153, 153);
}

.imgch14 {
  grid-column: 1 / span 3;
  grid-row: 1 / span 3;
  margin-top: 70px;
}

#u9 {
  width: 170px;
  margin-top: 100
}

.container16{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 150px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 10px;
  text-align: center;
}
.texte15 {
  grid-column: 1 / span 3;
  grid-row:auto;
  color: rgb(179, 179, 179);
}

.container17{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 300px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 10px;
  text-align: center;
}

.texte16 {
  grid-column: 1;
  grid-row: 1;
  color: 	rgb(204, 204, 204);
}

.imgch16 {
  grid-column: 2 / span 3;
  grid-row: 1;
}

#u10 {
  width: 300px;
}

.container18{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 300px;
  margin-left:auto;
  margin-right:auto;
  margin-top: -100px;
  text-align: center;
}

.texte17 {
  grid-column: 3;
  grid-row: 1;
  color: 	rgb(230, 230, 230);
}

.imgch17 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

#u11 {
  width: 400px;
}

.container19{
  position: relative;
  display: grid;
  grid-template-columns: 3;
  grid-gap: 5px;
  grid-auto-rows: 110px;
  width: 70%;
  height: 300px;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  margin-top: -100px;
}

.texte18 {
  grid-column: 1 / span 2;
  grid-row: 1 / 2;
  color: rgb(242, 242, 242);
  margin-top:30px;
}

.imgch181 {
  grid-column: 3;
  grid-row: 1 : span 2;
}

.imgch182 {
  grid-column: 2 / span 2;
  grid-row: 2;
}

#u121 {
width: 300px;
}

#u122 {
  width: 200px;
}

#u2png {
  width: 200px;
}




body{
background: linear-gradient(360deg, rgba(0,0,0,1) 13%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);
}