.container1{/*les representants du siege admin*/
  background-color: rgb(52, 52, 51);
  padding: 1px;
  justify-items: baseline;
  width: auto;
}
.container2{/*les representants du siege eco*/
  background-color: rgb(52, 52, 51);
  width: auto;
}
.col1{
  width: auto;
  height: 500px;
  background-color: aqua;
}
.card1{ /*card ya sieges admin mu index*/
  width: 290px;
  height: 450px;
  justify-content: center;
  background: #384755;
  padding: 5px;
  margin: 1px;
  box-sizing: border-box;
  border-style: solid;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 3px;
  }
.card1 h1{
    text-align: center;
    font-size: 1.1rem;
    clear: both;
    color: rgb(47, 248, 238);
    text-shadow: -1px 1px 1px rgb(6, 0, 6), -1px 1px 1px rgb(55, 2, 2);
  }
.card1 h3{
    text-align: center;
    font-size: 1rem;
    clear: both;
    color: rgb(214, 247, 129);
    text-shadow: -3px 3px 3px rgb(63, 29, 128), -1px 1px 1px rgb(1, 4, 40);
  }

  .front1 {
    background-image: url("freddy.jpg");
    background-size:cover;
    width: 266px;
    height: 365px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 6px 6px 6px 3px;
  }

  .card1 {
    position: relative;
  }
  .front1, .back {
    position: absolute;
   
    padding: 5px;
    margin:0px;
    backface-visibility: hidden;
    overflow: hidden;
    transition: transform .8s ease;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 6px 6px 6px 3px;
  }
  .card1:hover .front1 {
    transform: rotateY(-180deg);
    width: 100%;
    height: 100%;
    
  }
  .card1:hover .back {
    transform: rotateY(0deg);
    width: 100%;
    height: 100%;
    
  }
