@font-face {
  font-family: 'Ogarudh';
  src: url("../fonts/Ogarudh.ttf") format('truetype'),
       url("../fonts/Ogarudh.eot?#iefix") format('embedded-opentype'),
       url("../fonts/Ogarudh.woff") format('woff'),
       url("../fonts/Ogarudh.woff2") format('woff2'),
       url("../fonts/Ogarudh.svg#OgarudhBold") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Damalior';
  src: url("../fonts/Damalior.ttf") format('truetype'),
       url("../fonts/Damalior.eot?#iefix") format('embedded-opentype'),
       url("../fonts/Damalior.woff") format('woff'),
       url("../fonts/Damalior.woff2") format('woff2'),
       url("../fonts/Damalior.svg#DamaliorBold") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Simerii';
  src: url("../fonts/Simerii.ttf") format('truetype'),
       url("../fonts/Simerii.eot?#iefix") format('embedded-opentype'),
       url("../fonts/Simerii.woff") format('woff'),
       url("../fonts/Simerii.woff2") format('woff2'),
       url("../fonts/Simerii.svg#SimeriiBold") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nirverius';
  src: url("../fonts/Nirverius.ttf") format('truetype'),
       url("../fonts/Nirverius.eot?#iefix") format('embedded-opentype'),
       url("../fonts/Nirverius.woff") format('woff'),
       url("../fonts/Nirverius.woff2") format('woff2'),
       url("../fonts/Nirverius.svg#NirveriusBold") format('svg');
  font-weight: normal;
  font-style: normal;
}

.menu-img {
    width: 283px;
    height: 38px;
}

.d1, .d2, section, body {
background-color : #000000;
}

a, a:visited, a:hover, a:active, h1, h2, h3, h4, h5, body, td.trad2 h4, td.title, td.races, td.races h2, td.races h3, td.races h4, td.second, td.second h2, td.second h3, td.second h4, td.perso, td.perso h3, td.perso h4, td.livredor, td.livredor h3, td.sketch, td.dicos, td.dicos h3, td.dicos h4, td.ogarudh, td.ogarudh h3, td.ogarudh h5, td.ogaruth, td.ogaruth h3, td.ogaruth h5, td.damalior, td.damalior h5, td.simerii, td.simerii h5, td.niverius, td.nirverius h5, th.trad h3, th.trad h4, th.trad h5, .persos, .result, .livre.livre, #credits, td.perso a img {
font-family : Verdana, Arial, Helvetica, sans-serif;
}

td.ogarudh h5, td.ogaruth h5  {
font-family : Ogarudh, Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}

td.damalior h5 {
font-family : Damalior, Verdana, Arial, Helvetica, sans-serif;
}

td.simerii h5 {
font-family : Simerii, Verdana, Arial, Helvetica, sans-serif;
}

td.nirverius h5 {
font-family : Nirverius, Verdana, Arial, Helvetica, sans-serif;
}

td.perso a img{
display:inline-block;
}

a, a:visited, a:hover, a:active {
text-align: center;
font-weight: bold;
}

img.mosaique1{
margin-top: 1em;
text-align:center;
}

img.mosaique2{
margin-bottom: 1em;
text-align:center;
}

h1, h2, h3, h4, h5, body {
margin-left : 1%;
margin-right : 1%;
}

h1, h2, h3, h4, body  {
text-align : justify;
}

h5{
text-align : center;
}

/*Titre haut de page + Page accueil*/
h1, .centre, .validator, .compteur, .contenant p {
font-size : 32px;
line-height : 32px;
}

h2, td.title h2, td.races h2, td.second h2, td.perso h2, td.livredor h2, td.sketch h2, td.dicos h2, td.ogarudh h2, td.ogaruth h2, td.damalior h2, td.simerii h2, td.niverius h2, th.trad h2, {
font-size : 22px;
line-height : 22px;
color : #FFFFFF;
}

h3, td.title h3, td.races h3, td.second h3, td.perso h3, td.livredor h3, td.sketch h3, td.dicos h3, td.ogarudh h3, td.ogaruth h3, td.damalior h3, td.simerii h3, td.niverius h3, th.trad h3, {
font-size : 16px;
line-height : 16px;
color : #000000;
}

a, a:visited, a:hover, a:active, h4, h5, td.races h4, td.second h4, td.perso h4, td.dicos h4, td.ogarudh h5, td.ogaruth h5, td.damalior h5, td.simerii h5, td.nirverius h5, td.perso a img {
font-size : 14px;
line-height : 14px;
}

a, a:visited, a:hover, a:active, h4, td.races h4, td.second h4, td.perso h4, td.dicos h4, td.ogarudh h5, td.ogaruth h5, td.damalior h5, td.simerii h5, td.nirverius h5, td.perso a img {
color : #FFFFFF;
}

h1, h5 {
color : #8B4513;
font-weight: bold;
}

.contenant p {
margin : 0 0 0 0;
}

