@font-face {
  font-family: "myFont";
  src: url("Armata-Regular.otf");
}

.indexInscription:link{
	border: 1px solid black;
}

.myCar{
	background-color: green;
	height: 100px;
	width:100%;
	line-height: 50px;
}

.myCar .header{
	height:20px;
	background-color: red;
}

.panel-title{
	text-align: center;
}

/* **************************** HEADER      **************************** */
.navbar-nav li a{
	color:white;
}

.navbar{
	/*font-family: Lato, sans-serif;*/
	font-family: 'myFont';
	font-size: 14px;
	border: none;
}

.navbar-nav i.fa{
	margin-right: 3px;
}

.navbar-nav li a:hover{
	/*background-color: #C45656;*/
	background-color: #444444;
	color: #C45656;
}

.navbar-dark .navbar-header .navbar-toggle{
	background-color: #444444;
	border: none;
}

.navbar-dark .navbar-header button{
	border: none;
}

/*.iconBarWhite{
	color: white;
}*/

/*.logoAdnGrandeLettre{
	font-size: 28px;
}

.logoAdnPetiteLettre{
	font-size: 14px;
}*/

a:link.aRenvoiMdp{
  color: #666666;
  text-decoration: underline;
}

a.aRenvoiMdp{
	border: none;
	background-color:transparent;
}

a:link.aInscription{
	color: blue;
  text-decoration: underline;
}

a.aInscription{
	border: none;
	background-color:transparent;
}

#aVoirProfil{
	color: white;
	margin-top: 10px;
}


#aLienProfil{
	font-size: 12px;
	color: black;
	text-decoration: underline;
	border: none;
}

#btnDisconnect{
	padding: 15px;
	background-color: transparent;
	background-image: none;
	border: 0;
	color: #999999;
}

/*.titreADN{
	font-family: "myFont";
	font-size: 20px;
	color: #E73C3C;
	float:left;
	width:50%;
}*/
              
.titreFooter
{
	color: #ED6969;
}
/* **************************** INDEX      **************************** */
.inputInscription{
	color: white;
}

@media screen and (min-width: 769px) {
	#divAccueil{
		/*background-image: url("/caradvisor/images/accueilFond.jpg");*/
		background-image: url("../images/accueilFond.jpg");
		background-repeat: no-repeat;
		/*background-position: center bottom;*/
		/*background-size: cover;*/
		background-size: 100% auto;
	}
}

#divTitreAccueil{
	margin: 0px auto 15px auto;	
	width: 49%;
}

.titreAccueil{
	color : #E73C3C;
	font-size: 24px;
	font-weight: 300;
	/*font-family: Lato, sans-serif;*/
	font-family: "myFont";
	text-align: center;	

	width: 100%;

	padding: 10px 0 10px 0;

	margin: 0;
}

#divTitreAccueilMobile{
	color : #E73C3C;
	font-size: 1.2em;
	font-weight: 300;
	
	font-family: "myFont";
	text-align: center;	

	width: 100%;
	padding: 10px 0 10px 0;
	margin: 0;

	/*background-color: #444444;*/
}

.carteTitreAccueil{
	color : white;
	font-size: 16px;
	font-weight: 400;
	/*font-family: Lato, sans-serif;*/
	font-family: "myFont";


	float: left;
	
	margin : 0px auto 0px auto;
	height : 100px;
	width : 33.33%;

	text-align: center;	
}

.fondTitreAccueil{
	background-color: #333;
	opacity: 0.95;
}

#divLoginAccueil{
	
	margin: 0px auto 20px auto;	
	width: 80%;
	padding: 0 50px 0 50px;

	border: 2px solid #e1e1e1;
	border-radius: 5px;
	background-color: white;
	
}

.inputLogin{
	font-family: "Lato", sans-serif;
	padding: 20px 5px 20px 5px;
	font-size: 14px;
}

/* **************************** PAGE GARAGE **************************** */
.badgeGarage{
  padding: 10px;
  font-family: 'myFont';
  color: white;
  float: right;
  background-color: #444444;
  opacity: 90%;
  border-left: solid 5px #E73C3C;
}

.badgeAncienne{
  padding: 10px;
  font-family: 'myFont';
  color: white;
  background-color: #444444;
  opacity: 90%;
  border-left: solid 5px #E73C3C;
  float: right;
  height: 50px;
}

