* {
	margin: 0; padding: 0; top: 0px; left: 0px; right: 0px;	
         
}

	html, body {
		margin: 0;
		padding: 0;
		height: 100%;
               overflow-x: hidden;
               
               
               
}



body {  background:      url('images/MP.jpg') center center no-repeat; 
                         background-attachment:fixed;
                         background-size:cover; 
                         top: 0px; left: 0px; right: 0px;
                         margin:0;  
	                     padding: 0;  
                                 
                        text-align:center; 
       min-height:   100%; 
       width:    100%;
 
       font-family:  Raleway,sans-serif;
       font-size:    14px;
       color:      #E1D9C1;
       line-height : 17px;
} 



#fixedbg{

    background:url('') center center no-repeat;

    height:100%;

    position:fixed;

    width:100%;

    z-index:-1;

    top:0;

}

 #background-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  
  } 
  
 

 #background-video {
 
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  
  } 
  
  .tm-banner-section {

  display: -webkit-box;
  height: 0px ;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  overflow: visible;
  margin-top:0%;
  
}




* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  !margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: inline-block;
}

/* Next & previous buttons */
.prev, .next {

  !display: block;
  cursor: pointer;
  position: ;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  
  right: 10px;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.texto {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
	
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: none;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

=============================

.slideshow {
  
  max-width: 1200px;
  position: relative;
  margin: auto;
}
.slide {
  !position: absolute;
  animation-iteration-count: infinite;  
  animation-fill-mode: forwards;
  animation-duration: 9s;
  opacity: 0;
}
.slide:nth-child(1) {
  animation-name: animate1;
}
.slide:nth-child(2) {
  animation-name: animate2;
}
.slide:nth-child(3) {
  animation-name: animate3;
}
@keyframes animate1 {
  0% { opacity: 1; }
  33.333% { opacity: 1;}
  41.666% { opacity: 0; }
  91.666% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes animate2 {
  0% {   opacity: 0;}
  33.333% { opacity: 0; }
  41.666% { opacity: 1; }
  70% { opacity: 1;  }
  83.333% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes animate3 {
  0%  { opacity: 0; }
  70% {opacity: 0;}
  78.333% { opacity: 1; }
  91.666% { opacity: 1; }
  100%{ opacity: 0; }
}






===============bouton


}
input[type=button], input[type=submit], input[type=reset] {
  background-color: #371d0b;
  border: none;
    border-radius:3px;
  color: #E1D9C1;
  padding: 5px 10px;
   width: 80%;
  text-decoration: none;
  margin: 10px 0px;
  cursor: pointer;
}
  
 .button1 {
  background-color: #E1D9C1;
  border: 1px;
  color: black;
  padding: 5px 10px;
   width: 100%;
  text-decoration: none;
  margin: 10px 0px;
  cursor: pointer;
}   

.button2 {
  	background-color: #000734;
  opacity: 0.80;
  border: none;
   border-radius:20px;
  color: grey;
  padding: 5px 5px;
   width: 200px;
  text-decoration: none;
  margin: 10px 0px;
  cursor: pointer;
}  

.button3 {
  	
  	background-color: transparent;
  !opacity: ;
  position: absolute;
  border: none;
   border-radius:10px;
  color: grey;
  padding: 0px 30px 0px 0px;
 width: 100%;
  text-decoration: none;
  text-align: right; 
 
  margin: 0px 0px 0px 0px;
  !cursor: pointer;
   box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.2);
}  

.accordion {
	background-color: #25395a;
  !opacity: 0.80;
  border: none;
   border-radius:10px;
  color: #D3D3D3;
  padding: 20px 20px;
   width: 100%;
  text-decoration: none;
  margin: 0px 0px;
  cursor: pointer;
 
}

.active, .accordion:hover {
  
  
}
.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 0px;
}

.active:after {
  content: "\2212";

}


.accordion2 {
	
	background-color:#D3D3D3;
  !opacity: 0.80;
  border: none;
   border-radius:10px;
  color: #25395a;
  padding: 20px 20px;

   width: 100%;
  text-decoration: none;
  margin: 0px 0px;
  cursor: pointer;
  

 
}

.active2, .accordion2:hover {
  
  
}
.accordion2:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 0px;
  
}

.active2:after {
  content: "\2212";
}