body, #menu, #menu ul, #menu li, #menu li a, #menu li a:hover, #manu2, #manu2 ul, #manu2 li, #manu2 li a, #manu2 li a:hover, #manu2, #manu2, #manu2 ul, #manu2 li, #sContent,  section {
padding : 0;
margin : 0;
}

.contenant, .validator {
right : 0%;
}

.contenant, .compteur {
left : 0%;
}

.centre, .validator, .compteur, .contenant a img, .conteneur a img, td.perso, td.races, td.second, td.second h2, td.second h3, td.races h3, td.perso h3, td.perso h4, td.trad h3, td.trad h4, td.trad h5, td.trad2 h3, td.trad2 h4, td.trad2 h5, td.perso h3, td.livredor h3, td.perso h4, td.sketch, #credits, .result, td.dicos, td.dicos h4, td.dicos h3, td.ogaruth h3, td.ogaruth h5 , td.ogarudh h5, td.damalior h5, td.simerii h5, td.nirverius h5, .livre, td.submenu, td.submanu2, #menu, #menu ul, #menu li, #menu li a, #menu li a:hover, #menu ul li ul, #menu ul li:hover ul, #menu li:hover ul li, #menu li ul, #manu2, #manu2 ul, #manu2 li, #manu2 li a, #manu2 li a:hover, #manu2, #manu2 ul li ul, #manu2 ul li:hover ul, #manu2 li:hover ul li, #manu2 li ul, #manu2, #manu2 ul, #manu2 li {
text-align : center;
}

.centre, .validator, .compteur, td.title, td.races, td.second, td.perso, td.livredor, td.sketch, #credits, td.ogarudh h5, td.damalior h5, td.simerii h5, td.nirverius h5, td.ogaruth h3, td.ogaruth h5  {
font-weight : bold;
}

.contenant a img, .conteneur a img, td.perso a img {
border : 0;
}

.centre {
background-image : url(img/gen_background3.jpg);
height : 91.4%;
}

.tete, .pied {
height : 4.3%;
}
	
.tete {
background-image : url(img/lisereta.jpg);
}

.pied {
background-image : url(img/liseretb.jpg);
}

.validator, .compteur, .conteneur, .contenant, #menu li ul, #manu2 li ul, #sContent {
position : absolute;
}

.validator, .compteur {
width : 20%;
height : 20%;
top : 80%;
}

.conteneur, .contenant {
height : 100%;
}

.conteneur, .contenant, .livre {
width : 100%;
}

.conteneur p {
margin : 10px 10px 10px 10px;
}

.conteneur a img, .header, .frame, .footer, menu, #menu ul, #menu li, #menu li a, #menu li a:hover, #menu ul li:hover ul, #manu2, #manu2 ul, #manu2 li, #manu2 li a, #manu2 li a:hover, #manu2, #manu2 ul li:hover ul, #manu2 li:hover ul li, #manu2, #manu2 ul, #manu2 li, thead.trad, tbody.trad, tfoot.trad {
display : block;
}

.header, .frame, .footer,  td.races, td.perso, #menu ul#menu li#menu li a:hover, #manu2 li a:hover, #manu2, #manu2 ul, #manu2 li {
width : auto;
}

table.equipe, table.races, table.trad {
width : 80%;
}

table.equipe, table.races, table.dico, table.dicos, table.trad, section {
margin : auto;
}

td.second, td.sketch, .result, td.trad h3, td.ogarudh h3, td.trad h4, td.ogarudh h4, td.ogaruth h4, td.trad h5 {
width: 200px;
} 

td.trad2 h4 {
width: 1250px;
} 

tbody.trad {
overflow-y : scroll;
height : 250px;
}

.header, .frame {
margin : 0 auto;
}

.header, #menu, #menu ul, #menu li {
background-repeat : no-repeat;
}

.header {
height : 18.5%;
background-image : url(img/titre.jpg);
background-size : 100% 170px;
}

.frame, #credits,.persos, .dico, .livre {
background-image : url(img/gen_background2.jpg);
}

.quizz {
background-image : url(img/gen_background2.jpg);
background-repeat: repeat;
}

.frame {
height: 73.3%;
min-height : 600px;
overflow : auto;
}

.footer {
background-image : url(img/liseret.jpg);
height : 4%;
}

.frame p {
bottom : 0;
}

table.equipe, .contenant a img, .centre, td.livredor, .persos, table.trad, td.trad, td.trad2, td.races, td.second, td.perso, td.dicos, td.ogarudh, td.ogaruth, td.damalior, td.simerii, td.nirverius {
vertical-align : top;
}

td.title {
color : #CC9900;
}

td.races, td.second, td.perso, td.livredor, td.dicos, td.ogarudh, td.ogaruth, td.damalior, td.simerii, td.nirverius, th.trad, td.trad, th.trad2, td.trad2 {
border-style : dashed;
border-width : 1px;
border-color : #000000;
}

td.livredor {
width : 600px;
}

.map {
width : 240px;
height : 168px;
}

.quizz {
text-align : right;
}

td.submenu {
width : 50%;
}