.back {
	background-image: linear-gradient(to right bottom, #b9eff4, #b9eff4);
  width: 100%;
  height: 100%;
}



.card2{ /*card ya siege poitique*/
  width: 285px;
  height: 450px;
  justify-content: center;
  background: #384755;
  padding: 5px;
  margin: 1px;
  box-sizing: border-box;
  border-style: solid;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 3px;
}
.card2 h1{
  text-align: center;
  font-size: 1.1rem;
  clear: both;
  color: rgb(47, 248, 238);
  text-shadow: -1px 1px 1px rgb(7, 6, 7), -1px 1px 1px rgb(55, 2, 2);
}
.card2 h3{
  text-align: center;
  font-size: 1rem;
  clear: both;
  color: rgb(214, 247, 129);
  text-shadow: -3px 3px 3px rgb(63, 29, 128), -1px 1px 1px rgb(47, 60, 238);
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 3px;
}
.front2 {
  background-image: url("kabedi.jpg");
  background-size:cover;
  width: 266px;
  height: 365px;
  margin: 0px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 3px;
}
.front2 h4{
  text-align: center;
  margin-top: 80px;
  font-size: 1.15rem;
	clear: both;
	color: rgba(241, 245, 245, 0.885);
	text-shadow: -3px 3px 3px rgb(3, 72, 57), -1px 1px 1px rgb(92, 2, 2);
}
.card2 {
	position: relative;
}
.front2, .back {
	position: absolute;
  width: 260px;
  padding: 5px;
  margin:1px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card2:hover .front2 {
	transform: rotateY(-180deg);
  width: 255px;
  height: 350px;
}
.card2:hover .back {
	transform: rotateY(0deg);
  width: 255px;
  height: 350px;
}

.card3{ /*card ya siege spirituel*/
  width: 280px;
  height: 450px;
  justify-content: center;
  background: #384755;
  padding: 5px;
  margin: 1px;
  box-sizing: border-box;
  border-style: solid;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 3px 3px;
  border-radius: 6px 6px 6px 3px;
}
.card3 h1{
  text-align: center;
  font-size: 1.1rem;
  clear: both;
  color: rgb(47, 248, 238);
  text-shadow: -1px 1px 1px rgb(7, 6, 7), -1px 1px 1px rgb(55, 2, 2);
}
.card3 h3{
  text-align: center;
  font-size: 1rem;
  clear: both;
  color: rgb(214, 247, 129);
  text-shadow: -3px 3px 3px rgb(63, 29, 128), -1px 1px 1px rgb(47, 60, 238);
}
.front3 {
  background-image: url("tshivuadi.jpg");
  background-size:cover;
  width: 266px;
  height: 365px;
  margin: 0px;
}
.front3 h4{
  text-align: center;
  margin-top: 80px;
  font-size: 1.15rem;
	clear: both;
	color: rgba(241, 245, 245, 0.885);
	text-shadow: -3px 3px 3px rgb(3, 72, 57), -1px 1px 1px rgb(92, 2, 2);
}
.card3 {
	position: relative;
}
.front3, .back {
	position: absolute;
  padding: 5px;
  margin:1px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card3:hover .front3 {
	transform: rotateY(-180deg);
  width: 255px;
  height: 350px;
}
.card3:hover .back {
	transform: rotateY(0deg);
  width: 255px;
  height: 350px;
}

.card4{ /*card ya siege spirituel*/
  width: 278px;
  height: 450px;
  justify-content: center;
  background: #384755;
  padding: 5px;
  margin: 1px;
  box-sizing: border-box;
  border-style: solid;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 3px;
}
.card4 h1{
  text-align: center;
  font-size: 1.1rem;
  clear: both;
  color: rgb(47, 248, 238);
  text-shadow: -1px 1px 1px rgb(7, 6, 7), -1px 1px 1px rgb(55, 2, 2);
}
.card4 h3{
  text-align: center;
  font-size: 1rem;
  clear: both;
  color: rgb(214, 247, 129);
  text-shadow: -3px 3px 3px rgb(63, 29, 128), -1px 1px 1px rgb(47, 60, 238);
}
.front4 {
  background-image: url("isidor.jpg");
  background-size:cover;
  width: 266px;
  height: 365px;
  margin: 0px;
}
.front4 h4{
  text-align: center;
  margin-top: 80px;
  font-size: 1.15rem;
	clear: both;
	color: rgba(241, 245, 245, 0.885);
	text-shadow: -3px 3px 3px rgb(3, 72, 57), -1px 1px 1px rgb(92, 2, 2);
}
.card4 {
	position: relative;
}
.front4, .back {
	position: absolute;
  padding: 5px;
  margin:1px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card4:hover .front4 {
	transform: rotateY(-180deg);
  width: 255px;
  height: 350px;
}
.card4:hover .back {
	transform: rotateY(0deg);
  width: 255px;
  height: 350px;
}




.front5 {
  background-image: url("kalula.jpg");
  background-size:cover;
  width: 265px;
  height: 365px;
  margin: 0px;
}
.front5 h4{
  text-align: center;
  margin-top: 80px;
  font-size: 1.15rem;
	clear: both;
	color: rgba(9, 242, 242, 0.885);
	text-shadow: -3px 3px 3px rgb(3, 72, 57), -1px 1px 1px rgb(92, 2, 2);
}

.front5, .back {
	position: absolute;
  padding: 5px;
  margin:1px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .5s ease;
}


/*ici commence la page du siege administratif*/
.card6{ /*card ya Haut-Katanga*/
  width: 295px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin:5px;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  margin-left: auto;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
  border-style: outset;
}
.card6 h1{
  font-size: 1.2rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card6 h3{
  text-align: center;
  font-size: 1rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front6 {
  background-image: url("Dandi.jpg");
  background-size:cover;
  width: 282px;
  height: 394px;
  margin: 0px;
}
.back {
	background-image: linear-gradient(to right bottom, #b9eff4, #b9eff4);
}

.card6 {
	position: relative;
}
.front6, .back {
	position: absolute;
  padding: 8px;
  margin:1px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card6:hover .front6 {
	transform: rotateY(-180deg);
}
.card6:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 390px; /*le pince pour regler le back of the card*/
  width: 277px;
}
.back {
	transform: rotateY(180deg);
}

.card7{ /*card ya Haut-Lomami*/
  width: 295px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin:5px;
   box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  margin-left: auto;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
  border-style: outset;
}
.card7 h1{
  font-size: 1.2rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card7 h3{
  text-align: center;
  font-size: 1rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front7 {
  background-image: url("dove5.jpg");
  background-size:cover;
  width: 285px;
  height: 394px;
  margin: 0px;
}
.back {
	background-image: linear-gradient(to right bottom, #460225, #2b0101);
  height: 390px; /*le pince pour regler le back of the card*/
  width: 285px;
}

.card7 {
	position: relative;
}
.front7, .back {
	position: absolute;
  padding: 8px;
  margin:1px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card7:hover .front6 {
	transform: rotateY(-180deg);
}
.card7:hover .back {
	transform: rotateY(0deg);
}


.card8{ /*card ya Haut-Katanga*/
  width: 295px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin:5px;
    box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  margin-left: auto;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
  border-style: outset;
}
.card8 h1{
  font-size: 1.2rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card8 h3{
  text-align: center;
  font-size: 1.2rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front8 {/*card ya province ya lualaba*/
  background-image: url("dove5.jpg");
  background-size:cover;
  width: 282px;
  height: 394px;
  margin: 0px;
}
.back {
	background-image: linear-gradient(to right bottom, #b9eff4, #b9eff4);
}

.card8 {
	position: relative;
}
.front8, .back {
	position: absolute;
  padding: 8px;
  margin:1px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card8:hover .front6 {
	transform: rotateY(-180deg);
}
.card8:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 390px; /*le pince pour regler le back of the card*/
  width: 277px;
}
.back {
	transform: rotateY(180deg);
}

.card9{ /*card ya tanganika*/
  width: 295px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin:5px;
    box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  margin-left: auto;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
  border-style: outset;
}
.card9 h1{
  font-size: 1.2rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card9 h3{
  text-align: center;
  font-size: 1.2rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front9 {
  background-image: url("Justinamuri.jpg");
  background-size:cover;
  width: 282px;
  height: 394px;
  margin: 0px;
}
.back {
	background-image: linear-gradient(to right bottom, #b9eff4, #b9eff4);
}

.card9 {
	position: relative;
}
.front9, .back {
	position: absolute;
  padding: 8px;
  margin:1px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card9:hover .front6 {
	transform: rotateY(-180deg);
}
.card9:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 390px; /*le pince pour regler le back of the card*/
  width: 277px;
}
.back {
	transform: rotateY(180deg);
}


.card10{ /*card ya sud-kivu*/
  width: 295px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-left: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
  border-style: outset;
}
.card10 h1{
  font-size: 1.2rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card10 h3{
  text-align: center;
  font-size: 1.2rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front10 {
  background-image: url("Gratien.jpg");
  background-size:cover;
  width: 282px;
  height: 394px;
  margin: 0px;
}
.back {
	background-image: linear-gradient(to right bottom, #b9eff4, #b9eff4);
}

.card10 {
	position: relative;
}
.front10, .back {
	position: absolute;
  padding: 8px;
  margin:1px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card10:hover .front6 {
	transform: rotateY(-180deg);
}
.card10:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 390px; /*le pince pour regler le back of the card*/
  width: 277px;
}
.back {
	transform: rotateY(180deg);
}


.card11{ /*card ya maniema*/
  width: 295px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-right: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  margin-left: auto;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
  border-style: outset;
}
.card11 h1{
  font-size: 1.2rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card11 h3{
  text-align: center;
  font-size: 1.2rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front11 {
  background-image: url("serge.jpg");
  background-size:cover;
  width: 282px;
  height: 394px;
  margin: 0px;
}
.back {
	background-image: linear-gradient(to right bottom, #b9eff4, #b9eff4);
}

.card11 {
	position: relative;
}
.front11, .back {
	position: absolute;
  padding: 8px;
  margin:1px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card11:hover .front6 {
	transform: rotateY(-180deg);
}
.card11:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 390px; /*le pince pour regler le back of the card*/
  width: 277px;
}
.back {
	transform: rotateY(180deg);
}

.card12{ /*card ya kasai occidental*/
  width: 300px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-left: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
  border-style: outset;
}
.card12 h1{
  font-size: 1rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card12 h3{
  text-align: center;
  font-size: 0.8rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front12 {
  background-image: url("desire.jpg");
  background-size:cover;
  width: 275px;
  height: 394px;
  margin: 5px;
   -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.card12 {
	position: relative;
}
.front12, .back {
	position: absolute;
  padding: 8px;
  margin:5px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card12:hover .front6 {
	transform: rotateY(-180deg);
}
.card12:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 395px; /*le pince pour regler le back of the card*/
  width: 295px;
}
.back {
	transform: rotateY(180deg);
}

.card13{ /*card ya kasai occidental*/
  width: 300px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-left: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
}
.card13 h1{
  font-size: 1rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card13 h3{
  text-align: center;
  font-size: 0.8rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front13 {
  background-image: url("BenjaminM.jpg");
  background-size:cover;
  width: 275px;
  height: 394px;
  margin: 5px;
   -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.card13 {
	position: relative;
}
.front13, .back {
	position: absolute;
  padding: 8px;
  margin:5px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card13:hover .front6 {
	transform: rotateY(-180deg);
}
.card13:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 395px; /*le pince pour regler le back of the card*/
  width: 295px;
}
.back {
	transform: rotateY(180deg);
}

.card14{ /*card ya kasai occidental*/
  width: 300px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-left: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
  border-style: outset;
}
.card14 h1{
  font-size: 1rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card14 h3{
  text-align: center;
  font-size: 0.8rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front14 {
  background-image: url("dove5.jpg");
  background-size:cover;
  width: 275px;
  height: 394px;
  margin: 5px;
   -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.card14 {
	position: relative;
}
.front14, .back {
	position: absolute;
  padding: 8px;
  margin:5px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card14:hover .front6 {
	transform: rotateY(-180deg);
}
.card14:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 395px; /*le pince pour regler le back of the card*/
  width: 295px;
}
.back {
	transform: rotateY(180deg);
}


.card15{ /*card ya kasai occidental*/
  width: 300px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-left: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
  border-style: outset;
}
.card15 h1{
  font-size: 1rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card15 h3{
  text-align: center;
  font-size: 0.8rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front15 {
  background-image: url("dove5.jpg");
  background-size:cover;
  width: 275px;
  height: 394px;
  margin: 5px;
   -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.card15 {
	position: relative;
}
.front15, .back {
	position: absolute;
  padding: 8px;
  margin:5px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card15:hover .front6 {
	transform: rotateY(-180deg);
}
.card15:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 395px; /*le pince pour regler le back of the card*/
  width: 295px;
}
.back {
	transform: rotateY(180deg);
}


.card16{ /*card ya kasai occidental*/
  width: 300px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-left: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
}
.card16 h1{
  font-size: 1rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card16 h3{
  text-align: center;
  font-size: 0.8rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front16 {
  background-image: url("isidor.jpg");
  background-size:cover;
  width: 275px;
  height: 394px;
  margin: 5px;
   -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.card16 {
	position: relative;
}
.front16, .back {
	position: absolute;
  padding: 8px;
  margin:5px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card16:hover .front6 {
	transform: rotateY(-180deg);
}
.card16:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 395px; /*le pince pour regler le back of the card*/
  width: 295px;
}
.back {
	transform: rotateY(180deg);
}


.card17{ /*card ya kasai occidental*/
  width: 300px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-left: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
}
.card17 h1{
  font-size: 1rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card17 h3{
  text-align: center;
  font-size: 0.8rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front17 {
  background-image: url("dove5.jpg");
  background-size:cover;
  width: 275px;
  height: 394px;
  margin: 5px;
   -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.card17 {
	position: relative;
}
.front17, .back {
	position: absolute;
  padding: 8px;
  margin:5px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card17:hover .front6 {
	transform: rotateY(-180deg);
}
.card17:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 395px; /*le pince pour regler le back of the card*/
  width: 295px;
}
.back {
	transform: rotateY(180deg);
}


.card18{ /*card ya kasai oriental*/
  width: 300px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-right: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  margin-left: auto;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
}
.card18 h1{
  font-size: 1rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card18 h3{
  text-align: center;
  font-size: 0.8rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.card18 h6{
  text-align: center;
  font-size: 0.8rem;
  font-weight: lighter;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front18 {
  background-image: url("EmmanuelM.jpg");
  background-size:cover;
  width: 282px;
  height: 394px;
  margin: 0px;
   -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
}
.back {
	background-image: linear-gradient(to right bottom, #b9eff4, #b9eff4);
}

.card18 {
	position: relative;
}
.front18, .back {
	position: absolute;
  padding: 8px;
  margin:1px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card18:hover .front6 {
	transform: rotateY(-180deg);
}
.card18:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 390px; /*le pince pour regler le back of the card*/
  width: 277px;
}
.back {
	transform: rotateY(180deg);
}

.card19{ /*card ya Grande orientale*/
  width: 300px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-left: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
}
.card19 h1{
  font-size: 1rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card19 h3{
  text-align: center;
  font-size: 0.8rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front19 {
  background-image: url("bwanamuzuri1.jpg");
  background-size:cover;
  width: 275px;
  height: 394px;
  margin: 5px;
   -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.card19 {
	position: relative;
}
.front19, .back {
	position: absolute;
  padding: 8px;
  margin:5px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card19:hover .front6 {
	transform: rotateY(-180deg);
}
.card19:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 395px; /*le pince pour regler le back of the card*/
  width: 295px;
}
.back {
	transform: rotateY(180deg);
}


.card20{ /*card ya kasai occidental*/
  width: 300px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-left: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
}
.card20 h1{
  font-size: 1rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card20 h3{
  text-align: center;
  font-size: 0.8rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front20 {
  background-image: url("dove5.jpg");
  background-size:cover;
  width: 275px;
  height: 394px;
  margin: 5px;
   -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.card20 {
	position: relative;
}
.front20, .back {
	position: absolute;
  padding: 8px;
  margin:5px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card20:hover .front6 {
	transform: rotateY(-180deg);
}
.card20:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 395px; /*le pince pour regler le back of the card*/
  width: 295px;
}
.back {
	transform: rotateY(180deg);
}


.card21{ /*card ya kasai occidental*/
  width: 300px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-left: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
}
.card21 h1{
  font-size: 1rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card21 h3{
  text-align: center;
  font-size: 0.8rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front21 {
  background-image: url("dove5.jpg");
  background-size:cover;
  width: 275px;
  height: 394px;
  margin: 5px;
   -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.card21 {
	position: relative;
}
.front16, .back {
	position: absolute;
  padding: 8px;
  margin:5px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card21:hover .front6 {
	transform: rotateY(-180deg);
}
.card16:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 395px; /*le pince pour regler le back of the card*/
  width: 295px;
}
.back {
	transform: rotateY(180deg);
}


.card22{ /*card ya kasai occidental*/
  width: 300px;
  height: 460px;
  background: #51616f;
  padding: 0px;
  box-sizing: border-box;
  margin-left: auto;
  box-shadow: 2px 3px 9px -4px rgb(10, 10, 10);
  margin-top: 5px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
}
.card22 h1{
  font-size: 1rem;
  margin: 2px;
  text-align: center;
	clear: both;
	color: rgb(100, 242, 218);
	text-shadow: -1px 1px 1px rgb(6, 6, 6), -1px 1px 1px red;
}
.card22 h3{
  text-align: center;
  font-size: 0.8rem;
	clear: both;
	color: rgb(236, 240, 239);
	text-shadow: -2px 2px 2px rgb(11, 11, 11), -1px 1px 1px red;
}
.front22 {
  background-image: url("dove5.jpg");
  background-size:cover;
  width: 275px;
  height: 394px;
  margin: 5px;
   -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.card22 {
	position: relative;
}
.front22, .back {
	position: absolute;
  padding: 8px;
  margin:5px;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.card22:hover .front6 {
	transform: rotateY(-180deg);
}
.card22:hover .back {
	transform: rotateY(0deg);
}
.back {
	background-image: linear-gradient(to right bottom, #280202, #1f0101);
  height: 395px; /*le pince pour regler le back of the card*/
  width: 295px;
}
.back {
	transform: rotateY(180deg);
}

/*a partir ya hapa inahusu container na ma card ya ba patriarche*/

*{
	box-sizing: border-box;
}

html {
	font-size: 100%;
}

main {
	max-width: 100%;
	margin: 0 auto; 
	font-size: 1rem;
	line-height: 1.3;
	background-color: #f5f5f5;
  align-items: center;
}
.container4 {
	max-width: 1000px;
	margin: 0 auto; 
	font-size: 1rem;
	line-height: 1.3;
	background-color: #f5f5f5;
  align-items: center;
}
.text{
  width: auto;
  text-align: center;
  position: relative;
}
.center {
	text-align: center;
  color: #089bc0;  
  font-size: 1.1rem;
  margin-bottom: 0%;
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bolder;
  text-shadow: 1px 1px 1px rgb(3, 0, 0);
}

/*Flexbox Cards*/
.cards {
	display: flex;
	flex-flow: row wrap;
}

.cardss {
	display: flex;
	flex-flow: row wrap;
  justify-items: center;
  background-color: #034c65;
}

.card1-body {/* card ya pa repro ya admini*/
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 100%;
	padding: 10px;
	background-color: #F8FFF8;
	border-radius: 3px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.card1-item {
	display: flex;
	width: 100%;
	padding: 0.5em;
}

/* ===== == = === 37.5em (600px) === = == ===== */
@media all and (min-width: 37.5em) {
	.card1-item {
			width: calc(100% / 12 * 6 );
	}
}
/* ===== == = === 56.25em (900px) === = == ===== */
@media all and (min-width: 56.25em) {
	.card1-item {
			width: calc(100% / 12 * 4 );
	}
}

.card1-body {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 100%;
	padding: 10px;
	background-color: #F8FFF8;
	border-radius: 3px;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.card1-body p {
	flex: 1 0 auto;
	margin: 0;
}

.card1-img {
	width: 100%;
	border-radius: 3px 3px 0 0;
}

.card1-img:hover {
	opacity: 0.8;
}

.card1-footer {
	margin-bottom: 1em;
}

.btn {
	display: inline-block;
	margin: 0.5rem;
	padding: .70rem 1.1rem;
	font-size: 0.5px;
	text-shadow: 0 1px 0 rgba(77,77,77,.5);
	background: #1E90FF;
	border-radius: .35rem;
	box-shadow: 0 0 1px 1px rgba(77,77,77,.5);
	color: floralwhite;
	cursor: pointer;
	transition: .5s;
}
.btn1 {/*hii ni ya ba repro ya siege eco*/
	display: inline-block;
	margin: 0.5rem;
	padding: .70rem 1.1rem;
	font-size: 0.5px;
	text-shadow: 0 1px 0 rgba(77,77,77,.5);
	background: #eaeef1;
	border-radius: .35rem;
	box-shadow: 0 0 1px 1px rgba(77,77,77,.5);
	color: floralwhite;
	cursor: pointer;
	transition: .5s;
  border: 1px solid;
  border-color: #1dccf7;
}
.btn:hover {
	background: #034c65;
	color: #333333;
}

/*a partir ya hapa inahusu container ya ma card ya repro provinciaux de l'eco*/

a {
    -webkit-transition: .25s all;
    transition: .25s all;
}
.card2 {
    width: 320px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: .25s box-shadow;
    transition: .25s box-shadow;
}

.card-img-top {/*photo ya card ya ba repro economique*/
  max-width: 100%;
  height: auto;
	border-top-right-radius: calc(.75rem - 3px);
  border-top-left-radius: calc(.75rem - 3px);
}
.card-block {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
}
.col-lg-3 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.col-sm-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-12 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
	margin-top: 20px;
}
.col-lg-3 {
    padding-right: 15px;
    padding-left: 15px;
}
.row {
   display:flex;
   flex-direction:row;
}


.btn {
  display: inline-block;
	font-family: 'Nunito';font-size: 22px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


.container {
  height: auto;
  width: 100%;
  position: relative;
  padding-right: 10px;
  padding-left: 10px;
  background-color: #040002;
}
.card-block {
    padding-right: 5px;
    padding-left: 5px;
}




@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    width: 100%;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: #b8dae3;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.h1-text{
    font-size: 1.3rem;
    margin: 40px 0;
    color: #2c2c2c;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h1-text i{
    background-color: #509bfc;
    color: #fff;
    width: 40px;
    height: 40px;
    box-shadow: 2px 5px 30px rgba(80, 123, 252, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    margin: 0 20px;
}

 .container5{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
} 


.box{
  position: relative;
  width: 500px;
  background-color: #362c2c;
  box-shadow: 2px 3px 30px rgba(238, 2, 2, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px;
  position: relative;
  border-radius: 6px;
  box-sizing: border-box;
  border-style: solid 9px;
}


.top-bar{
    width: 50%;
    height: 4px;
    background: #f46ff0;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0px 0px 10px 10px;
}

.content img{
    width: 60%;
    height: 60%;
    border-radius:6px;
    align-items: center;
    object-fit: cover;
    object-position: top;
    
}
.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}