.panel {
  padding: 10px 10px;
  display: none;
  background-color:#D3D3D3;
  !opacity: 0.80;
  border-radius: 10px;
 
  
}

.panel1 {
  padding: 0px 0px;
  display: none;
  background-color:;
  !opacity: 0.80;
  border-radius: 10px;
  
 
  
}

.panel2 {
  padding: 10px 10px;
  display: none;
  background-color: #25395a;
  !opacity: 0.80;
  border-radius: 10px;
 
  
}

ol.b {
  list-style-type: circle;
 padding: 0px 0px 0px 10px
}

ol.c {
  list-style-type: circle;
  padding: 0px 0px 0px 20px
}


/* Menu Top Nav

Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 0px 0px;
  text-decoration: none;
  font-size: 17px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: ;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {

    position:;
    float: left;
  overflow: hidden;
   
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}


/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: relative ;
 padding: 3px 1px 0px 1px;
  background-color: white;
  width: 100%;
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.2);
   border-radius: 5px;
  z-index: 1;
  opacity: 90%;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 0px 0px;
  text-decoration: ;
  display: block;
  text-align: left;  
   border-radius: 5px;
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.2);
 
}





/* Add a dark background on topnav links and the dropdown button on hover */
!.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  !background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display:block;
  
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}





@media screen and (max-width: 50em) {
* {
		box-sizing: border-box;
	}


html {
              -webkit-text-size-adjust: 100%;
              -ms-text-size-adjust: 100%; 

}


/* passer body (et tous les �l�ments de largeur fixe) en largeur automatique */

	body {position: relative;
		width: auto;
		margin: 0;
		padding: 0px;
}


/* fixer une largeur maximale de 100% aux �l�ments potentiellement probl�matiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	video {
		max-width: 100%;
}

/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* c�sure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word;/* passage � la ligne forc� */
}

        code,
	pre,
	samp {
		white-space: pre-wrap; /* passage � la ligne sp�cifique pour les �l�ments � ch�sse fixe */
}


	

.hide_mobile {
		display: none !important;
}
	

.slicknav_menu {
	display:none;
}


.js #menu { display:none;
}
	
.js .slicknav_menu {
		display:block; position: center; width: 100%; top: 0; z-index:1;
}


#header-cont { display: none;
}


.header { width: 100%;  

}




}
 
/*  CONTAINER  et @MEDIAS
********************************************************************/


#container { position: relative; /* on positionne le conteneur */
             margin-left:  100px;
             
             margin-right: auto;
             width:        100%;
             text-align:   left; 
	     min-height: ;
             
            margin-top:	0.5%; 
}



@media only screen and (max-width: 60em) 
{
    #container{  margin-top:	0.5%; 
    			
     			
    			
    }
}               

@media only screen and (max-width: 1000em) 
{
    #container{ width: 		98%; 
    			max-width:  1024px;
     			 margin-top: 0.5%px;
     			  margin-left:  auto;
    }
}                                        



.video-responsive { overflow:hidden; padding-bottom:56.25%; position:relative; height:0; }

.video-responsive iframe { left:0; top:0; height:100%;  width:100%; position:absolute;  border-radius: 10px;}



/*  HEADER LOGO et MENU PRINCIPAL
********************************************************************/


#header-cont {  !background: #191F48;
				!background: linear-gradient(90deg, rgba(196,142,2,1) 0%, rgba(1,8,57,1) 0%, rgba(101,62,3,1) 97%);
				 height: 145px;
                 width:    100%; 
                 position: fixed; 
                 top:      0px; 
                 z-index:  1;
                 padding: 20px 10px
               
              
                
	
	
} 



.header  { background: url(images/!.png) left no-repeat;
           
           
 
           height: 50px;
           width:  99%;
          margin-top: 45px ;
}



#menu {   
           float:   right ;
          
           
            
}
 
#menu ul li {      margin-top:   -3px;
                   line-height:  15px;
                   list-style:    none;
                   text-align:   right;
}

#menu  ul li a{

                  text-decoration: none;
                  padding:       5px 12px 5px 12px;	
                  list-style:      none;
                  
                  color:        #364b74;
                  font-size :      13px;
                  font-family:     verdana, sans-serif;
                  font-weight:     normal; 

}
	

#menu ul li a:hover{
                  color:    grey    ;
                  text-decoration: none;
                  font-weight:     normal;
}