.badgeDriving{
  padding: 10px;
  font-family: 'myFont';
  color: white;
  background-color: #E73C3C;
  opacity: 90%;
  border-left: solid 5px #444444;
  float: right;
  height: 50px;
}

.badgeOkDemEssai{
	padding: 10px;
	margin-left: 10px;

	font-family: 'myFont';
	font-size: 0.8em;
	
	background-color: #E1E1E1;
	color: black;
	border-radius: 5px;
}

.badgeNokDemEssai{
	padding: 5px;
	margin-left: 10px;

	font-family: 'myFont';
	font-size: 0.8em;

	background-color: #E1E1E1;
	color: black;
	border-radius: 5px;
}

.fontFamilyNormal{
	font-family: "Lato", sans-serif;
	font-size: 1.2em;
}


.editingVoiture{
	background-color: #f3f3f3;
	border: #F9534F 4px solid;
}

#tableGarage .panel-heading{
	padding: 0;
}

.divTrGarage{
	margin:0; /* pour enlever le margin -15px mis par le framework grid de boostrap */
	padding:5px;
}

/* COMPTE A REBOURS CUTOMTISATION ... */
.divCountDown{
	float:left;
}

.divCountDown li{
	font-size: 1em;
	float:left;
	/*line-height: 10px;
	height: 10px;*/
}

.divCountDown span{
	font-size: 1em;
	float:left;
	/*line-height: 10px;
	height: 10px;*/
}


/* PHOTOS  V1 */
.btnPhotoGarage{
	margin: 0;
	padding: 0;	
	width: 280px;
	background-color: white;
}

.photoGaragePrincipale
{		
	/*height: 180px;*/
	width: 240px;
	margin: 0;	
}

.badgePhotoAbsolute
{
	margin-top: 140px;
	margin-left: -50px;
}

/* PHOTOS  V2 */
.photoIndexCarousel
{		
	/*height: 180px;*/
	width: 100%;
	margin: 0;	
}

.photoIndexBadge{
	padding: 10px;
	font-family: 'myFont';
	font-size: 1.3em;
	color: white;	
	opacity: 50%;
	height: 15px;

	margin-top: -40px;
	/*margin-right: -20px;*/
}

.photoIndexButton{
	margin: 0;
	padding: 0;
	border:0;	
	cursor: zoom-in;
}


/* version time line */
/*.timeline-2{
	margin-left: 90px; => non, fait buggé en mode mobile
}*/

/*.timeline-2 ul{
	margin-left: 250px;
}
*/

@media screen and (max-width: 768px) {
  ul.timeline-2{
      margin-left: 18px;
   }
}


.timeline-2 li{
	margin-top: 20px;
	margin-bottom: 20px;
}

.timeline-time{
	font-family: "myFont";
	font-size: 10px;
}

#tableGarage{
	padding-left: 5px;
	padding-right: 25px;
}

.panelBodyGarage{
	padding:2px;
	margin:2px;
}

/* FIN version time line */

/* header Garage */
ul.listeStats{
	list-style-type: none; 
}

ul.listeStats li{
	display : inline;
	padding : 0 0.5em; /* Pour espacer les boutons entre eux */
}

ul.listeStats li div{
	display : inline-block;
}


.divGarageAddTitle{
	background-color: #d9534f;
	color: white;
	font-weight: bold;
	margin-top: 5px;
}

.thumbPhoto{
	height: 100px;
	width: 100px;
	border: 2px solid white;
}

/* CAROUSEL */
.modal{
	background-color: #444444;	
}

.modal-dialog{
	margin:10px 0 50px 0;
	padding: 0;
	
	width: 100%;	
}

.modal-content{
	border:0;
	background-color: transparent;
	box-shadow: none;	
}

.modal-header{
	border: 0;	
}

.modal-body{
	border: 0;	
}

.carousel{
	width: 100%;
	margin: 0 auto;
}

.carousel-inner{
	margin: 0;
	padding: 0;

	height: 100%;
	width: 60%;
	margin : auto auto;
}

.divTapTapPhoto{
	/*height: 100%;
	width: 90%;*/

	/*height: 500px;
	width : 800px;*/

	/*margin : auto auto;*/
	margin:0;
}

