/******Das Alphazet********
*****Version 19/01/2023*******/


html {
padding: 0 0 0 0;
background-color: #000000;
  margin: 2px  0px  0px  0px;
}

body {
	margin: 0px 0px 0px 0px;
padding : 0 0 0 0; 
color: #000;
font-size: 1.1rem;
font-family: 'merriweather', serif;
}

h1   {	
font-size:1.2rem;
font-weight: normal;
}

h2, h4   {
	margin-top: 22px;
	margin-bottom: 60px;  
	font-size:1.4rem; 
	font-weight: normal;
	color: #000;
	}


h3   {
	margin-top: 22px;
	margin-bottom: 40px;  
	font-size:3rem; 
	font-weight: normal;
	color: #000000;
	}
	
	a   {
		text-decoration: none; 
		color: #2F4F4F;	
	}
	
	a:hover    {
	color: red;
	}


#divbody   {
	border-top: 0px; 
	width: 800px;
  margin-left: auto;
  margin-right: auto;
}
	
	
.banner {
  object-fit: contain;
 	overflow: hidden;
	background-color: transparent;
	border-radius: 0  0  6px 6px;
}	

/**********flex**********/


 .hyle {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 800px;
}

aside {
  width: 97.8%;
	border: 1px solid #DCDCDC;
  background-color: #DCDCDC;
   border-top-left-radius: 12px; 
   border-top-right-radius: 12px; 
   padding-top: 22px; 
   padding-bottom: 12px;
   padding-left: 1%;
   padding-right: 1%;
  margin-left: 0.1%;
  margin-right: 0.1%;
  margin-top: 40px;
  margin-bottom: 0px;
}


 .flex-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-item-center {
  flex: 100%;
  white-space: wrap; 
  min-width: 500px;
	border-left: 10px solid #DCDCDC;
	border-right: 10px solid #DCDCDC;
	border-top: 10px solid #DCDCDC;
	border-bottom: 10px solid #DCDCDC;
   border-bottom-left-radius: 12px; 
   border-bottom-right-radius: 12px; 
  margin-left: 0.1%;
  margin-right: 0.1%;
  margin-top: 0px;
  margin-bottom: 0px;  
  }

.legende {
  flex: 100%;
	border: 1px solid transparent;
  background-color: transparent;
   border-radius: 6px; 
   padding-left: 1%;
   padding-right: 1%;
  margin-left: 0.1%;
  margin-right: 0.1%;
  margin-top: 2px;
  margin-bottom: 2px;
  padding-top: 0;
}

figure   {
	margin: 0px;
	margin-left: -8px;
}

aside  .flex-container .flex-item  {
width: 91px;
flex-direction: row;
height: 40px;
margin: 2px;
background-color: #333333;
border: 1px solid whitesmoke;
border-radius: 20px;
font-size: 1.1rem;
font-weight: normal;
text-align: center;
line-height: 40px;
color: #fff;
}

aside  .flex-container .flex-item a  {
color: whitesmoke;
text-decoration: none;
padding: 10px 16px 10px 16px;
}


aside .flex-item a:hover  {
color: white;
text-decoration: none;
padding: 10px 16px 10px 16px;
}

aside .flex-item:hover  {
border: 1px solid whitesmoke;
background-color: #000000;
}

.flex-item-center  .flex-container .flex-item  {
flex: 100%;
flex-direction: column;
text-align: justify;
color: #000;
}

.legende   {
border: 2px solid transparent;
width: 85%;
	padding-left: 8%;
	padding-right: 7%;
}



.legende  {
flex: 100%;
flex-direction: column;
margin: 2px;
font-family: sans-serif;
line-height: 180%;
font-weight: normal;
text-align: left;
color: lightgreen;
}

.legende a  {
color: whitesmoke;
text-decoration: none;
}

.legende a:hover  {
color: red;
text-decoration: none;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: row;
  }
}


/*  *****************/
  @media (width>=576px) {
    #divbody {
        max-width: 540px
    }
}

@media (width>=768px) {
    #divbody {
        max-width: 720px
    }
}

@media (width>=992px) {
    #divbody {
        max-width: 960px
    }
}

@media (width>=1200px) {
    #divbody {
        max-width: 1140px
    }
}

@media (width>=1400px) {
    #divbody {
        max-width: 1280px
    }
}
  
/*  *****************/

.cell {
    flex: 1 1 auto; 
}
 
.register   {
	z-index: 11;
	width: 86%;
	padding-left: 7%;
	padding-right: 7%;
	padding-top: 42px;
   padding-bottom: 120px;
	background-color: #FFFFFC;
		}

.register:not(:target) {display: none;}
.register:target   {
text-align: left;
line-height: 180%;
	border-top: 0px solid #FFFFFC;
}


.fbx img  {
   border-bottom-radius: 4px; /* CSS3 */
   margin-top: 20px;}



.cell img  {
border: 1px solid black; 
border-radius: 6px;
   }



.cell img:hover  {
border: 1px solid red;
border-radius: 6px;
   }


.texxt   {
	z-index: 11;
	width: 86%;
	padding-left: 7%;
	padding-right: 7%;
	padding-top: 44px;
	min-height: 620px;
   padding-bottom: 120px;
	background-color: #FFFFFC;
   text-align: justify;
   -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
   line-height: 180%;
	}

.texxt:not(:target) {display: none;}
.texxt:target { display: block;}


#start  figure  figcaption {
	-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(-1, -1);
}


.abc img  {
	position: relative;
	float: left;
	height: 270px;
	width: 180px;
	border: 0px solid gray;
	margin-right: 16px;
	margin-bottom: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}

.flink   {
	padding-top: 22px;
	font-family: sans-serif;
	}
	
.right    {
	float: right;
	}
	
	.retour   {
		z-index: 12;
		position: fixed;
		bottom: 20px;
		right: 30px;
		width: 50px;
		height: 50px;
	}
	
	.retour img  {
		width: 50px;
		height: 50px;
	}