body{
	box-sizing:border-box;
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
}
/***********************************************************
*******************menu et img background/******************/
.app-bar{
	display:flex;
}
.title-app{
	font-size:25px;
	font-weight:bold;
	color: lavender;
	margin: 25px auto -0px 28%;
    background-color: #289AFE;
	height:100px;
	padding:30px;
	display:flex;
}
.menu{
	display:flex;
	flex-direction:row;
	width:100%;
	margin-top:15px;
	margin-bottom: 45px;
	background-color:transparent;
}
.logo-coin{
	width:145px;
	margin:10px auto 0 45px;
}
.lien{
	width:10%;
	border-radius:15px/15px;
	background-color:black;
	color:white;
	padding:15px;
	margin:auto;
	text-decoration:none;
	text-align:center;
	z-index:2;
	font-weight: 800;
	border: 1px solid white;
}
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:auto;
	text-align:left;
	font-size:11px;
}
.img-fildariane{
	width: 40px;
	margin-right: 5px;
}
.aNoteG{
	margin:-15px auto 25px 10px;
}
.aNoteG.fixedposa{
	margin:250px auto 25px 10px;
	position:fixed;
	z-index:10;
}
.imgNoteG{
	width:50px;
}
.noteGeneraleDiv{
	display:none;
	padding:0;
	margin:0;
}
.noteGeneraleDiv.fixedposdiv{
	position:fixed;
	margin:310px 0 0 0;
	z-index:10;
}
.pNoteG{
	width: 320px;
	margin:0 auto 25px 20px;
}
.TextareaNoteG{
	width:320px;
	height:150px;
	margin:0;
	font-style: roboto;
	border:0;
	font-size:9.5pt;
	background-color:#eaf2f9;
	line-height: 1.2;
}
.inpSubmNoteG{
	background-color:#007bff;
	border-radius:5px/5px;
	color:white;
}
/*****************************************************************************
****************** 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:whitesomke;
	z-index:99999;
	top:40%;
	left:40%;
	height:20%;
	width:20%;
	color:black;
	border:1px solid white;
	margin:0 auto 0 auto;
	font-size:22px;
	font-weight:800;
	display:none;
}
#btnAbort{
	position:fixed;
	background-color:indianred;
	z-index:99999;
	top:60%;
	left:40%;
	height:10%;
	width:20%;
	color:white;
	border:1px solid white;
	border-radius:0;
	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;
}
.img-back{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;
	opacity: 0.1;
}
.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.1);
}
@media (min-width: 1024px) and (max-width: 1399px) { 
	.lien{
		width:15%;
		margin-bottom:15px
	}
	a.lien:hover{
		width:15%;
	}
	.logo-coin{
		width:145px;
		margin:0px auto 0 45px;
	}
	.title-app{
		margin: 25px auto 0px 20%;
	}
	.menu{
		margin: 40px auto 15px auto;
	}
	.aNoteG.fixedposa{
		margin:345px auto 25px 10px;
		z-index:10;
	}
	.noteGeneraleDiv.fixedposdiv{
		margin:395px 0 0 0;
		z-index:10;
	}
	.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) { 
	.menu{
		flex-wrap:wrap;
		width:100%;
		margin-top:25px;
	}
	.logo-coin{
		width:100px;
		margin:25px auto 0 15px;
	}
	.lien{
		width:27%;
		margin-bottom:15px
	}
	a.lien:hover{
		width:27%;
	}
	.app-bar{
		width:768px;
		justify-content:space-between;
	}
	.title-app{
		margin: 25px auto 50px 4%;
	}
	.menu{
		margin: 0 auto 15px auto;
	}
	.aNoteG.fixedposa{
		margin:365px auto 25px 10px;
		z-index:10;
	}
	.noteGeneraleDiv.fixedposdiv{
		margin:420px 0 0 0;
		z-index:10;
	}
	/* bouton service worker */
	#btnInstall{
		top:27%;
		left:20%;
		height:25%;
		width:60%;
		font-size:24px;
	}
	#btnAbort{
		top:52%;
		left:20%;
		height:25%;
		width:60%;
		font-size:24px;
	}
	.footer-area .single-footer-box .footer-content .footer-title ul li a {
		font-size:26px;
	}
	/*wait*/
	#loader-6{
		margin:50% auto auto auto;
	}
}
@media (min-width: 576px) and (max-width: 767px) { 
	.menu{
		flex-wrap:wrap;
		width:100%;
		margin-top:0;
	}
	.app-bar{
		width:576px;
	}
	.title-app{
		margin: 25px auto 25px 1%;
		font-size:25px;
		padding:28px;
	}
	.logo-coin{
		width:100px;
		margin:25px auto 0 15px;
	}
	.lien{
		width:27%;
		margin-bottom:15px
	}
	a.lien:hover{
		width:27%;
	}
	.background{
		margin:auto auto 8% auto;
		width:100%;
	}
	.aNoteG{
		margin:-15px auto 55px 10px;
	}
	.aNoteG.fixedposa{
		margin:255px auto 25px 10px !important;
		z-index:10;
	}
	.noteGeneraleDiv.fixedposdiv{
		margin:315px 0 0 0;
		z-index:10;
	}
	/* bouton service worker */
	#btnInstall{
		top:27%;
		left:20%;
		height:25%;
		width:60%;
		font-size:24px;
	}
	#btnAbort{
		top:52%;
		left:20%;
		height:25%;
		width:60%;
		font-size:24px;
	}
	.footer-area .single-footer-box .footer-content .footer-title ul li a {
		font-size:26px;
	}
	/*wait*/
	#loader-6{
		margin:50% auto auto auto;
	}
}
@media (min-width: 320px) and (max-width: 575px) {
	.menu{
		flex-wrap:wrap;
		width:100%;
		margin-bottom:5px;
	}
	.app-bar{
		width:320px;
		justify-content:space-between;
	}
	.title-app{
		margin: 1px auto 25px 4%;
		font-size:25px;
		padding:10px;
		height:80px;
	}
	.logo-coin{
		width:80px;
		margin:1px auto 0 1px;
	}
	.lien{
		width:43%;
		margin-bottom:15px
	}
	.footer-title ul li a i{
		font-size:26px;
		margin:0;
	}
	a.lien:hover{
		font-size:1em;
		width:42%;
	}
	.background{
		margin:auto auto 8% auto;
		width:100%;
	}
	.aNoteG{
		margin:-15px auto 55px 10px;
	}
	.aNoteG.fixedposa{
		margin:285px auto 25px 10px !important;
		z-index:10;
	}
	.noteGeneraleDiv.fixedposdiv{
		margin:345px 0 0 0;
		z-index:10;
	}
	.footer-area .single-footer-box .footer-content .footer-title ul li a {
		font-size:26px;
	}
	/* bouton service worker */
	#btnInstall{
		top:27%;
		left:20%;
		height:25%;
		width:60%;
		font-size:24px;
	}
	#btnAbort{
		top:52%;
		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;
	}
}