body { 

background-color:#000; 
color : #fff; 
padding : 3px;
letter-spacing: 1px;  
font-family: new_ciclefina;
font-size:  1.4em;
line-height:  1.1em;   } 


#headline {

  font-family: new_ciclefina;
  background-color:#000; 
  position:fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  color: #fff;
  z-index: 1;
  margin: 0px;
  padding:4px;    }
  


.logo {

    padding-top: 42px;  }


.rspvimage {
   
   position: relative;
   list-style: none;
   overflow: hidden;
   width: 100%;
   height: 100%;
   padding:0;
   margin: 0;  }



.rspvimage  img {

   display: block;
   height: auto;
   float: left;
   width: 100%;
   border: 0;  }


.boutonmenu  { 

   position:relative;
   width:38px;
   height:38px;
   margin: 2px;
   padding: 1px;
   border: 3px solid #fff;
   z-index:3;
   cursor: pointer;
   border-radius: 62px; }

.boutonoutils  { 

   position:relative;
   max-width:100%;
   height:32px;
   margin: 4px;
   padding: 1px;
   border: 3px solid #fff;
   z-index:3;
   cursor: pointer;
   background-color: #000;
   border-radius: 52px; }

.boutonzone   {

  
   position:relative;
   max-width:100%;
   height:32px;
   border: 3px solid #fff;
   margin: 4px;
   padding: 1px;
   cursor: pointer;
   border-radius: 52px;
   z-index: 1; }





.blog   {

   position: relative;
   top: -8px;
   left: 5px;
   width: 220px;
   height: 114px;
   border-radius: 18px;
   background-color: #000;
   color: #fff; 
   font-size: 1.2em;
   text-decoration: none;
   padding-top: 11px;
   padding-bottom: 5px;
   padding-left: 10px;
   padding-right: 10px;
   font-weight: bold;  }


.textes2  {

font-family: new_ciclefina;
font-size: 22px;
letter-spacing: 2px;
text-align: justify;   }



ul  {

font-family: new_ciclefina;
font-size: 22px;
color:#cc0000:
letter-spacing: 2px;
text-align: justify;   }



.topicindex  {

font-family: new_ciclefina;
font-size: 30px;
color:#66CCFF;
text-shadow: 1px 1px 1px #fff;
letter-spacing: 7px;
text-align: left; }



.topic  {


  text-decoration: none;
  padding: 1%;
  color:#000;
  font-size: 18px;
  text-align: justify;
  color: #fff;
  text-align: right;  }

.titre  {

color:#3399cc;
font-size: 26px;  }





.sliderframe { width: 100%; height: auto; }

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }

}

 

div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  height: auto;
  margin: 0px;
  top:1200px;
  left: 0px;
  text-align: left;
  font-size: 0px;
  animation: 14s slidy infinite; }




/*SLIDER HAUT ECRAN*/

.rspvimage {
   
   position: relative;
   list-style: none;
   overflow: hidden;
   width: 99%; }

.rspvimage  li {
   
  -webkit-backface-visibility: hidden;
   position: absolute;
   display: none;
   width: 100%;
   left: 4;
   top: 0;  }

.rspvimage  li:first-child {
   
   position: relative;
   display: block;
   float: left;  }


.rspvimage  img {

   display: block;
   height: auto;
   float: center;
   width: 100%;
   border: 0px;  }

@-moz-keyframes monanim  {

0% { opacity: 0;} 
100% { opacity: 1; }
0% { opacity: 0;} 
}

@-webkit-keyframes monanim  {

0% { opacity: 0;} 
100% { opacity: 1; }
0% { opacity: 0;} 
}

@-o-keyframes monanim  {

0% { opacity: 0;} 
100% { opacity: 1; }
0% { opacity: 0;} 
}

@-ms-keyframes monanim  {

0% { opacity: 0;} 
100% { opacity: 1; }
0% { opacity: 0;} 
}

