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

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




body {  background: #241c17 url() 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('dessin/images/bg_dessin.jpg') center center no-repeat;

    height:100%;

    position:fixed;

    width:100%;

    z-index:-1;

    top:0px;

}





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



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: 0;
}


/* 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:  auto;
             margin-right: auto;
             width:        960px;
             text-align:   left; 
	     min-height:   100%;
	     margin-top:	60px;
	
	     
             
             
}

.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;}




@media only screen and (max-width: 64em) 
{
    #container{ width: 98%; 
    			max-width:  960px;
  				margin-top:	20px;
    
}

  


}
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;
}
  
  

.button2 {
  background-color: #E1D9C1;
  border: 1px;
  color: black;
  padding: 5px 10px;
   width: 100%;
  text-decoration: none;
  margin: 10px 0px;
  cursor: pointer;
}  
.accordion {
    background-color: #E1D9C1;
  border: none;
   border-radius:3px;
  color: black;
  padding: 5px 10px;
   width: 100%;
  text-decoration: none;
  margin: 10px 0px;
  cursor: pointer;
}

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

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

.panel {
  padding: 0px 0px;
  display: none;
  
}



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

#header-cont {  background: #0C0301;
 
                 width:    100%; 
                 position: fixed; 
                 top:      0px; 
                 z-index:  2;
} 



.header  { background: url(images/logo2.png) left no-repeat;
           
           height: 110px;
           width:  960px;
           margin: 0px auto;
}


	

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


#menu  ul li a{


                  text-decoration: none;
                  padding:         0px 0px 0px 23px;	
                  list-style:      none;
                  
                  color:           #FFFFFF;
                  font-size :      12px;
                  font-family:     Raleway, sans-serif;
                  font-weight:     normal; 

}
	

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

.logo-responsive { overflow:hidden; padding-bottom:60px; position:relative; height:0; }
  	
/*  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%;
               outline: none;

}

 #index     {       
               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:     100vh;
                outline: none;
} 


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



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


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



/* MEDIAS CORPS DE PAGE -> DESSIN PEINTURE PORTRAIT JEUNES ATELIERS EVENEMENTS CONTACT LIENS et class des titres et textes et 2MEDIAS
**************************************************************************************************************************************/


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


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

 
   #index     { height: 100%;      
                width: 100%; 
                margin:  110px 0 0 0px;  
                border-radius:20px; 
                outline: none;
               
               
}


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


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



     #menu2 ul li a{
            margin :       110 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(12, 3, 1); /* alternative solide */
 background-color: rgba(12, 3, 1, 0.4);

}
  .opacite2 {
 width: 40%;
 background-color: rgb(#E1D9C1); /* alternative solide */
  background:url('images/bg_carte.jpg');
 text-align:   justify; 
}      
     
}


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


	




.titre {   text-align:   center;
           font-family:  Raleway, sans-serif;
           font-size:      14px;
           color:        #E1D9C1;          
           font-weight:  normal;
           padding:      20px 10px 20px 10px;
           line-height:  20px;
           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:        #E1D9C1;          
           font-weight:  normal;
           padding:      12px 0px 0px 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)           
          
           

}



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

}

.titre1 {   text-align:  left;
           font-family:  Raleway, sans-serif;
           font-size:      14px;
           color:        black;          
           font-weight:  normal;
           padding:      20px 20px 20px 20px;
           
           margin: 0px 20px 0px 20px;
           
              letter-spacing:0.1em;
               
          
          
}

.titre2 {   text-align:  left;
           font-family: Raleway,sans-serif;
           font-size:      14px;
           color:        #E1D9C1;          
           font-weight:  normal;
           padding:      20px 0 15px;
           margin-right: 20 px;
           margin-left:  20px;
              letter-spacing:0.1em;
        

}           




.texte {   padding:      0px 0px 20px 20px;    
           text-align:   justify;          
           font-family:  Raleway, sans-serif;
           font-size:      10px;
           font-weight:  normal;
           color:        #E1D9C1;
           line-height:  20px;
          
           margin-left:  20px;
           margin-right: 20px;
}

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


.texte2 {   padding:    10px 0px 14px 0px;    
           text-align:   left;          
           font-family:  Arial;
           font-size:      14px;
           font-weight:  normal;
           color:        #E1D9C1;
           line-height: 18px;
           border-bottom: 1px solid #A76B30;
           margin-left:  20px;
           margin-right: 20px;
}

.texte3 {   padding:      0px 0px 10px 0px;    
           text-align:   normal;          
           font-family:  Arial;
           font-size:    13px;
           font-weight:  normal;
           color:        #E1D9C1;
           line-height:  15px;
           border-bottom: 1px solid #A76B30;;
           margin-left:  20px;
           margin-right: 20px;
}

.sous-titre {
       letter-spacing:  0.1em;
       word-spacing:0.2em;
       font-size:    11px;
       line-height: 14px;
       font-style:italic;
       text-align:  left; 
      
}   


.citation{ padding:      15px 10px 10px 10px;
           text-align:   center;           
           font-family: Raleway, sans-serif;
           font-size:      13px;
           font-weight:  normal;
           font-style :  italic;
           color:        #E1D9C1;
           line-height:  18px;
    letter-spacing:0.1em;
    word-spacing:0.2em;

}



/* 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(12, 3, 1); /* alternative solide */
 background-color: rgba(12, 3, 1, 0.7);

}


/* 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: 12px;
            padding-bottom: 12px;
            border-top: solid 1px #E1D9C1;
}  

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