body{
	box-sizing:border-box;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
}
/***********************************************************
*******************menu et img background/******************/
.contenantMH{
	width:100%;
	height:30%;
	margin:0;
	padding:0;
	border:0;
	display:flex;
	flex-direction:column;
}
.background{
	background-image: url(../images/course1s.webp);
	background-size: cover;
	height: 400px;
    background-repeat: no-repeat;
}
.course_img{
	width:100%;
	height:100%;
	object-fit:contain;
	overflow:hidden;
	z-index:1;
}
.menu{
	display:flex;
	flex-direction:row;
	width:100%;
	margin-top: 8%;
	background-color:transparent;
}
.div-coin{
	width:100px;
	margin:-300px auto 0 45px;
}
.logo-coin{
	width:145px;
	height:145px;
	margin:0;
}
.imgsmsdiv{
	width: 260px;
	margin: -108px auto auto 70%;
}
.aboxsms{
	text-decoration:none;
}
.boxsmsimg{
	width:70px;
	margin:-10px 0 auto 0;;
}
.boxsms{
	color:white;
	background-color:#83669d;
	border-radius:5px;
	border:2px solid white;
	padding:20px;
	font-size: 26pt;
}
.lien{
	width:10%;
	border-radius:15px/15px;
	background-color:red;
	color:white;
	padding:15px;
	margin:auto;
	text-decoration:none;
	text-align:center;
	z-index:2;
	font-weight: 1000;
	border: 0;
}
a.lien:hover{
	width:12%;
	height:12%;
	color:white;
	text-decoration:none;
	font-size:1.6em;
}
.to-hide-before{
	display:none;
}
.flash-message{
    color:red;
    margin:60px auto auto auto;
    text-align:center;
}
/***WAIT********/
#wait{
	display:none;
	position:fixed;
	top:0;
	left:0;
	background-color:black;
	z-index:3;
	height:100%;
	width:100%;
	opacity:0.6;
}
#loader-6{
	z-index:100;
	width:100px;
	height:100px;
	border-radius:50%;
	border:2px solid black;
	opacity:1;
	background-color:#89b1d3;
	margin:20% auto auto auto;
}
#loader-6 span{
	display: inline-block;
	position:relative;
	left:2px;
	top:5px;
	width: 13px;
	height: 90px;
	background-color: #3498db;
	margin:0 2px 0 2px;
	opacity:1;
}
#loader-6 span:nth-child(1){
	animation: grow 1s ease-in-out infinite;
}
#loader-6 span:nth-child(2){
	animation: grow 1s ease-in-out 0.15s infinite;
}
#loader-6 span:nth-child(3){
	animation: grow 1s ease-in-out 0.30s infinite;
}
#loader-6 span:nth-child(4){
	animation: grow 1s ease-in-out 0.45s infinite;
}
@keyframes grow{
	0%, 100%{
		-webkit-transform: scaleY(1);
		-ms-transform: scaleY(1);
		-o-transform: scaleY(1);
		transform: scaleY(1);
	}
	50%{
		-webkit-transform: scaleY(1.8);
		-ms-transform: scaleY(1.8);
		-o-transform: scaleY(1.8);
		transform: scaleY(1.8);
	}
}
.fildariane{
	width:576px;
	margin:50px auto auto auto;
	text-align:left;
	font-size:11px;
}
.img-fildariane{
	width: 40px;
	height:40px;
	margin-right: 5px;
}
/*****************************************************************************
****************** Fin menu Haut et Background *******************************/
/*************************************************************************************
************************ Footer ******************************************************/
.footer-logo .dev-logo{
	width:40px;
	height:40px;
}
#BtnModal1{
	color:white;
	border:0;
	background-color:#0A5260;
	padding:0;
	margin:0;
	letter-spacing: 1px;
    font-weight: 400;
}
#BtnModal1:hover{
	color: #CE961A;
}
.color-btn-modal1{
	background-color:#6d747c;
	color:white;
	border:0;
}
a.color-btn-modal1:hover{
	background-color:#5a5b5e;
	border:0;
}
/*************************************************************************************
********************* Commun *********************************************************/
a{
	font-weight:700;
}
.color-red{
	color:red;
}
.text-align-center{
	text-align:center;
	margin:auto;
}
.btn-info{
	color:white !important;
}
/*******************************************************************************
**************** Button service worker *****************************************/
#btnInstall{
	position:fixed;
	background-color:black;
	z-index:99999;
	top:40%;
	left:40%;
	height:20%;
	width:20%;
	color:white;
	border:1px solid white;
	margin:0 auto 0 auto;
	font-size:22px;
	font-weight:800;
	display:none;
}
/****************************************************
Modal Login et register ***************************/
.link-connect{
    display:flex;
    flex-direction:column;
}
.a-google{
    color:black;
    background-color:white;
    text-decoration:none;
    border:1px solid black;
    border-radius:15px/15px;
    height:30px;
    width:60%;
    text-align:center;
    margin:50px auto 15px auto;
    font-weight:1000;
}
.a-facebook{
    color:white;
    background-color:#007bff;
    text-decoration:none;
    border-radius:15px/15px;
    height:30px;
    width:60%;
    text-align:center;
    margin:15px auto 50px auto;
    font-weight:1000;
}
a.a-facebook:hover{
    color:white;
}
.logo-a{
    float:left;
    width:20px;
    margin: auto auto auto 10px;
}
.google-logo{
    margin-top:3px;
}
.text-cookie{
    font-size:10pt;
}
.a-text-cookie{
    color:black;
    text-decoration:none;
    font-weight:850;
}
a.a-text-cookie:hover{
    color:black;
    text-decoration:none;
}
.footer-area .single-footer-box .footer-content .footer-title ul li a {
	font-size:26px;
}
.x-twitter{
	position:relative;
	top:-3px;
}
a:hover{
	transform: scale(1.2);
}
@media (min-width: 1024px) and (max-width: 1399px) { 
	.background{
    	height: 400px;
    	background-repeat: no-repeat;
		width:100%;
	}
	.imgsmsdiv{
		width: 240px;
		margin: -5% auto auto 65%;
	}
	.aboxsms{
		text-decoration:none;
	}
	.boxsmsimg{
		width:70px;
	}
	.boxsms{
		font-size:26pt;
	}
	.menu{
		margin-top: 6%;
	}
	.div-coin{
		width:145px;
		margin:-286px auto 0 40px;
		margin-bottom:0;
	}
	.logo-coin{
		width:145px;
		margin:0;
	}
	.lien{
		width:15%;
		margin-bottom:15px
	}
	.fildariane{
		margin:10px auto auto auto;
	}
	a.lien:hover{
		width:15%;
	}
	.footer-area .single-footer-box .footer-content .footer-title ul li a {
		font-size:26px;
	}
	/* bouton service worker */
}
@media (min-width: 768px) and (max-width: 1023px) {
	.background{
    	height: 370px;
		width:100%;
    	background-repeat: no-repeat;
    	background-position-x: -700px;
    	background-position-y: 0px;
	}
	.div-coin{
		width:100px;
		margin:-237px auto 0 170px;
		margin-bottom:0;
	}
	.logo-coin{
		width:100px;
		height:100px;
		margin:0;
	}
	.menu{
		flex-wrap:wrap;
		width:100%;
		margin-top:85px;
	}
	.lien{
		width:27%;
		margin-bottom:15px
	}
	a.lien:hover{
		width:27%;
	}
	.imgsmsdiv{
		margin:-70px auto auto 60%;
	}
	.fildariane{
		margin:45px auto auto auto;
	}
	/* bouton service worker */
	#btnInstall{
		top:27%;
		left:20%;
		height:25%;
		width:60%;
		font-size:24px;
	}
	/*wait*/
	#loader-6{
		margin:50% auto auto auto;
	}
	.footer-area .single-footer-box .footer-content .footer-title ul li a {
		font-size:26px;
	}
}
@media (min-width: 576px) and (max-width: 767px) {
	.background{
    	height: 328px;
		width:100%;
    	background-repeat: no-repeat;
    	background-position-x: -960px;
    	background-position-y: 0px;
	}
	.menu{
		flex-wrap:wrap;
		width:100%;
		margin-top:85px;
	}
	.div-coin{
		width:80px;
		margin:-183px auto 0 80px;
		margin-bottom:0;
	}
	.logo-coin{
		width:80px;
		height:80px;
		margin:0;
	}
	.menu{
		flex-wrap:wrap;
		width:100%;
		margin-top:105px;
	}
	.lien{
		width:27%;
		margin-bottom:15px
	}
	a.lien:hover{
		width:27%;
	}
	.imgsmsdiv{
		margin:-60px auto auto 62%;
	}
	.boxsmsimg{
		width:55px;
	}
	.boxsms{
		font-size:16pt;
	}
	.fildariane{
		margin:40px auto auto 20%;
	}
	/* bouton service worker */
	#btnInstall{
		top:27%;
		left:20%;
		height:25%;
		width:60%;
		font-size:24px;
	}
	/*wait*/
	#loader-6{
		margin:50% auto auto auto;
	}
	.footer-area .single-footer-box .footer-content .footer-title ul li a {
		font-size:26px;
	}
}
@media (min-width: 320px) and (max-width: 575px) {
	.background{
    	height: 328px;
		width:100%;
    	background-repeat: no-repeat;
    	background-position-x: -1151px;
    	background-position-y: 0px;
	}
	.course_img{
		object-fit:unset;
		height:85px;
	}
	.menu{
		flex-wrap:wrap;
		width:100%;
		margin-top:65px;
	}
	.div-coin{
		width:80px;
		margin:-140px auto 0 45px;
		margin-bottom:0;
	}
	.logo-coin{
		width:80px;
		height:80px;
		margin:0;
	}
	.lien{
		width:42%;
		margin-bottom:15px
	}
	.imgsmsdiv{
		margin:-60px auto auto 49%;
	}
	.boxsmsimg{
		width:55px;
		margin: -10px 0 auto -18px;
	}
	.boxsms{
		font-size:16pt;
	}
	.footer-title ul li a i{
		font-size:26px;
		margin:0;
	}
	a.lien:hover{
		font-size:1em;
		width:42%;
	}
	/* bouton service worker */
	#btnInstall{
		top:27%;
		left:20%;
		height:25%;
		width:60%;
		font-size:24px;
	}
	/*wait*/
	#loader-6{
		margin:50% auto auto auto;
	}
	.a-facebook, .a-google{
		width:100%;
	}
	.fildariane{
		width:320px;
		padding-left:15px;
		margin:20px auto auto auto;
	}
	.footer-area .single-footer-box .footer-content .footer-title ul li a {
		font-size:26px;
	}
}