#my_body{
margin: 0;
padding: 0;
overflow: auto;
min-width: 450px;
font-family: Bookman, Georgia, Arial, Helvetica, Times;
}
#top{
position: relative;
top:0;
left: 0;
width: 100%;
height: 100px;
text-align: left;
border-bottom: 1px solid #5dbee9;
background-image: url(./images/black.png);
background-attachment:fixed;
background-repeat: repeat;
text-align: center;
}
#top img{
width: auto;
height: 100%;
display: inline-block;
vertical-align: middle;
margin: 0 20px;
}
#page1{
position: relative;
width: 100%;
height: auto;
text-align: justify;
background-image: url(./images/fond.png);
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-background-size: cover;
text-align: center;
top: -20px;
}
#page2{
position: relative;
width: calc(100% - 20px);
height: auto;
padding: 10px;
background: white;
text-align: center;
color: #5dbee9;
border-top: 1px solid #5dbee9;
top: -20px;
}
#pied{
position: relative;
height: 50px;
background-color: #5dbee9;
width: 100%;
overflow: hidden;
vertical-align: bottom;
background-image: url(./images/black.png);
background-attachment:fixed;
background-repeat: repeat;
color: white;
}
#menu a { 
	display:block; 
	color: white; 
	text-decoration:none;
}
#menu > li,
#menu > li li {
	position: relative;
	display:inline-block;
	width: 150px;
	padding: 6px 15px;
	background-color: #99dbf8;
	color: white;
	cursor: pointer;
}
#menu > li li { background: #99dbf8; }
#menu > li li a { color: white; }
#menu > li li:hover { background:#5dbee9; }
#menu > li:first-child {
	border-right: 1px solid #5dbee9;
	border-radius: 8px 0 0 8px;
}
#menu > li + li {
	border-left: 1px solid #5dbee9;
	border-right: 1px solid #5dbee9;
}
#menu > li:last-child {
	border-right: 0;
	border-left: 1px solid #5dbee9;
	border-radius: 0 8px 8px 0 ;
}
#menu > li:only-child{
	border-right: 1px solid #5dbee9;
	border-left: 1px solid #5dbee9;
	border-radius: 8px;
}
#menu > li:only-child:hover{
border-radius: 8px 8px 0 0;
transition: all 0.5s linear;
}
#menu > li:first-child:hover{
	border-right: 1px solid #5dbee9;
	border-radius: 8px 8px 0 0;
	transition: all 0.5s linear;
}
#menu > li:hover {
	background-color: #5dbee9;
}
#menu ul {
	position: absolute;
	top: 2em; left: 0;
	max-height:0em;	
	margin: 0; padding: 0;
	background-color:#99dbf8;
	overflow: hidden;
	transition: all 0.5s linear;
	border-radius: 0 0 8px 8px;
	color: white;
	z-index: 10;
}
#menu > li:hover ul {
	/* à adapter, le minimum est le meilleur mais voyez large ?? */
	max-height: 20em;
}
.cont_bloc{
margin-top: 120px;
margin-bottom: 20px;
}
.bloc_large{
color: #5dbee9;
display: inline-block;
position: relative;
height: auto;
border: 0;
border-radius: 25px;
margin: 50px auto;
padding: 40px;
background-image: url(./images/white.png);
box-shadow: 4px 4px 20px #5dbee9;
background-attachment:fixed;
background-repeat: repeat;
vertical-align: middle;
}
.bloc_txt{
color: #5dbee9;
display: inline-block;
position: relative;
width: 340px;
height: auto;
border: 0;
border-radius: 25px;
box-shadow: 4px 4px 20px #5dbee9;
margin: 50px 50px;
padding: 20px 0;
background-image: url(./images/white.png);
background-attachment:fixed;
background-repeat: repeat;
vertical-align: middle;
}
.bloc_txt ul{
text-align: left;
padding-left: 50px;
list-style: none;
bottom: 60px;
}
.bloc_large ul{
text-align: left;
padding: 0 20px;
list-style: none;
position: relative;
font-size: large;
float: left;
}
.bloc_txt li, .bloc_large li{
background: transparent url('./images/puce_bleue.svg') no-repeat left;
background-size: 20px 20px;
padding-left: 40px;
line-height: 40px;
}
.bloc_txt li{
font-size: medium;
}
.bloc_large li{
font-size: medium;
}
.bloc_large h1{
width: 100%;
font-size: x-large;
font-weight: bold;
}
.bloc_txt a:link ,a:visited , a:hover, a:focus, a:active,
.bloc_large a:link ,a:visited , a:hover, a:focus, a:active{
  text-decoration: none;
  color: #5dbee9;
}
.bloc_fonc{
color: #5dbee9;
display: inline-block;
position: relative;
width: 160px;
height: 360px;
border: 0;
border-radius: 5px 5px 5px 5px;
margin: 50px 15px;
text-align: center;
vertical-align: top;
}
.bloc_fonc h2{
font-size: large;
}
.bloc_fonc img{
width: 100px;
margin: auto;
}
.bloc_en_liste{
display: block;
margin: auto;
width: 70%;
}
.bloc_en_liste h1{
margin-top: 20px;
}
.bloc_titre{
height: auto;
display: block;
width: 90%;
margin: auto;
}
.bloc_titre h1{
background-image: url(./images/white.png);
margin: 10px;
padding: 10px;
border-radius: 25px;
color: #5dbdeb;
}
.ss_bloc_titre{
display: inline-block;
margin-bottom: 30px;
}
.sss_bloc_titre_accueil{
display: block;
width: 400px;
background-image: url(./images/white.png);
margin: 10px;
border-radius: 25px;
height: 300px;
position: relative;
vertical-align: top;
font-size: large;
}
.sss_bloc_titre_accueil img{
height: 70%;
padding-bottom: 10px;
padding-top: 10px;
}
.sss_bloc_titre_accueil a{
margin: auto;
width: 90%;
display: block;
}
.elem_audio{
width: 390px;
height: 40px;
padding-bottom: 5px;
bottom: 0;
position: absolute;
left: 0;
border-top: 1px solid #5dbee9;
}
.ss_audio{
display: inline-block;
vertical-align: middle;
}
.ss_audio img{
width: 20px;
}
#progressBarControl{
width: 200px;
border: 1px solid #5dbdeb;
}
#progressBar{
width: 0;
height: 20px;
background-color: #5dbdeb;
position: relative;
}
.audio_lien {
height: 20px;
border-left: 1px solid red;
position: absolute;
cursor: pointer;
}