.tapTapPhoto img{
	width:  100%;
	height: 100%;
}


.carousel-control-custom{
	background-color: white;
	height: 70px;
	width: 70px;
	margin: auto 0;

	padding:0;

	line-height: 50px;
}

 /*nouveau avec FA*/
.carousel-control-span{
	/*height: 100%;*/
	font-size: 3.5em;
	vertical-align: middle;
    line-height: 50px;
}

.button-carousel-close{
	position: absolute;
	right: 0px;
	top: 0px;

	height: 70px;
	width: 70px;

	background-color: white;
		
	line-height: 50px;

	z-index: 10;
}

.button-carousel-close span{
	position: absolute;
	right: 0px;
	top: 0px;

	font-size: 3em;
	font-weight: normal;
	color: white;
	opacity: 100%;
}

/*.carousel-control-custom-span{
	width:100%;
	height: :100%;
	margin: auto auto;
	border : 3px solid red;
	right: 0;	
}*/

.divCountDown li{
	margin: 5px 15px 0px;
}

.garageTexteLibre{
	font-size: 1.2em;
	/*border: 1px solid #F1F1F1;
	width: 90%;*/
	/*padding: 10px;
	margin: 10px;*/
}

/* **************************** PAGE ESSAIS **************************** */
#selectFiltreMarque{
	background-color: transparent;
	border: 0;
}

.rowEssais{
	/*Version grise avec bords arrondis
	border: 1px #e5e5e5 solid;
	border-radius: 10px;
	margin : 7px 5px 7px 5px;
	background-color: #f8f8f8;*/

	/*Version blanche */
	border-top: 1px #e5e5e5 solid;
	margin : 7px 5px 7px 5px;
	padding: 10px;

}

.titreModeleEssais{
	font-family: 'myFont';
	font-size: 20px;
}

.editable {
    caret-color: red;
}

.modeEdition{
	border: 1px solid gray;
	background-color: gainsboro;
}

/*.invisibleInput {
	border: 0;
	background-color: transparent;
}*/

.editableInput{
	border: 1px #CCCCCC solid;	
	background-color: transparent;
}

.editableInputMargin{
	border: 1px red solid;	
	background-color: transparent;
	/*margin-left : 5px*/
}

.photoEssaisPrincipale{
	height: 150px;
	max-width: 250px;
	margin: 5px;
	border: 1px solid white;
	border-radius: 5px;
}


.aLienProfilProprio{
	/*padding: 10px;*/
	/*font-size: 1.2em;*/
	font-family: "Lato", sans-serif;	
	color:#666666;
	text-decoration: underline;
	/*border: solid 1px #E5E5E5;
	border-radius: 5px;
	background-color: #F1F1F1;*/
}


@media screen and (max-width: 768px) {
	.marginTop20_mobile{
		margin-top : 20px;
	}

	.marginBottom20_mobile{
		margin-bottom : 20px;
	}
}


/* **************************** PAGE GARAGE ADD **************************** */
div#panelOptionsResume button{
	background-color: #F2F2F2;
	margin: 5px;
}

#btnGarageAddAjouterVoiture{
	margin-left: 25px;
}

/* **************************** PAGE DEMANDE ESSAIS **************************** */
#locDEPanneauDepliant{
	border: 1px #E73C3C solid;
	border-radius: 5px;
}

#section_etape2_validationEssai{
	border: 1px #E73C3C solid;
	border-radius: 5px;
}

/*.itemLocDEPanneauDepliant a{
	height: 50px;	
	padding: 5px;
	font-weight: bold;
	width: 100%;
	color: yellow;

}

.itemLocDEPanneauDepliant a:hover{
	background-color: red;
}*/


.btnItemLocDE{
	width: 100%;
	background-color: white;
	color: gray;
	text-align: left;
	border: none;
	border-bottom: 1px #e7e7e7 solid;

	-webkit-transition-duration: 0.4s; 
  	transition-duration: 0.4s;
}

.btnItemLocDE:hover{
	background-color: #E73C3C;
	color: white;
}

/*
.locDEPanneauDepliantLi{
	height: 50px;	
	padding: 5px;
	font-weight: bold;
	
}

.locDEPanneauDepliantLi :hover{
	background-color: blue;
}*/