.logo-responsive {float: left; overflow:hidden; padding-bottom:100px; position:relative; height:0px; 

}





       


/*  MAIN -> tableau en haut du MENU2 des enseignantes
********************************************************************/
#main {      position:       relative;
             margin :        0px auto;
             overflow:       auto;
             padding:        0px;
	     min-height:     100%;          
            
}

#maingauche { 
           position:     relative;
           width:        960px;
           overflow:     auto;
            margin :      0px 0px 0px 0px; 
           min-height:   100%;
}


#menu2 {    float:          left;
            width:          460px;
            position:     relative;
            margin-top:     10px;           
}



#menu2  ul li {  text-align: center;
                  
                  list-style: none ;
}



#menu2 ul li a{
            margin :       0 0 0 0px; 
            padding :      0px 10px 0px 10px;
            font-family:   Raleway, sans-serif;
            font-weight:   normal;
            font-size:     12px;
            text-decoration: none;
            text-align:    center;
            color:         #FFFFFF;    

}
	


#menu2 li a:hover{
                  color:         #A76B30;
                  text-decoration: none;
                  font-weight :    normal;
}

#dessin2 { 
               
               margin :      10px 0px 0px 0px; 
               width:        460px;
               border-radius:10px;
               position:     relative;
               float:   left;
               border-collapse: collapse; 
               font-family: Raleway,sans-serif;
               font-size:     14px;
               font-weight: normal;
               color:       #E1D9C1;
               text-align:  left;
               min-height:   100%; 
}
	     
 #dessin1 {       
               position:    relative;  
               margin-top:  10px;
               border-radius:10px;
               border-collapse: collapse; 
               float:       left;
               width:       460px;
               font-family: Raleway, sans-serif;
               font-size:     14px;
               font-weight: normal;
               color:       #E1D9C1;
               text-align:  left;
               min-height:     100%;
}

 #index     {       
               position:   relative;  
               margin-top:  10px;
               border-radius:0px;
               border-collapse: collapse; 
               float:      left;
               width:       100%;
               font-family: Raleway,sans-serif;
               font-size:     14px;
               font-weight: normal;
               color:       #E1D9C1;
               text-align:  left;
               max-height:     100%;
} 


/* LOGO  MENU PRINCIPAL @MEDIAS
********************************************************************/



@media screen and (max-width: 64.25em) {


	/* #menu is the original menu */
	.js #menu {
		display: none;
	}
	
	.js .slicknav_menu {
		display:block;
	}
}
	

@media screen and (min-width: 64.3em) {


	/* #menu is the original menu */
	
	.js .slicknav_menu {
		display:none;
	}
}

/* MEDIAS CORPS DE PAGE
**************************************************************************************************************************************/


 @media only screen and (max-width: 40em) 
{
      #dessin2 { 
              
               width:  100%; 
               height: 100%;
               margin: 10px 0px 0px 0px;
               border-radius: 20px;
               
               
                
              
}


      #dessin1 {  
               
                width: 100%; 
                margin: 10px 0px 0px 0px;
                border-radius:20px; 
               
              
}

 
   #index     { height: 100%;      
                width: 100%; 
                margin:  10px 0 0 0px;  
                border-radius:0px; 
               
               
}


     #maingauche {
                  width: 100%; margin:  0px 0 0 0px;
}


       #menu2  {  display: block; 
                  position: ; 
                  width: 100%;  
                  margin:  0px 0 0 0px;
                  z-index:1; 
}   
               
 
      #menu2  ul li {  text-align: center;
                  
                       list-style:     none ;
}                       



     #menu2 ul li a{
            margin :       0px 0 0 0px; 
            padding :      0px 2px 0px 2px;
            font-family:  Raleway, sans-serif;
            font-weight:   normal;
            font-size:     10px;
            text-decoration: none;
            text-align:    center;
            color:         #FFFFFF;    
 
}  
     .texte {   padding:      0px 0px 20px 20px;    
           text-align:   justify;          
           font-family: Raleway, sans-serif;
           font-size:      14px;
           font-weight:  normal;
           color:        #E1D9C1;
           line-height:  25px;
          
           margin-left:  20px;
           margin-right: 20px;
           
}
.titresms {   text-align: left;
           font-family:  Raleway, sans-serif;
           font-size:      14px;
           color:        #E1D9C1;          
           font-weight:  normal;
           padding:      30px 20px 15px 20px;

}