td.submanu2 {
width : 33%;
}

#menu, #menu ul, #menu li, #menu li a, #menu li a:hover, #menu ul li ul, #menu ul li:hover ul, #menu li:hover ul li, #menu li ul, #manu2, #manu2 ul, #manu2 li, #manu2 li a, #manu2 li a:hover, #manu2, #manu2 ul li ul, #manu2 ul li:hover ul, #manu2 li:hover ul li, #manu2 li ul, #manu2, #manu2 ul, #manu2 li {
list-style-type : none;
}

#menu, #manu2 {
height : 4.2%;
background-image : url(img/back.jpg);
background-size : 100% 38px;
}

#menu ul, #manu2 ul {
background-image : url(img/back2.jpg);
}

#menu ul {
background-size : 100% 76px;
}

#manu2 ul {
background-size : 100% 90px;
}

#menu li, #manu2 li {
height : auto;
float : left;
background-size : 100% 100%;
}

#menu li img, #manu2 li img {
opacity : 0.5;
}

#menu li img:hover, #manu2 li img:hover {
  opacity: 1;
}

#menu li a, manu2 li a {
width : 283px;
color : white;
text-decoration : none;
}

#menu li a:hover, #manu2 li a:hover  {
color : #FFD700;
}

#menu ul li ul, #manu2 ul li ul {
display : none;
}

#menu li:hover ul li {
float : none;
}

.conteneur1,.conteneur2, #slideshow {
overflow : hidden;
}

.conteneur1,.conteneur2 {
max-width : 960px;
margin : 50px auto;	
}

.conteneur1 {
box-shadow : 0 15px 10px -5px #777;
}

.d1, .d2, section {
background-image : url(img/gen_background2.jpg);
background-size : contain;
}

.d1 {
background-image : url(img/cycle.jpg);
width : 3840px;
height : 720px;
animation : defilement2 120s linear infinite;
/*animation-name : defilement1;
animation-duration : 120s;
animation-timing-function : linear;
animation-iteration-count : infinite;*/
}

@keyframes defilement1 {
0% {
transform : translate(0,0);
}
100% {
transform : translate(-2880px,0);
}
}

.conteneur2 {
box-shadow : 0 0 10px #777;
}

.d2 {
width : 400%;
height : 0;
padding-top : 75%;
animation : defilement2 12s linear infinite;
}

@keyframes defilement2 {
0% {
transform : translate(0,0);
}
100% {
transform : translate(-15%,0);
}
}

.d1:hover, .d2:hover {
animation-play-state : paused;
}

@keyframes AutoSlide {
0%, 3.36%, 100% {
transform : translate(0,0);
}
5.04%, 8.40% {
transform : translate(-5%,0);
}
10.08%, 13.45% {
transform : translate(-10%,0);
}
15.13%, 18.49% {
transform : translate(-15%,0);
}
20.17%, 23.53% {
transform : translate(-20%,0);
}
25.21%, 28.57% {
transform : translate(-25%,0);
}
30.25%, 33.61% {
transform : translate(-30%,0);
}
35.29%, 38.66% {
transform : translate(-35%,0);
}
40.34%, 43.70% {
transform : translate(-40%,0);
}
45.38%, 48.74% {
transform : translate(-45%,0);
}
50.42%, 53.78% {
transform : translate(-50%,0);
}
55.46%, 58.82% {
transform : translate(-55%,0);
}
60.50%, 63.87% {
transform : translate(-60%,0);
}
65.55%, 68.91% {
transform : translate(-65%,0);
}
70.59%, 73.95% {
transform : translate(-70%,0);
}
75.63%, 78.99% {
transform : translate(-75%,0);
}
80.67%, 84.03% {
transform : translate(-80%,0);
}
85.71%, 89.08% {
transform : translate(-85%,0);
}
90.76%, 94.12% {
transform : translate(-90%,0);
}
95.80%, 99.16% {
transform : translate(-95%,0);
}
}

#slideshow {
position : relative;
width : 800px;
height : 600px;
margin : 20px auto;
}

#sContent li {
display : inline;
}

#sContent {
top : 0;
left : 0;
width : 16000px;
animation-name : AutoSlide;
animation-duration : 120s;
animation-iteration-count : infinite;
animation-timing-function : ease-in-out;
}

section {
margin-top : 10px;
padding : 10px;
color : #FFFFFF;
font-weight: bold;
border : #8B4513 solid 5px;
border-radius : 20px;
}

#reloadCaptchaButton {
cursor: pointer;
width: 50px;  /* Ajustez la taille selon vos besoins */
height: 50px; /* Ajustez la taille selon vos besoins */
vertical-align: middle; /* Aligne l'image au milieu verticalement */
margin-left: 10px; /* Espace entre le captcha et le bouton de reload */
        }

#captchaImage {
vertical-align: middle; /* Aligne l'image au milieu verticalement */
}

.captcha-container {
display: inline-flex; /* Utilisation d'inline-flex pour aligner horizontalement */
align-items: center; /* Alignement vertical des éléments */
}