.sss_bloc_titre{
display: inline-block;
width: 250px;
background-image: url(./images/white.png);
margin: 10px;
border-radius: 25px;
height: 300px;
position: relative;
vertical-align: top;
font-size: large;
}
.sss_bloc_titre img{
width: 200px;
margin-left: 25px;
margin-right: 25px;
padding-top: 10px;
}
.sss_bloc_titre a{
color: black;
text-align: center;
position: absolute;
top: 220px;
left: 0;
padding: 10px;
color: #5dbdeb;
width: 230px;
}
.sss_bloc_titre a:link ,.sss_bloc_titre a:visited, .sss_bloc_titre a:focus, .sss_bloc_titre a:active,
.sss_bloc_titre_accueil a:link ,.sss_bloc_titre_accueil a:visited, .sss_bloc_titre_accueil a:focus, .sss_bloc_titre_accueil a:active{
text-decoration: none;
cursor: pointer;
color: #5dbdeb;
}
.ligne_menu{
margin-right: 1em;
display: none;
}
.colonne_image_1, .colonne_image_2{
display: inline-block;
text-align: center;
}
.colonne_image_1 img{
width: 90%;
border: 1px solid #5dbee9;
border-radius: 25px;
padding: 20px;
cursor: pointer;
margin-top: 20px;
margin-bottom: 20px;
}
.colonne_image_2 img{
width: 40%;
border: 1px solid #5dbee9;
border-radius: 25px;
margin-left: 2%;
margin-right: 2%;
vertical-align: middle;
padding: 20px;
cursor: pointer;
margin-top: 20px;
margin-bottom: 20px;
}
.colonne{
display: block;
text-align: center;
font-size: medium;
}
.colonneJ{
display: block;
text-align: justify;
font-size: medium;
}
.gauche{
text-align: left;
padding-left: 20px;
}
.centre{
margin: 4px;
text-align: center;
vertical-align: middle;
}
.droite{
text-align: right;
padding-right: 20px;
}
.puce:before{
content: "\002022\000020";
}
.puce{
text-align: left;
text-indent: 3px;
}
.droite{
text-align: right;
padding-right: 20px;
}
.en_savoir_plus{
background-color: transparent;
border: 1px solid #5dbee9;
border-radius: 25px;
display: block;
position: absolute;
padding: 10px;
margin: 0 8px;
bottom: 0;
width: 120px;
cursor: pointer;
}
.en_savoir_plus a:link ,.en_savoir_plus a:visited, .en_savoir_plus a:focus, .en_savoir_plus a:active{
text-decoration: none;
color: #5dbee9;
cursor: pointer;
}
.en_savoir_plus:hover{
font-weight: bold;
border: 2px solid #5dbee9;
cursor: pointer;
}
.en_savoir_plus label:hover  {
cursor: pointer;	
}
h1{
font-size: x-large;
font-weight: bold;
}
mark{
font-weight: bold;
background-color: transparent;
color: #5dbee9;
}
.offre{
background-image: url(./images/white.png);
background-repeat: repeat;
background-position: center;
background-size: 400px;
width: 340px;
height: 340px;
color: white;
border-radius: 25px;
box-shadow: 4px 4px 20px #5dbee9;
display: block;
position: relative;
margin: auto;
}
.offre img{
width: 300px;
height: 300px;
position: absolute;
left: 20;
top: 20;
}
.offre h1{
font-size: xx-large;
font-weight: bold;
position: absolute;
top: 130px;
color: #5dbee9;
text-align: center;
width: 340px;
}
.invisible{
display: none;
}
.curs{
cursor: pointer;
}
.curs:hover{
font-weight: bold;
}
#formu p{
padding-top: 20px;
clear: both;
}
#formu label{
float: left;
width: 160px;
text-align: left;
}
#formu input, #formu textarea{
float: right;
width: 220px;
}
.fa-star {
color: gray;
cursor: pointer;
padding: 0.0625rem;
}
.fa-star.gold {
color: #ffdc0f;
}
.rating {
display: flex;
flex-direction: column;
align-items: center;
}
.stars {
display: inline-flex;
justify-content: center;
font-size: 3em;
}
.stars:hover .fa-star {
color: #ffdc0f;
}
.stars .fa-star:hover ~ .fa-star {
color: gray;
}
.fa-star::before {
    content: "\2605";
}
.wait_box{
width: 200px;
height: 150px;
border: 5px solid #5cbdea;
display: block;
position: relative;
font-size: large;
color: #5cbdea;
text-align: center;
margin: 50px auto;
padding: 10px;
}
.wait_box img{
position: relative;
margin-top: 17px;
  width: 100px;
  height: 100px;
  -webkit-animation: tourne 2s infinite;
  -moz-animation: tourne 2s infinite;
  animation: tourne 2s infinite;
}
@-webkit-keyframes tourne {
    10% {
    opacity: 1;
    -webkit-transform: rotate(0deg);
  }
  100% {
    opacity: 10%;
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes tourne {
  10% {
    opacity: 1;
    -moz-transform: rotate(0deg);
  }
  100% {
    opacity: 10%;
    -moz-transform: rotate(360deg);
  }
}
@keyframes tourne {
  10% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    opacity: 10;
    transform: rotate(360deg);
  }
}
@media (max-width: 1024px) {
	.bloc_txt li, .bloc_large li, .colonne{
	font-size: 1em;
	}
	.bloc_large ul, .wait_box, .bloc_fonc h2{
	font-size: 1.2em;
	}
	.bloc_large h1, h1{
	font-size: 1.4em;
	}
	.offre h1{
	font-size: 1.6em;
	}
}
@media (max-width: 768px) {
	.bloc_titre h1 span{
	display: block;
	}
	.bloc_txt li, .bloc_large li, .colonne{
	font-size: 1.2em;
	}
	.bloc_large ul, .wait_box, .bloc_fonc h2{
	font-size: 1.4em;
	}
	.bloc_large h1, h1{
	font-size: 1.6em;
	}
	.offre h1{
	font-size: 1.8em;
	}
	#my_body{
	min-width: 450px;
	}
}