.opacite {
 width: 40%;
 background-color: rgb(white); /* alternative solide */
 background-color: rgba(white);

}
        
     
}


a{
          text-decoration: none;
          font-weight:     normal;
          color:           #000734;
}


	
a:hover{
                 color:           #A76B30;
                 text-decoration: none;
                 font-weight:     normal;
}



.titre {   text-align:   center;
           font-family:  arial, sans-serif;
           font-size:      20px;
           color:        #364b74;          
           font-weight:  normal;
           padding:      30px 5px 20px 5px;
           line-height:  25px;
           !letter-spacing:0.1em;
           !word-spacing:0.2em;
           border-bottom: 1px solid #A76B30;
          
           

}

.titre4 {   text-align:   center;
           font-family:  arial, sans-serif;
           font-size:      20px;
           color:       ;          
           font-weight:  normal;
           padding:      30px 5px 20px 5px;
           line-height:  25px;
           !letter-spacing:0.1em;
           !word-spacing:0.2em;
           !border-bottom: 1px solid #A76B30;
          
           

}



.titremenu {   text-align:   left;
           font-family:  Raleway, sans-serif;
           font-size:      14px;
           color:        #E1D9C1;          
           font-weight:  normal;
           padding:      10px 10px 60px 8px;
           line-height:  20px;
           letter-spacing:0.1em;
           word-spacing:0.2em;
         ! border-bottom: 1px solid #A76B30;
           background-color: rgba(12, 3, 1, 0.7);
           
           
  }         
           
.titremenu2 {   text-align:   left;
           font-family:  Raleway, sans-serif;
           font-size:      14px;
           color:        #000734;          
           font-weight:  normal;
           padding:      10px 0px 0px 15px;
           line-height:  20px;
           letter-spacing:0.1em;
           word-spacing:0.2em;
         ! border-bottom: 1px solid #A76B30;
           background: #191F48; 
           !background: linear-gradient(90deg, rgba(196,142,2,1) 0%, rgba(1,8,57,1) 0%, rgba(101,62,3,1) 97%);     
           !opacity:     0.9;
         height:     120px; 
           

}




.titresms {   text-align: left;
           font-family:  Raleway, sans-serif;
           font-size:      16px;
           color:       #000734;          
           font-weight:  normal;
           padding:      30px 20px 15px 20px;
              letter-spacing:0.1em;
           word-spacing:0.2em;

}

.titre1 {   text-align:  center;
           font-family:  Raleway, sans-serif;
           font-size:      13px;
           color:        #000734;          
           font-weight:  normal;
            border-bottom: 1px solid #A76B30;
            margin: 0px 25px 0px 25px;
            padding: 20px 0px 0px 0px;  
              letter-spacing:0.1em;
              
               
          
}

.titre2 {   text-align:  left;
           font-family: Raleway,sans-serif;
           font-size:      15px;
           color:         #000734;          
           font-weight:  normal;
           padding:      30px 0 15px;
           margin-right: 0 px;
           margin-left:  0px;
              letter-spacing:0.1em;
               border-bottom: 1px solid #A76B30;
         

}           

.titre3 {   text-align:  center;
           font-family: verdana,sans-serif;
           font-size:      24px;
           color:         #ebc634;          
           font-weight:  normal;
           padding:      30px 0 15px;
           margin-right: 0 px;
           margin-left:  0px;
              letter-spacing:0.1em;
               !border-bottom: 1px solid #A76B30;
         

}           




.texte {   padding:      10px 0px 20px 0px;    
           text-align:   center;    
           font-family:  arial, sans-serif;
           font-size:      15px;
           font-weight:  normal;
           color:        #D3D3D3;
           line-height:  20px;
          !border-bottom: 1px solid #A76B30;
           margin-left:  0px;
           margin-right: 0px;
}

.texteatelier {   padding:      15px 0px 20px 0px;    
                    
           font-family:  Raleway,sans-serif;
           font-size:      13px;
           font-weight:  normal;
           color:        #000734;
           line-height:  20px;
           border-bottom: 1px solid #A76B30;
           margin-left:  20px;
           margin-right: 20px;
}