button#btnDEValidation:disabled{
	color: gray;
	border: 0;
}


/* **************************** PAGE PROJETS AUTO **************************** */
#SectionAjoutRecherche{
	border: 1px solid #e5e5e5;
	background-color: #cccccc;
	height: 100px;
	margin-bottom: 15px;
}

#buttonShowAdminRecherches{
	margin-bottom: 5px;	
}

#divAjoutProjet{
	border: 1px solid rgb(229,229,229);
	padding: 5px 10px 5px 10px;
	margin-bottom: 5px;	
	background-color: #F3F3F3;
}

#recherches{
	padding-left: 5px;
	padding-right: 5px;
}
/*
.containerDivProjet{
	border: 1px #e5e5e5 solid;
	border-radius: 10px;
	margin : 7px 0px 7px 0px;
}*/

ul#tabsRecherches li a{
	color: #666666;
}

ul#tabsRecherches li.active a{
	color: #E73C3C;
}

.headerProjet{
	background-color: #cccccc;
}

.ligneVoitureRecherche{
	margin: 0 2px 15px 2px;
	padding-top: 5px;
	border-top:1px solid #e5e5e5;
}

.rechVoitureAdd{
	background-color: #F8F8F8;
	margin: 0 10px 15px 10px;
	/*border-radius: 10px;
	border:3px solid #f7d3a1;*/
	padding: 5px;
}

.section_rechVoit_resultats{
	/*border:1px solid #E73C3C;
	border-radius: 10px;*/

	margin-top: 15px;
	margin-left: 15px;
/*	margin-right: 15px;*/
}

.rowResultatRech{
	border: 1px #e5e5e5 solid;
	border-radius: 10px;
	margin : 7px 5px 7px 5px;

	background-color: #e6e6e6;
}

.photoProjetAutoRV{
	width: 200px;
	border-radius: 5px;
	margin-right: 15px;
}

.btnLigneVoitRechGetEssais{
	background-color: transparent;
	text-decoration: underline;
	font-weight: bold;
	color: #C45656;
}

.spanCommentaire{
	line-height: 1.3em;
	font-family: 'myFont';
	color: #C45656;
	font-weight: bold;
}

.txtDECommentaire{
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: transparent;
}

.txtDECommentaireUtilisateur{
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: transparent;
}

.btnDESave{
	/*float: right;*/
	margin-top: 5px;
	margin-bottom: 5px;	
}

.carteHeaderDemandeEssai{
	padding: 5px;
	margin : 10px;
	border-right: 2px solid #C45656;

}
.carteDemandeEssai{
	padding: 5px;
	margin : 10px;
	border : 2px solid #e5e5e5;
	border-radius: 10px;
}

.carteResultatRechEssai{
	padding: 5px;
	margin : 20px;
	border : 2px solid #e5e5e5;
	border-radius: 10px;
	background-color: white;
	/*background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);*/
	height : 300px;

	transition: transform 0.2s;
}

.carteResultatRechEssai:hover{
	border: 2px solid red;
	
	transition: 0.2s;
  	transform: scaleX(1.02);  	
}

.photoCarteResultatRechEssai{
	width: 240px;
	/*height: 200px;*/
}

.texteCarteResultatRechEssai{
	color: #E73C3C;
	font-size: 20px;		
	font-family: "Lato", sans-serif;
    font-weight: 300;
    margin: 10px 0 10px 0;
}

.carteDivContenu{
	bottom: 10px;
	left: 10px;
	position: absolute;
}

.spanParamProjetNonEditable
{
	margin-bottom: 10px;
}

/* **************************** PAGE MESSAGES **************************** */

.divMsgHeader{
	margin: 5px;
	border-radius: 10px;
	/*width: 100%;*/
	background-color: white;
	border: 1px solid #e5e5e5;
	/*border-bottom : 2px solid #e5e5e5;*/	
}

.divSaisieDateEssai{
	/*border: 1px solid #e5e5e5;
	border-radius: 5px;	
	background-color: gray;*/

}

.msgChat{
	display: block;
	/*border : 2px solid black;*/
	/*background-color: #e5e5e5;*/
	/*height: 200px;*/
}

