/*Reset CSS*/
*{
    margin: 0px;
    padding: 0px;
}

html {
font-size : 100%;
}

body {
width:100%;
margin:auto;
overflow : auto;
text-align : center;
font-family : arial, times, verdana, sans-serif;
color : black;
font-size : 1.1em;
background-COLOR : #D3D3D3;
}

#header {
position : fixed;
top : 0;
width : 100%;
height : 60px;
border : red solid 3px;
background : #303030;
background-image : url("image/gmn.png");
background-repeat : no-repeat;
background-position : 50%;
}

#footer {
position : fixed;
bottom : 0;
height : 1.5em;
border : black solid 1px;
width : 99%;
margin-left: 0.5%;
margin-right: 0.5%;
background : #B3B3B3;
background-image : url("image/xxx.jpg");
background-repeat : no-repeat;
background-position : 50%;
}


nav{
position : relative;
top : 65px;
width : 100%;
border : black solid 2px;
background-color: #B3B3B3;
margin: 0 auto;
font-size : 1.8em;
}

div#col1 {
float : left;
width : 18%;
top: 200px;
}

div#col2 {
float : right;
width : 18%;
top: 200px;
}

div#content {
width : 64%;
margin-left : 18%;
margin-right : 18%;
overflow : hidden;
background-COLOR : white;
}

/* """""""""""""""""""""""""""""""""""""  MENU """""""""""""""""""""" */

/* enlever les puces des rubriques */
nav ul{
    display: none;
    list-style-type: none;
}

/* libellés des menus et sous menus en horizontale*/
nav ul li{
    flex: 1 1 auto;
    text-align: center;  
} 

/* repartition des titres menus et sous menus */
nav a{
    display: block;
    text-decoration: none;
    color: black;
    padding: 3px 0px;
}


/* réapparition des sousb menus au passage de souris */
nav > ul li:hover .sous{
	display: block;
	border :black solid 1px;
}

label, #toggle{
display: none;
background-image : url("image/menu2.png");
background-repeat : no-repeat;
background-position : 50%;
}

nav input[type=checkbox]{
    display: none;
}

nav label 
    {
	 	display: flex;
        justify-content: center; 
        font-size: 40px;
		font-weight: 900;
        color: red;
        cursor: pointer;
		background-color: #B3B3B3;
		border : #800040 solid 2px;
    }

nav input[type=checkbox]:checked + ul{
    display: flex;
    flex-flow : column wrap;
}

/*
nav a:hover{
	color: gold;
}
*/
	
.sous{
    display: flex;
    flex-flow: column wrap;
	z-index: 1000;
}

.sous a:hover{
	color: red;
}



.sous li{
    flex: 1 1 auto;
    text-align: center;
}

.sous a{
    padding: 20px;
    background-color: RGBa(200,200,200,0.8);
}

.boutonmenu a {
cursor: pointer;	
color : white;
margin: 0 auto;
background-color : #000080;
text-decoration : none;
font-size : 1.6em;
font-weight : bold;
text-align : center;
width : 60%;
border : #c0c0c0 outset 20px;
display : block;
}
 
.boutonmenu a:hover {
background-color: RED;
}

/*-----------------------Concerne adaptation dimensions images suivant resolution */

@media screen and (min-width: 1100px){  

	nav {
       font-size : 1.1em;
	}   
	   
	
    nav label, nav input{
        display: none;
    }
	
    nav input[type=checkbox]:checked + ul, nav ul{
        display: flex;
        flex-flow: row wrap;
    }
	
    nav ul li{
        position: relative;
    }
	
    nav > div > ul > li > a{
        color: black;
    }
	
    nav a{
        border-bottom: 2px solid transparent;
    }
	
nav a:hover{
		font-weight: bold;
}
	
    .sous{
        display: none;
        box-shadow: 0px 1px 2px #CCC;
        background-color: white;
		position: absolute;
        width: 100%;
    }
	
    nav > div > ul li:hover .sous{
        display: flex;
        flex-flow: column wrap;
    }
	
    .sous a{
        background-color: white;
    }
	
    .sous a:hover{
        border-bottom: none;
        background-color: RGBa(200,200,200,0.1);
    }

    .deroulant > a::after{
        content:" ▼";
        font-size: 12px;
    }
	
	
.boutonmenu a {
cursor: pointer;	
color : white;
margin: 0 auto;
background-color : #000080;
text-decoration : none;
font-size : 0.8em;
font-weight : bold;
text-align : center;
width : 60%;
border : #c0c0c0 outset 20px;
display : block;
}
	
.boutonmenu a:hover {
background-color: RED;
}	
	
}

 img {
 display: block;
 margin: 0 auto;
 max-width: 100%;
 }
 
 .image-fixed {
position:fixed;
}

video {
  /* override other styles to make responsive */
  width: 65%    !important;
  height: auto   !important;
}


/*------------------------------------------Concerne les caracteres*/
p {
font-family : arial, times, verdana, sans-serif;
margin-right : 8%;
margin-left : 8%;
text-align : justify;
}
h1 {
font-family : arial, times, verdana, sans-serif;
text-align : center;
background-color : transparent;
color : #800041;
}
h2 {
font-family : arial, times, verdana, sans-serif;
text-align : center;
}
h3 {
font-family : arial, times, verdana, sans-serif;
font-style : italic;
text-align : center;
}
h4 {
font-family : arial, times, verdana, sans-serif;
text-align : center;
}
h5 {
font-family : arial, times, verdana, sans-serif;
font-size : 1em;
font-style : italic;
margin-right : 8%;
margin-left : 8%;
text-align : justify;
}
h6 {
font-family : arial, times, verdana, sans-serif;
font-size : 1em;
text-align : center;
}

/*-----------------------Concerne fichiers genie barbe cantique*/


div#cola {
float : left;
width : 30%;
}
div#colb {
float : right;
width : 30%;
}
div#centre2 {
width : 40%;
margin-left : auto;
margin-right : auto;
overflow : hidden;
}

/*-----------------------Concerne fichiers ecussons*/
div#corps1 {
float : left;
width : 15%;
}
div#corps2 {
float : left;
width : 14%;
}
div#corps3 {
float : left;
width : 14%;
}
div#corps4 {
float : left;
width : 14%;
}
div#corps5 {
float : left;
width : 14%;
}
div#corps6 {
float : left;
width : 14%;
}
div#corps7 {
float : right;
width : 15%;
}

iframe {
background : #b5b9bb;
}