@keyframes monanim  {

0% { opacity: 0;} 
100% { opacity: 1; }
0% { opacity: 0;} 

}


img { border: none; }


.rslides {
   
   position: relative;
   list-style: none;
   overflow: hidden;
   width: 100%;
   padding: 0;
   margin: 0;  }

.rslides  li {
   
  -webkit-backface-visibility: hidden;
   position: absolute;
   display: none;
   width: 100%;
   left: 0;
   top: 0;  }

.rslides  li:first-child {
   
   position: relative;
   display: block;
   float: left;  }


.rslides  img {

   display: block;
   height: auto;
   float: left;
   width: 100%;
   border: 0;  }

.titre-music { font-size: 18px; }

.titre1 { font-size: 24px; }

.titre2 { font-size: 18px; padding-left: 1%;padding-right: 1%; text-align: justify; }

.titre3 { font-size: 15px; }

.titre4 { font-size: 22px; text-align: left; }

.titre5 { font-size: 22px; text-align: right; }

.lettrage12  {  font-size: 18px; padding: 8px; text-align: justify; }

.titre6 { font-weight: bolder; }



/* Titre Année Blog-Machine*/

.titre7 { font-size: 36px; line-height: 1.0em; text-align: left; padding: 4px; }

#lettre  { padding: 4px; font-size: 18px; width:98%; text-align: justify; }




#boxmenu { 
  
   font-size: 0.8em;
   position:relative;
   top: 130%;
   left: 4px;
   width:90%;
   height:622px;
   z-index:4;
   margin-top: 8px;
   display: none;
   letter-spacing: 5px;
   text-shadow: 1px 1px 2px #666;
   border: 1px solid #666;
   box-shadow: 1px 3px 12px #000;
   background-color: #ff6600;  }

#boitemenu {  

   width:38px;
   height:38px;
   position:relative;
   top: 4px;
   left: 15px;
   width:auto;
   height:auto;
   z-index:0;
   padding: 2px;  }


.boutoncroix  {

   position: absolute;
   top:-1%;   
   left: 99%;
   width:22px;
   height:22px;
   border: 3px solid #fff;
   z-index:4;   
   border-radius: 18px;  }