.unDivMsg{
	/*border : 2px solid #e5e5e5;*/
	border-radius: 10px;
	word-wrap: break-word;
	margin: 2px 20px 2px 20px;
}

.unDivMsgEmet{
	background-color: #C45656;
	color: white;
	/*float: left;*/
}

.unDivMsgRec{
	background-color: #f2f2f2;
	color: #404040;
	/*float: right;*/
}

#divMsgChat{
	background-color: white;
	border-radius: 10px;
}

.divMsgChatSend{
	background-color: white;
	margin-top: 10px;
}

.inputChatSend{
	border : 2px solid #e5e5e5;
	border-radius: 20px;
width: 100%;	
}

.textAlignLeft{
	text-align: left;
}

.divPaiementEssai{
	padding: 10px;
	background-color: #f39517;
}

/* **************************** PAGE STATS **************************** */
.listeTop5-li{
	list-style: none;
}

.listeTop5-ol{
	padding: 0;
	margin : 0;
}

/* **************************** PAGE OUTILS **************************** */
/*
.carteHeader{
	padding: 5px;
	margin : 10px;
	border-right: 2px solid #C45656;

}
.carte{
	padding: 5px;
	margin : 10px;
	border : 2px solid #e5e5e5;
	border-radius: 10px;
}*/

.carteContainer{
	padding: 5px;
	margin : 10px;
	border : 2px solid #e5e5e5;
	border-radius: 10px;
	background-color: white;
	/*background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);*/
	height : 220px;	

	transition: transform 0.6s;
}

.carteContainerCalculette{
	padding: 5px;
	margin : 10px;
	border : 2px solid #e5e5e5;
	border-radius: 10px;
	background-color: white;
	/*background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);*/
	height : 300px;
	/*transition: transform 0.6s;*/
}

@media screen and (max-width: 768px) {
	.carteContainerCalculetteMobile{
		height : 600px;
	}
}


#calcResultat{
	background-color: #f7f7f7;
	border-radius: 10px;
	border: solid 1px #e5e5e5;
	height: 50px;
	color: #C45656;
	font-weight: bold;
	font-size: 20px;		
	font-family: "Lato", sans-serif;
}

#btnCalculette{
	/*margin-top: 25px;*/
	margin: 25px auto;
	width: 60%;
}

.carteContainer:hover{
	border: 2px solid red;
	
	transition: 0.6s;
  	transform: scaleX(1.05);  	
}

.carteTitre{
	color: #E73C3C;
	font-size: 25px;
}

.carteDescription{
	/*color: #E73C3C;*/
	font-size: 15px;		
	font-family: "Lato", sans-serif;
    font-weight: 300;
    margin: 10px 0 10px 0;
}

.cartePhoto{
	width: 240px;	
	max-width: 80%;
	/*height: 200px;*/
}

/*.carteDivContenu{
	bottom: 10px;
	left: 10px;
	position: absolute;
}*/

/* **************************** COMMON **************************** */
input[type="text"]:disabled {
  background: white;
}


/* *** DISPOSITION *** */
.annuleFloat{
	clear:both;
}

.floatLeft{
	float: left;
}

.floatRight{
	float: right;
}

.displayBlock{
	display:block;
}

.displayInline{
	display:inline;
}

/* *** BACKGROUND *** */

.backgroundPrinc{

}

.backgroundRed{
	background-color: #C45656;
}

.backgroundAlt{
	background-color: #f9f9f9;
}

.backgroundPrincBlack{
	background-color: #444444;
	color : #A3A3A3;
}

.backgroundAltBlack{
	background-color: #444444;
	color : #A3A3A3;
}

.backgroundGrisClair{
	background-color: #F7F7F7;
}

/* *** FONT  *** */

.titreModele{
	font-family: 'myFont';
	font-size: 20px;
}

@media screen and (max-width: 768px) {
.titreModele{
	font-family: 'myFont';
	font-size: 16px;
}
}

.titreModeleAnnee{	
	font-size: 15px;
	color:gray;
}

.titreModeleAnneeCoverFlow{
	font-size: 15px;
}

.titreMoteurPetit{
	font-family: 'myFont';
	font-size: 15px;
	color:#C45656;
}

