/*Cookie Consent Begin*/
#cookieConsent {
    background-color: rgba(20,20,20,0.8);
    min-height: 26px;
    font-size: 14px;
    color: #ccc;
    line-height: 26px;
    padding: 8px 0 8px 30px;
    font-family: "Trebuchet MS",Helvetica,sans-serif;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 9999;
}
#cookieConsent a {
    color: #4B8EE7;
    text-decoration: none;
}
#closeCookieConsent {
    float: right;
    display: inline-block;
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin: -15px 0 0 0;
    font-weight: bold;
}
#closeCookieConsent:hover {
    color: #FFF;
}
#cookieConsent a.cookieConsentOK {
    background-color: #F1D600;
    color: #000;
    display: inline-block;
    border-radius: 5px;
    padding: 0 20px;
    cursor: pointer;
    float: right;
    margin: 0 60px 0 10px;
}
#cookieConsent a.cookieConsentOK:hover {
    background-color: #E0C91F;
}
/*Cookie Consent End*/



a, a:hover, a:visited, a:active {
 /* color: inherit;   pour ne pas voir les liens */
  text-decoration: none;
}

body {
	cursor: url("cursor.cur"), url("cursor.cur"), default;	
	color: black; /* Couleur du texte de la page */
	font-family: "Comic Sans MS", "Comic Sans", cursive;
	background-image: url("Images/troupeau.png"); 
	text-align: left;
	font-size:18pt;
	margin: 0;
	margin-top : 0;
 }

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) { 
 body {
 font-size:150%;
 }
}

img {
	max-width: 100%;
        height: auto;
}

iframe {
	max-width: 100%;
        height: auto;
}

video {
	max-width: 100%;
        height: auto;
}


.diaporama{
    width: 3840px;
    height: 720px;
    background-color: #EDEDED;
    background-image: url("site.indie.host/j12/Images/diaporama/back.jpg");
    background-size: contain;
    animation: defilement1 12s linear infinite;
}

.clignote {
  color:green;
  
  animation: clignote 0.5s linear infinite;
  text-align: center;
  color: #FF6699;
  text-shadow: 2px 2px 4px #000000;
  font-size:30pt;

}
@keyframes clignote {  
  50% { opacity: 0; }
}


  #toptop {
                position: fixed;
                top: 0px;
		right:0px;		
		left : 0px;
		width:100%;
	margin-bottom: 10px;
				/* Style menu barre principale */
	}
	
/* Style menu barre principale */
.topnav {
 *overflow: hidden;*/
  text-shadow: 2px 2px 4px #000000;
  position: relative;
   width: 100%;
   height: 30px;
   top: 0px;
   bottom: 0px;



}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
   display: none;
}

/* Style navigation menu bloc droite*/
.topnav a {
  background-color: #04AA6D;
  padding: 14px 50px;
  text-decoration: none;
	text-shadow: 2px 2px 4px #000000;
  font-size: 17px;
  font-weight: bold;
  display: block;
  right: 0;
  top: 0;
  bottom: 0;

}

/* icon the hamburger menu */
.topnav a.icon {
  background: black;
  background-color:#FF6699;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;*/
  /*background-image: url("Images/bandeau3.png");*/
  color: black;
}

/* barre avec logo topnave (or home/logo) */
.active {
  background-color: #FF6699;
  color: white;
}


div#longcontent {
  	float:center;
  	box-shadow: 2px 2px 4px #000000;
	width:100%;
        margin:10px 10px 10px 235px;
	background-color:#FFCC00;
	border-radius: 25px;
	margin-left: auto;


}

div#transborder{
	float:center;
	width:90%;
	border-radius: 25px;
	border-width:5px;
	border-style:groove;
	border-color:grey;
	box-shadow: 4px 8px 10px grey;
	margin-left: auto;
 	margin-right: auto;
	margin-bottom: 10px;   /* astuce du margin et du padding pour que les deux divs aient la même longueur. */
	max-width: 100%;
        height: auto;

}

div#transfloating{
	float:left;
	width:20%;
	top:10%;
	font-size: 10pt;


}

div#piedpage {
	border-width:10px;
	border-style:groove;
	border-color:black;
	background-color:#33FF99;
	border-radius: 25px;
	clear:both;	
	font-size:10pt;
	margin-left: auto;
 	margin-right: auto;
	margin-bottom: 10px;


}
	
div#conteneur { /*contient les div "menu" et "contenu" */
	overflow:hidden; /* Ceci assure que la division ne sera pas plus longue que ce que le contenu nécessite. */
                         /* L'astuce du margin et du padding sur les sous-div rend ceci obligatoire. */
	margin-bottom: 10px;
	margin-top: 10px;
	}	

h1 
{
	text-align: center;
	color: #FF6699;
	text-shadow: 2px 2px 4px #000000;
}

h2,h3 {	
text-align: center;
}

h4 
{
 	text-align: center;
 	font-size:2.5em;
 	text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF
}



p  { 	
	text-align: center;
	font-size:14pt;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
}

p.center
{
text-align:center;
margin : 0;
}

p#left
{
text-align:left;
}

p#right
{
text-align:right;
}