body{
  margin: 0;
  padding: 0;
  background-color:black;
  background-image:url("/imgs/backgroundGorgouille.jpg");
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-position:center center;
  background-size: cover;
  font-family: 'EB Garamond', serif;
  font-size:2.vw;
}

@font-face {
    font-family: 'Rialto';
    src: url('Rialto.woff2') format('woff2'),
    url('Rialto.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* UTILITAIRES */

.zIndexFirst{ z-index:10;}

a{color:White;}
a:hover{text-decoration:none;color: Grey;}


.header{ text-align:center;}
#base{background-color:Black;min-height:140px;}

/*inscription*/

.formulaire label{
  color: White;
  font-size:2em;
}

/*nav bar */

.navbar-togglerCategories { background:White!important; border-radius:0; border:none; color:Black; padding:2px auto; font-weight:600 ;text-align:left; width:150px;}

.navbar { font-size:1vw; padding:0;z-index: 200;}
.gorgnav{
	position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 138px;
    z-index: 200;
	background-color:#6c757d;
    /*background-color: #F60;*/
	font-size:2em;
  }
  .gorgnav .navbar ul{width: 100%;display: contents;}
  .gorgnav .navbar ul li a{}
  .gorgdrop{
    top: 35px;
    left: 0;
    position: block;
    min-width: 550px;
	z-index: 10;
	max-height: 60vh;
	overflow: auto;
	background-image: url("{{ pathLocal }}../../../imgs/backgroundImmemory.png")
  }
  .gorgdrop .dropdown-item{
    display: inline-block;
  }
  .gorgdrop a{
    min-width: 180px;
    width: 180px;
  }

  .dropdown-menu{z-index:10;}

 /*breadcrumb*/
 .breadcrumb{
    background-color:#666;
	border-radius:0;
	margin-bottom:0;
	padding:0 1rem;
	font-size:2vw;
  }

  /* fixer menu dans pages elements*/
  .breadcrumbPages{
	position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 140px;
    z-index: 500;
	background-color:#6c757d;
    /*background-color: #F60;*/
  }

  .breadcrumb ul{
    list-style:none;
    margin:0;
    padding:0;
  }
  .breadcrumb li{
    position:relative;
    display:inline-block;
    padding:0 10px;
  }

 /* menu Categories*/
.menuCategories{ width:80%; margin:0 auto; text-align:center;background:#F60;}
.menuCategories a {border-radius:4px; border:1px solid #F60; box-shadow: 0px 0px 20px #F60; background:#F60; color:#FFF;}
.menuCategories a:hover {border-radius:4px; border:1px solid #F60; box-shadow: 0px 0px 20px #F60text-decoration:none;; background:#C30; color:#900;}

.navbar a{color:white;}
.dropdown-menu a{ color:black; }
.dropdown-menu a:hover{ color:White; background:rgba(0,0,0,0.5); }
 /*search button*/

.form-control{margin:auto;box-sizing: border-box;}
.enTete{ display:inline-block;}

#intro{ width:96%;margin:2% auto; padding:2%;overflow:auto; background-image: url("{{ pathLocal }}../../../imgs/backgroundImmemory.png") ; background-repeat:repeat;}
#intro p{ font-size:2vw;}
.fondintro{ width:100%;margin:0 auto; padding:2% ;  background-image: url("{{ pathLocal }}../../../imgs/backgroundImmemory.png") ; background-repeat:repeat;}
.edition { background-color:#666;  background-image: url("{{ pathLocal }}../../../imgs/backgroundImmemory.png") ; background-repeat:repeat;}
.titre{ text-align:center;}
.titre h1{ color:#C0C0C0; font-family: 'Rialto';font-size:4vw;}

/*table*/
.menuTop{/* z-index:800!important; position: -webkit-sticky;  position: sticky; top: 180px; height:2em; font-size:1.6em; line-height:1.8em;*/}
table thead, table td, table th{ font-size:1em;font-weight:200;padding:0!important; z-index:800;}
th{background-color:#000; text-align:center; color:#FFF; font-weight:bold; z-index:800!important;}
td{ background-color:#999;border:2px solid black; text-align:center; z-index:800!important;}
td .actions {background-color:#FFF;text-align:left;color:#900; z-index:800!important;}
tbody{ text-align:left; z-index:800!important;}
/*deco table*/
.navCDRom{ width:100%; height:100%;}
.milieuCadre{background:White; min-width:20px;  min-height:20px;}

/**/
.menuMembre{color:White; text-align:center;}
.menuAdmin{color:White; text-align:center;}


.menuElementsTop{position: -webkit-sticky; /* Safari */ position: sticky;top: 140px; z-index:1000;}

.btn-primary{border-radius:4px; border:1px solid #F60; box-shadow: 0px 0px 20px #F60; background:#F60; color:#FFF;}
.btn-primary:hover {border-radius:4px; border:1px solid #F60; box-shadow: 0px 0px 20px #900; background:#C30; color:#FFF;}


/*
A jeter
.btnImmemoryShow{ background:Black; text-transform:capitalize;color:White;font-size:1.2vw; font-weight:400; border-radius:0;  margin:1%;}
.btnImmemoryShow:hover{ background:White;color:Black;}
.btnImmemoryShowAdmin{background:Black; text-transform:capitalize;color:White;font-size:1vw; font-weight:200; border-radius:0;}
.btnImmemoryShowAdmin:hover{ background:White;color:Black;}
.btnImmemoryShowAjout{background:White; text-transform:capitalize;color:Black;font-size:1vw; font-weight:200; border-radius:0;}
.btnImmemoryShowAjout:hover{ background:Black;color:White;}
*/

.btnImmemory{ background:Black;color:White;font-size:1.2vw; font-weight:600; border-radius:0;  margin:1%;}
.rouge{background:#F00;}
.vert{background:#3C0;}
.brun{background:#C03;}
.blanc{background:#666;}
.btnImmemory:hover{ background:WHite;color:#000;}


.categorie_details{ color:white; background:Black; font-weight:600;}
.textImmemory{ max-height:200px; overflow:scroll; background:White; text-align:left;}



.zones, .timers{
  list-style: none;
  padding: 0;
  margin: 0;
}
.zones li, .timers li{
  margin: 10px 0;
}
.plier{
  display: none;
}

/* PAGE accueil*/
.element{
  width: 128px;
  height: 200px;
  float: left;
  shape-outside:circle(100%) border-box;
  margin-right:1em;
}

.lettrine{font-size:2vw;font-weight:bold;line-height:1em;}

.menuMembre{ color:white; font-size:1.5vw;}



	.centrerIMG{
		text-align:center;
		width:300px;
		height:225px;}

/*SHOW*/

.menuShow{ display:block;}
/*PAGE SHOW*/
.textShow{color:black; font-size:1.4vw;}
.details{font-size:1.2vw;}
.details ul li {display:inline-block;list-style:none;margin:0 10px; background:Black; color:White;}
.details ul li:last-child{}
.categorie_detailsShow{ background:Black;color:White; padding:4px;}
 ul li {list-style:none;}
/*PAGE SHOW ADMIN*/

.textShowAdmin{ color:black; font-size:1.4vw;}
.textShowAdmin #txt{background:White;}
.textShowAdmin h3{ background:Black;color:White;}



  .cent{width:100%;}
  .titreElements{ color:#FFF!important; font-weight:400!important;font-size:1.2vw; float:right!important;}

@media (max-width: 700px) {
body{ font-size:4vw;}
.mObile{ display:none;}
.menuMembre{font-size:3vw;}
#intro p{ font-size:4vw;}
.textShow{font-size:6vw;}
.textShowAdmin{font-size:6vw;}


.btn{font-size:4vw;}

.navbar, .titreElements{ font-size:4vw; padding:0;}
.details{font-size:3vw;}
.details ul li { width:100%}
 .categorie_detailsShow{}
 .form-control {}
  .titre h1{font-size:8vw;}

  .lettrine{font-size:4vw;line-height:1.6em;}
  .pagination{ display:none;}
  .breadcrumb ul li{ width:100%;}

  .gorgnav .navbar ul{font-size:3vw;}
/* TABLEAU RESPONSIVE https://medium.com/@vanessaasse/rendre-un-tableau-responsive-5ed9ab7bb3ed */
	.table{font-size:4vw}
	.table td, .table th{font-weight:400;padding:0!important;}
    .table thead {
    display: none;
    }

    .table tr{
    display: block;
    margin-bottom: 4px;
    }

    .table td {
    display: block;
    text-align: right;
    }

	.centrerIMG{
		text-align:center;
		width:300px;
		height:225px;}

    .table td:before {
    content: attr(data-label);
    float: left;
    color:#00;
  	font-weight:800;
  	text-transform:capitalize;
    }


    }