.texte1 {   padding:      20px 0px 20px 0px;    
           text-align:   justify;          
           font-family:  arial, sans-serif;
           font-size:      15px;
           font-weight:  normal;
           color:         #000734;
           line-height:  20px;
           !border-bottom: 1px solid #A76B30;
           margin-left:  20px;
           margin-right: 20px;
}

.texte11 {   padding:      0px 0px 0px 0px;    
           text-align:   center;          
           font-family:  arial, sans-serif;
           font-size:      15px;
           font-weight:  normal;
           color:         #000734;
           line-height:  20px;
           !border-bottom: 1px solid #A76B30;
           margin-left:  20px;
           margin-right: 20px;
}

.texte12 {   padding:      0px 0px 0px 0px;    
           text-align:   center;          
           font-family:  arial, sans-serif;
           font-size:      12px;
           font-weight:  normal;
           color:         ;
           line-height:  20px;
           !border-bottom: 1px solid #A76B30;
           margin-left: 60px;
           margin-right: 0px;
}
.texte13 {   padding:      0px 0px 0px 0px;    
           text-align:   center;          
           font-family:  arial, sans-serif;
           font-size:      12px;
           font-weight:  normal;
           color:         #364b74;
           line-height:  20px;
           !border-bottom: 1px solid #A76B30;
           margin-left: 60px;
           margin-right: 0px;
}




.texte2 {   padding:      20px 0px 20px 0px;    
           text-align:   justify;          
           font-family:  arial, sans-serif;
           font-size:      15px;
           font-weight:  normal;
           color:         #000734;
           line-height:  20px;
           border-bottom: 1px solid #A76B30;
           margin-left:  0px;
           margin-right: 0px;
}

.texte21 {   padding:      20px 0px 20px 0px;    
           text-align:   left;        
           font-family:  arial, sans-serif;
           font-size:      15px;
           font-weight:  normal;
           color:         #000734;
           line-height:  20px;
           border-bottom: 1px solid #A76B30;
           margin-left:  0px;
           margin-right: 0px;
}

.texte22 {   padding:      20px 0px 20px 0px;    
           text-align:   left;        
           font-family:  arial, sans-serif;
           font-size:      15px;
           font-weight:  normal;
           color:         #000734;
           line-height:  20px;
      
           margin-left:  0px;
           margin-right: 0px;
}

.texte3 {   padding:    10px 0px 10px 0px;    
           text-align:   right;          
           font-family:  verdana, sans-serif;
           font-size:      12px;
           font-weight:  normal;
           color:        #D3D3D3;
           line-height:  15px;
           !border-bottom: 1px solid #A76B30;
           margin-left:  20px;
           margin-right: 00px;
           
}

.texte31 {   padding:    0px 0px 0px 0px;    
           text-align:   right;          
           font-family:  verdana, sans-serif;
           font-size:      12px;
           font-weight:  normal;
           color:         grey;
           line-height:  15px;
           !border-bottom: 1px solid #A76B30;
           margin-left:  20px;
           margin-right: 00px;
           
}

.texte4 {   padding:      10px 0px 10px 0px;    
           text-align:   left;          
           font-family:  verdana, sans-serif;
           font-size:      14px;
           font-weight:  normal;
           color:         #D3D3D3;
           line-height:  15px;
           !border-bottom: 1px solid #A76B30;
           margin-left:  20px;
           margin-right: 20px;
           
}
.texte5 {   padding:    10px 0px 0px 0px;    
           text-align:   left;          
           font-family:  verdana, sans-serif;
           font-size:      12px;
           font-weight:  normal;
           color:        #D3D3D3;
           line-height:  15px;
           !border-bottom: 1px solid #A76B30;
           margin-left:  0px;
           margin-right: 0px;
           
}

.sous-titre {
       letter-spacing:  0.05em;
       word-spacing:0.1em;
       font-size:    11px;
       line-height: 14px;
       font-style: italic;
       margin-left:  18px;
           
      
}   


.citation{ padding:      15px 10px 10px 10px;
           text-align:  left;           
           font-family: verdana, sans-serif;
           font-size:      20px;
           font-weight:  normal;
           !font-style :  italic;
           color:        #D3D3D3;
           line-height:  25px;
    !letter-spacing:0.1em;
    !word-spacing:0.2em;

}