.titreMoteurGrand{
	font-family: 'myFont';	
	font-size: 15px;
	color:#C45656;
	margin-left: 5px;
}

.caractVoiture{
	font-family: 'myFont';	
	font-size: 1.4em;
}

@media screen and (max-width: 768px) {
.caractVoiture{
	font-family: 'myFont';	
	font-size: 1.1em;
	margin-top: 15px;
}

}

.divCaractVoiture{
	/*width:20%;
	float:left;*/
}

.myFontTitre15{
	font-family: 'myFont';	
	font-size: 15px;
	color:#C45656;
}

.titreMoteur2
{
	color: #E73C3C;
	font-size: 20px;		
	font-family: "Lato", sans-serif;
    font-weight: 300;
    margin: 0;
}


.myFont12{
	font-family: 'myFont';	
	font-size: 12px;	
}

.myFontMoyen{
	font-family: 'myFont';	
	font-size: 1.1em;
}

.font15{
	font-size: 15px;
}

.font20{
	font-size: 20px;
}

.font25{
	font-size: 25px;
}

.font30{
	font-size: 30px;
}
.font40{
	font-size: 40px;
}

.fontOrange{
	color: #F0AD4E;
}

.fontGreen{
	color: #02C66C;top
}

.width30Pourcent{
	width: 30%;
}

.width105{
	width:105px;
}

.width150{
	width:150px;
}

.cacher{
	display: none;
}

.header-full-title {
	background-image: none;
	float: left;
    overflow: hidden;
    padding-left: 75px;
    /*background-image: url("/caradvisor/images/engineV8.svg");*/
    background-size: 70px 100px;
    background-repeat: no-repeat;
    background-position: left center;
}

.selectCustom{
	background-color: #f8f8f8;
	border-color: #e5e5e5;
	border-radius: 5px;
	height: 25px;
}

.selectCustomGrand{
	background-color: #f8f8f8;
	border-color: #e5e5e5;
	border-radius: 5px;
	height: 32px;	
}

.tdNotesEtoiles i{
	margin-left: 3px;
}


/* *** MARGES  *** */

.hrSansMarge{
	margin: 0;
	margin-bottom: 10px;
}

.margin-5{
	margin: 5px;
}

.margin-5-left{
	margin-left: 5px;
}

.margin-10-top{
	margin-top: 10px;
}

.margin-50{
	margin: 50px;
}

.padding-5{
	padding: 5px;
}

.padding-10{
	padding: 10px;
}

.border-1-black{
	border: 1px solid gray;
}

.clearMargin{
	margin:0;
}

.colorOrange{
	background-color: #F0AD4E;
}

.colorGreen{
	background-color: #02C66C;
}

.modeEditionRow{	
	border: 2px solid #D9534F;	
}

.annulerModeEditionRow
{
	border :none;
}

.textAlignLeft{
	text-align: left;
}

.btn100{
	width:100%;
	font-weight: bold;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 5px;
}

.btnMainAction{
	font-family:"myFont";
	font-size:15px;
	line-height: 30px;

	background-color: transparent;

	/*border-left: solid 5px #E73C3C;*/
	/*margin-left: 5px;*/

	/*color: white;

	background-color: #444444;
	opacity: 70%;*/
}

.btnMainAction:hover{
	color: #E73C3C;
}

/* TEST APEX CHARTS */

#chart {
 /* max-width: 650px;
  margin: 35px auto;*/
}


/* SWITCH */
.switchContainer{
	height: 32px;
	width: 100px;
	border: solid 1px gray;	
	cursor: pointer;
	border: solid 1px rgb(208,208,208);	
	display: inline-block;
}

.switchContent{
	height: 30px;
	width: 49px;
	color: white;
	text-align: center;
	vertical-align: center;
	font-weight: bold;
	cursor: pointer;
	/*transition: transform 0.6s;*/
	/*border: solid 1px rgb(229,229,229);*/
}



.switchContentLeft{
	float:left;
	background-color: #d9534f;
	
	transition: 0.6s;
  	/*transform: translate(50px, 0);*/
}

.switchContentRight{
	float:left;
	color: black;
	background-color: rgb(229,229,229); /*#f1f1f1;*/

	transition: 0.6s;
	transform: translate(50px, 0);
}