a.musicbox1  {
   text-decoration: none;
   background-color: #000; }


.musicbox1  {

   position: absolute;
   top: 6px;
   left: 4px;
   padding:6px; 
   width: 88%;
   height: auto;
   font-size: 1.3em; 
   border: 1px solid #C0C0C0;
   border-radius: 8px;
   color: #fff;
   letter-spacing: 5px;
   font-weight: bold; }


a.musicsubbox1  {
   text-decoration: none;
   background-color: #fff; }


a.musicsubbox1:hover  {

   text-decoration: none;
   color:#fff;
   background-color: #008000; 
   box-shadow: 2px 2px 2px #000; }


.musicsubbox1  {

   position: absolute;
   top: 50px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius:  6px;
   color: #000; }

.musicsubbox2  {
   text-decoration: none;
   background-color: #fff; }


a.musicsubbox2:hover  {

   text-decoration: none;
   color:#fff;
   background-color:#008000; 
   box-shadow: 2px 2px 2px #000; }

.musicsubbox2  {

   position: absolute;
   top: 86px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius:  6px;
   color: #000; }

.musicsubbox3  {
   text-decoration: none;
   background-color: #fff; }


a.musicsubbox3:hover  {

   text-decoration: none;
   color:#fff;
   background-color: #008000;
   box-shadow: 2px 2px 2px #000; }


.musicsubbox3  {

   position: absolute;
   top: 122px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius:  6px;
   color: #000; }


a.filmbox1  {
   text-decoration: none;
   background-color: #000; }

.filmbox1  {

   position: absolute;
   top: 160px;
   left: 4px;
   padding:6px; 
   width: 88%;
   height: auto;
   font-size: 1.3em; 
   border: 1px solid #C0C0C0;
   border-radius: 8px;
   color: #fff;
   letter-spacing: 5px;
   font-weight: bold;
   border-radius: 8px; }

a.filmsubbox1  {
   text-decoration: none;
   background-color: #fff; }


a.filmsubbox1:hover  {

   text-decoration: none;
   color:#fff;
   background-color: #008000;
   box-shadow: 2px 2px 2px #000; }


.filmsubbox1  {

   position: absolute;
   top: 204px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius:  6px;
   color: #000; }

a.filmsubbox2  {
   text-decoration: none;
   background-color: #fff; }


a.filmsubbox2:hover  {

   text-decoration: none;
   color:#fff;
   background-color: #008000;
   box-shadow: 2px 2px 2px #000; }


.filmsubbox2  {

   position: absolute;
   top: 240px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius:  6px;
   color: #000; }

a.filmsubbox3  {
   text-decoration: none;
   background-color: #fff; }



a.filmsubbox3:hover  {

   text-decoration: none;
   color:#fff;
   background-color: #008000;
   box-shadow: 2px 2px 2px #000; }

.filmsubbox3  {

   position: absolute;
   top: 276px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius:  6px;
   color: #000; }


a.tvbox1  {
   text-decoration: none;
   background-color: #000; }

.tvbox1  {

   position: absolute;
   top: 314px;
   left: 4px;
   padding:6px; 
   width: 88%;
   height: auto;
   font-size: 1.3em; 
   border: 1px solid #C0C0C0;
   color: #fff; 
   letter-spacing: 5px;
   font-weight: bold;
   border-radius: 8px; }


a.tvsubbox1  {
   text-decoration: none;
   background-color: #fff; }


a.tvsubbox1:hover  {

   text-decoration: none;
   color:#fff;
   background-color: #008000;
   box-shadow: 2px 2px 2px #000; }


.tvsubbox1  {

   position: absolute;
   top: 358px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius: 6px;
   color: #000; }


a.tvsubbox2  {
   text-decoration: none;
   background-color: #fff; }


a.tvsubbox2:hover  {

   text-decoration: none;
   color:#fff;
   background-color: #008000;
   box-shadow: 2px 2px 2px #000; }


.tvsubbox2  {

   position: absolute;
   top: 394px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius: 6px;
   color: #000; }

a.tvsubbox3  {
   text-decoration: none;
   background-color: #fff; }


a.tvsubbox3:hover  {

   text-decoration: none;
   color:#fff;
   background-color: #008000;
   box-shadow: 2px 2px 2px #000; }


.tvsubbox3  {

   position: absolute;
   top: 430px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius: 6px;
   color: #000; 
   background-color: #fff; }


a.bdbox1  {
   text-decoration: none;
   background-color: #000; }


.bdbox1  {

   position: absolute;
   top: 468px;
   left: 4px;
   padding:6px; 
   width: 88%;
   height: auto;
   font-size: 1.3em; 
   border: 1px solid #C0C0C0;
   color: #fff; 
   letter-spacing: 5px;
   font-weight: bold;
   border-radius: 8px; }


a.bdsubbox1  {
   text-decoration: none;
   background-color: #fff; }


a.bdsubbox1:hover  {

   text-decoration: none;
   color:#fff;
   background-color: #008000;
   box-shadow: 2px 2px 2px #000; }

.bdsubbox1  {

   position: absolute;
   top: 512px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius:  6px;
   color: #000;
   background-color: #008080; } 

a.bdsubbox2  {
   text-decoration: none;
   background-color: #fff; }


a.bdsubbox2:hover  {

   text-decoration: none;
   color:#fff;
   background-color: #008000;
   box-shadow: 2px 2px 2px #000; }

.bdsubbox2  {

   position: absolute;
   top: 548px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius:  6px;
   color: #000; 
   background-color: #008080; }

a.bdsubbox3  {
   text-decoration: none;
   background-color: #fff; }


a.bdsubbox3:hover  {

   text-decoration: none;
   color:#fff;
   background-color: #008000;
   box-shadow: 2px 2px 2px #000; }

.bdsubbox3  {

   position: absolute;
   top: 584px;
   left: 20px;
   padding:2px; 
   width: 85%;
   height: auto;
   font-size: 1.4em; 
   border: 1px solid #000;
   border-radius:  6px;
   color:#000;    
   background-color: #008080; }   


#moteur {  

   position:relative;
   top: 30%;
   left: 4px;
   width:90%;
   height:auto;
   margin-top: 8px;
   z-index:4;
   display: none;
   border: 1px solid #666;
   box-shadow: 1px 3px 12px #000;
   background-color: #cccccc;       }


.boutoncroix2  {

   position: absolute;
   top:-3%;   
   left: 99%;
   width:22px;
   height:22px;
   z-index:4;   
   border-radius: 18px;  }


#article {

   position: relative; 
   top: 122%;
   height: 100%;  
   text-align: justify; 
   padding: 1%;
   margin-top: 1%;     }


.pied-article  {

  font-family: new_ciclefina;
  letter-spacing: 6px;
  color:#fff;
  z-index: 1;
  margin: 0px;
  padding:8px;
  font-size: 1.2em;
  text-align: right;  }



.rslides {
   
   position: relative;
   list-style: none;
   overflow: hidden;
   width: 100%;
   padding: 0;
   margin: 0;  }

.rslides  li {
   
  -webkit-backface-visibility: hidden;
   position: absolute;
   display: none;
   width: 100%;
   left: 0;
   top: 0;  }

.rslides  li:first-child {
   
   position: relative;
   display: block;
   float: left;  }


.rslides  img {

   display: block;
   height: auto;
   float: left;
   width: 100%;
   border: 0;  }


#tailleArticle  {

  font-size:22px;
   width: 80px;
  height: 30px;
  position: absolute;
  top: 50px;
  left: 236px;   }




@font-face {
    font-family: 'antoniobold';
    src: url('../fonts/antonio-bold-webfont.eot');
    src: url('../fonts/antonio-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/antonio-bold-webfont.woff') format('woff'),
         url('../fonts/antonio-bold-webfont.ttf') format('truetype'),
         url('../fonts/antonio-bold-webfont.svg#antoniobold') format('svg');
    font-weight: normal;
    font-style: normal;
   
}


@font-face {
    font-family: 'new_ciclefina';
    src: url('fonts/New_Cicle_Fina-webfont.eot');
    src: url('fonts/New_Cicle_Fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/New_Cicle_Fina-webfont.woff') format('woff'),
         url('fonts/New_Cicle_Fina-webfont.ttf') format('truetype'),
         url('fonts/New_Cicle_Fina-webfont.svg#new_ciclefina') format('svg');
    font-weight: normal;
    font-style: normal;      }



@font-face {
    font-family: 'new_ciclefina';
    src: url('../fonts/New_Cicle_Fina-webfont.eot');
    src: url('../fonts/New_Cicle_Fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/New_Cicle_Fina-webfont.woff') format('woff'),
         url('../fonts/New_Cicle_Fina-webfont.ttf') format('truetype'),
         url('../fonts/New_Cicle_Fina-webfont.svg#new_ciclefina') format('svg');
    font-weight: normal;
    font-style: normal;     }

@font-face {
    font-family: 'new_ciclefina';
    src: url('../../fonts/New_Cicle_Fina-webfont.eot');
    src: url('../../fonts/New_Cicle_Fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/New_Cicle_Fina-webfont.woff') format('woff'),
         url('../../fonts/New_Cicle_Fina-webfont.ttf') format('truetype'),
         url('../../fonts/New_Cicle_Fina-webfont.svg#new_ciclefina') format('svg');
    font-weight: normal;
    font-style: normal;     }