.backslide{
  
  display: block;
  position: relative;
   padding-top: 80px ;
  padding-bottom: 80px ;
  padding-right:30px ;
   padding-left:30px ;
  background-color: #191F48;
  opacity: 1;
  height: ;
  bottom: 0;
  box-sizing: border-box;
  margin-top: 0px;
  margin-bottom: 0px;
background:      url('images/img9.jpg') top center no-repeat; 
}
.index_backslide{
  
  display: block;
  position: relative;
   padding-top: 80px ;
  padding-bottom: 80px ;
  padding-right:30px ;
   padding-left:30px ;
  background-color: #191F48;
  opacity: 1;
  height: ;
  bottom: 0;
  box-sizing: border-box;
  margin-top: 0px;
  margin-bottom: 0px;
background:      url('images/img11.jpg') top center no-repeat; 
}



.back{
  
  display:block;
  position: center;
  padding:10px;
  background-color: #25395a;
  opacity: 100%;
  width:  100%;
  height: relative;
  bottom: 0%;
  box-sizing: border-box;
  border: none;
  !margin-top: 5%;
  border-radius: 10px;
}

.back2{
  
  display:block;
  position: center;
  padding:10px;
  background-color: #D3D3D3;
  opacity: 100%;
  width:  100%;
  height: relative;
  bottom: 0%;
  box-sizing: border-box;
   border: none;
  !margin-top: 5%;
  border-radius: 10px;
}

.back3{
  
  display: block;
  position: relative;
  padding:5px;
  background-color:  #3b5c91;
  opacity: 0.;
  width:  100%;
  height: relative;
  bottom: 0%;
  box-sizing: border-box;
  !margin-top: 5%;
}



.back4 {
  	
  	background-color: transparent;
  !opacity: ;
  position: relative;
  border: none;
   border-radius:5px;
  color: grey;
  padding: 0px 7px 3px 0px;

 max-width:100% ;
  text-decoration: none;
  text-align: right; 
 
  margin: 0px 0px 0px 0px;
  !cursor: pointer;
   box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
}  

.footer{
  
  display:;
  position: bottom;
  padding:10px;
  background-color: #25395a;
 !opacity: 0.85;
  width:  100%;
  height: relative;
  bottom: 0%;
  box-sizing: border-box;
  margin-top: 5%;
}

.footer2{
  
  display: flex;
  position: relative;
  padding:10px;
  background-color: #000734;
  opacity: 0.85;
  height: 60%;
  bottom: 0;
  box-sizing: border-box;
  margin-top: 20%;
}
           
  }         



/* CLASS -NOM DES ENSEIGNANTES- SuZIE DELISLE -NB petits caract�res - class OPACITE
*************************************************************************************/


.sd {      padding:     0px 0px 5px 100px;
           text-align:  left;
           font-family: Raleway, sans-serif;
           font-size:     12px;
           color:       #E1D9C1;          
           font-weight: normal;
           font-style :  italic;
}
     
.nb {
           padding:     0px 0px 10px 20px;
           text-align:  left;
           font-family: Raleway, sans-serif;
           font-size:   11px;
           color:       #E1D9C1;          
           font-weight: normal;
           font-style :  italic;
      
}

.opacite {
 width: 70%;
 background-color: rgb(white); /* alternative solide */
 background-color: rgba(white);

}


/* BAS DE PAGE
****************************************************/
@media only screen and (max-width: 60em)  
{#footer, #footer2 { padding-bottom: 10px;
}
}
 
#footer2 {    
            
	    line-height : 15px;
            font-family: Raleway, sans-serif;
            font-size:   10px;
            font-weight: normal;
            color:       #E1D9C1;
            text-align:  center;
            padding-top: 15px;
            padding-bottom: 15px;
            border-top: solid 1px #E1D9C1;
}  

#footer {  
        margin-top: 12px; 
        padding-bottom:12px;
	    line-height : 15px;
            font-family: Raleway, sans-serif;
            font-size:   10px;
            font-weight: normal;
            color:       #E1D9C1;
            text-align:  center;
        
} 
           
         

#footer a{
          text-decoration: none;
          font-weight:     bold;
          color:           #FFFFFF;
}


	
#footer a:hover{
                 color:           #E2C58D;
                 text-decoration: none;
                 font-weight:     bold;
                 text-transform:  uppercase;
}