/*          
                  Enquete

Bon c'etait simple nan ?, Maintenant la suite :

        {  010101110111010101110010011110000111100101101000011101010010000001101111011001000010000001100
            1110110100001111001011011000111000101101000011101110111011101101000001000000110011001100100011
            0011001101011011010000110100000100000011001110110010001110001011101100010000001101111011010000
            010000001100110011100100110011101101000001000000100101101010111010011110101000000001010         }

            Indices:
                "Du binaire a veni vidi vici puis au français"
                "Decalage : 3"

*/

/*Polices*/
@font-face {
    font-family: 'heading_proextrabold_italic';
    src: url('headingpro-extrabolditalic-webfont.eot');
    src: url('headingpro-extrabolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('headingpro-extrabolditalic-webfont.woff2') format('woff2'),
         url('headingpro-extrabolditalic-webfont.woff') format('woff'),
         url('headingpro-extrabolditalic-webfont.ttf') format('truetype'),
         url('headingpro-extrabolditalic-webfont.svg#heading_proextrabold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'josefin_sansbold';
    src: url('josefinsans-bold-webfont.woff2') format('woff2'),
         url('josefinsans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'source_sans_problack';
    src: url('sourcesanspro-black-webfont.woff2') format('woff2'),
         url('sourcesanspro-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'heading_probold';
    src: url('headingpro-italic-webfont.eot');
    src: url('headingpro-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('headingpro-italic-webfont.woff2') format('woff2'),
         url('headingpro-italic-webfont.woff') format('woff'),
         url('headingpro-italic-webfont.ttf') format('truetype'),
         url('headingpro-italic-webfont.svg#heading_probold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'uranialight';
    src: url('uranialig-webfont.eot');
    src: url('uranialig-webfont.eot?#iefix') format('embedded-opentype'),
         url('uranialig-webfont.woff2') format('woff2'),
         url('uranialig-webfont.woff') format('woff'),
         url('uranialig-webfont.ttf') format('truetype'),
         url('uranialig-webfont.svg#uranialight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'cac_champagneregular';
    src: url('cac_champagne-webfont.eot');
    src: url('cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
         url('cac_champagne-webfont.woff2') format('woff2'),
         url('cac_champagne-webfont.woff') format('woff'),
         url('cac_champagne-webfont.ttf') format('truetype'),
         url('cac_champagne-webfont.svg#cac_champagneregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@import url('https://fonts.googleapis.com/css?family=Roboto');
/*Fin*/


body
{
    background-color: white;
    font-size: 12px;
}

#page_de_base
{
    margin: auto;
    text-align: center;
}
}

h1
{
    font-size: large;
}

h2
{
    font-size: 30px;
    color: black;
    text-decoration: underline;
}

h3
{
    font-size: 25px;
    font-family: 'heading_probold' , Arial , serif;
}

#tete
{
    background-color:#332626;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}



#nav
{
    
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: space-between;
    list-style-type: none;
    font-size: 25px;
    background: #332626 ;
    width: 500px;
    font-family:'uranialight';


}

#demi-1
{
    display :flex;
    justify-content: center;
    flex-wrap: nowrap;
    float: right;


}

#menu
{
    display: flex;
    float: right;
    justify-content: center;
    align-items: flex-end;
}

#video
{
    display: flex;
    justify-content: space-between;
    padding-bottom: 100px;
    margin-bottom: 0px

}

#bouton
{
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0px;
    padding: 0px;

}

.rec
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 426px;
  height: 240px;
  align-items: center;
  justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   align-content: center;
   margin-left: auto;
   margin-right: auto;

}
#yoytube
{
    background-color: #1B291F;
    margin: auto;
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#yoytubebody:before {
          content: "";
          position: fixed;
          top: -10px;
          left: 0;
          width: 100%;
          height: 10px;

          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
              -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                         box-shadow: 0px 0px 10px rgba(0,0,0,.8);

          z-index: 100;
}

#vide
{
    display: flex;
    justify-content: space-between;
}

#coucou
{
    display: flex;
    justify-content: center;
    margin: auto;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    color: white;
    background-color: #191919;

}
.def
{
    font-family: 'heading_probold' , Arial , serif;
    padding: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    

.
    
}

.titre_index
{
	font-family: 'heading_probold' , Arial , serif;
    float: right;
    font-size: 75px;
    padding: 1px;
}

.navigation
{
    display: flex;
    justify-content: center;
    padding: 10px;

}

.le_logo
{
    display: flex;
    justify-content: center;
    color: black
    
}

#scroll
{
    display: flex;
    justify-content: center;
}

#nav a
{
    color: #807d7d;
    text-decoration: none;
}

#nav a:visited
{
    color: #807d7d;
}

#nav a:hover
{
    color: black;
    font-style: italic;
    text-decoration: underline;
}

h3
{
    display: flex;
    justify-content: center;
    font-size: 70px ;
    padding-top: 10px;
    margin: auto;
}

#presentation
{
    background-color: #1B291F;
    margin: auto;
    margin-top: 0px;
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    color: white;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#separationsyte
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.vydeto
{
    display: flex;
    justify-content: center;
    font-size: 70px;
    color: white;
    font-family: 'heading_probold' , Arial , serif;
    margin: auto;
    padding-top: 10px
    
}
.floathaut
{
    float: left;
    vertical-align: middle;
}
.floatbas
{
    float: right;
    vertical-align: middle;
}

.clear
{
    clear: right;
}
.texteuh
{
    font-family: 'Roboto',  sans-serif;
    font-size: 20px;
}

.moua
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: "Roboto", sans-serif;
    color: white;
    left: 50%

}

.citation
{
    font-size: 35px;
    font-style: bold;
    vertical-align: middle;
    font-family: 'heading_probold',  sans-serif;
}
.clear
{
    font-size: 25px;
}

.citation:before {
  font-size: 18px;
    content: open-quote;
    display: inline;
    /* height: 0; */
    line-height: 0;
    left: -10px;
    position: relative;
    top: 30px;
    color: #ccc;
    font-size: 3em;
}

.citation::after {
  font-size: 18px;
    content: close-quote;
    display: inline;
    /* height: 0; */
    line-height: 0;
    left: 10px;
    position: relative;
    top: 35px;
    color: #ccc;
    font-size: 3em;
}

.desc
{
    font-family: 'Josefin Sans', sans-serif;
}

.h3presentation
{
  
}

.bordd
{
    border: 2px black solid;
    margin: 0px;
    padding: 0px;
    height: 250px ;
    width: 250px ;
    display: flex;
    left: 50%;
}

#les_real
{
    width:100% ;
    height: 100%;
    background-color: #191919;
    padding-bottom: 100px;
    margin: auto;
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    color: white;
    font-family: 'Roboto', sans-serif;
   

}
#les_real_split
{
    display: flex;
    justify-content: space-around;
    font-size: 25px

}

#les_real h3
{
    font-family: 'heading_probold', sans-serif;
    font-size: 70px;
    display: flex;
    justify-content: center;
}

li
{
     list-style-type: none;
}

.lesreal1
{
    font-size: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

.boutonreal
{
    padding: 2px;
    margin-top: 25px;
    margin-bottom: 25px;
    border: solid 1px #191919 ;
    background-color: #191919;
    border-radius: 10px
    
}

.petipeti
{
    font-size: 10px;
}

#lesreal2
{
  display: none;

}

#les_real a
{
    color: #807d7d;
    text-decoration: none;
}

#les_real a:visited
{
    color: #807d7d;
}

#les_real a:hover
{
    font-style: italic;
    text-decoration: underline;
}

.espaceuh
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#enquete
{
    margin: auto;
    background-color: #1B291F;
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    padding-bottom: 100px;
}

#enquete h3
{
    font-family: 'heading_probold', sans-serif;
    font-size: 70px;
    display: flex;
    justify-content: center;
    color: white;
}


.texteenquete
{
    
    color: white;
    font-family: 'Roboto', sans-serif;
    margin: auto;
    display: flex;
    align-items: center;
    


}
.pen
{
  text-align: center;
}
code
{
    
    color: white;
    font-size: 20px;
    clear: both;
    display: flex;
    justify-content: center;

}
.tréslefontpetit
{
  font-size: 18px;
}

.splyteuh
{
    display: flex;
    justify-content:center;
}

.myllieu
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.voiturecitrotro
{
    margin-left:  auto;
    margin-right: auto;
    color: white;
    font-size: 11.5px;
    font-family: 'Roboto', monospace;
    text-align: center;
    display: flex;
    justify-content: center;
}

.loupeuh
{
    display: none;
  }

  .imamage
  {
    display: none;
  }

.pencher
{
    font-style: italic;
    font-size: 20px;
}

#apropos
{
    margin: auto;
    color: white;
    background-color: #191919;
    -webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
    padding-bottom: 100px;
}

#apropos h3
{
    font-family: 'heading_probold', sans-serif;
    font-size: 70px;
    display: flex;
    justify-content: center;
}

.diviseapropos
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    margin: auto;
}

.bouton_réseaux1
{
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 12px;
}

.bouton_réseaux
{
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
}

h4
{
    font-family: 'heading_probold', sans-serif;
    font-size: 35px;
    text-align: center;
}

.texte_apropos
{
    font-size: 25px;
    color: white;
    font-family: 'Roboto', sans-serif;
    margin: auto;
}

.github-button
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #C4302B;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 3px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 10px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
.button:active {
  background-color: black;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.button a
{
    color: white;
    text-decoration: none;
}

.button1 {
  display: inline-block;
  border-radius: 4px;
  background-color: #0078D7;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 3px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 10px;
}

.button1 span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button1 span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button1:hover span {
  padding-right: 25px;
}

.button1:hover span:after {
  opacity: 1;
  right: 0;
}
.button1:active {
  background-color: white;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
  color: #0078D7;
}

.button1 a
{
    color: white;
    text-decoration: none;
}

.buttongit {
  display: inline-block;
  border-radius: 4px;
  background-color: #24292E;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 28px;
  padding: 3px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 10px;
}

.buttongit span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttongit span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttongit:hover span {
  padding-right: 25px;
}

.buttongit:hover span:after {
  opacity: 1;
  right: 0;
}
.buttongit:active {
  background-color: #2F363D;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.buttongit a
{
    color: white;
    text-decoration: none;
}

#achille_du_site
{
    background-color: #332626;
    margin: auto;
    display: flex;
    justify-content: center;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
}

#achille_du_site h5
{
    font-family: 'heading_probold', sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
}

#achille_du_site a
{
    color: #807d7d;
    text-decoration: none;
}

#achille_du_site a:visited
{
    color: #807d7d;
}

#achille_du_site a:hover
{
    color: black;
    font-style: italic;
    text-decoration: underline;
}

.icons {
    margin: auto;
}

.icons a {
    display: inline-block;
    vertical-align: middle;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
}

.icons a.twitter { background: url(../img/social-icons/twitter.png) left top no-repeat; }
.icons a.dribbble { background: url(../img/social-icons/dribbble.png) left top no-repeat; }
.icons a.rss { background: url(../img/social-icons/rss.png) left top no-repeat; }
.icons a.pinterest { background: url(../img/social-icons/pinterest.png) left top no-repeat; }
.icons a.digg { background: url(../img/social-icons/digg.png) left top no-repeat; }
.icons a.flickr { background: url(../img/social-icons/flickr.png) left top no-repeat; }
.icons a.forrst { background: url(../img/social-icons/forrst.png) left top no-repeat; }
.icons a.vimeo { background: url(../img/social-icons/vimeo.png) left top no-repeat; }
.icons a.reddit { background: url(../img/social-icons/reddit.png) left top no-repeat; }
.icons a.linkedin { background: url(../img/social-icons/linkedin.png) left top no-repeat; }
.icons a.facebook { background: url(../img/social-icons/facebook.png) left top no-repeat; }
.icons a.paypal { background: url(../img/social-icons/paypal.png) left top no-repeat; }
.icons a.stumbleupon { background: url(../img/social-icons/stumbleupon.png) left top no-repeat; }
.icons a.email { background: url(../img/social-icons/email.png) left top no-repeat; }
.icons a.deviantart { background: url(../img/social-icons/deviantart.png) left top no-repeat; }
.icons a.netvibes { background: url(../img/social-icons/netvibes.png) left top no-repeat; }
.icons a.yahoo { background: url(../img/social-icons/yahoo.png) left top no-repeat; }
.icons a.github { background: url(../img/social-icons/github.png) left top no-repeat; }
.icons a.addthis { background: url(../img/social-icons/addthis.png) left top no-repeat; }
.icons a.behance { background: url(../img/social-icons/behance.png) left top no-repeat; }
.icons a.blogger { background: url(../img/social-icons/blogger.png) left top no-repeat; }
.icons a.slashdot { background: url(../img/social-icons/slashdot.png) left top no-repeat; }
.icons a.technorati { background: url(../img/social-icons/technorati.png) left top no-repeat; }
.icons a.googleplus { background: url(../img/social-icons/googleplus.png) left top no-repeat; }
.icons a.apple { background: url(../img/social-icons/apple.png) left top no-repeat; }
.icons a.myspace { background: url(../img/social-icons/myspace.png) left top no-repeat; }
.icons a.sharethis { background: url(../img/social-icons/sharethis.png) left top no-repeat; }
.icons a.yelp { background: url(../img/social-icons/yelp.png) left top no-repeat; }
.icons a.delicious { background: url(../img/social-icons/delicious.png) left top no-repeat; }
.icons a.lastfm { background: url(../img/social-icons/lastfm.png) left top no-repeat; }
.icons a.youtube { background: url(../img/social-icons/youtube.png) left top no-repeat; }
.icons a.skype { background: url(../img/social-icons/skype.png) left top no-repeat; }
.icons a.tumblr { background: url(../img/social-icons/tumblr.png) left top no-repeat; }
.icons a.aim { background: url(../img/social-icons/aim.png) left top no-repeat; }
.icons a.google { background: url(../img/social-icons/google.png) left top no-repeat; }

.icons a:hover { background-position: left -34px; }

.buttonfooter {
  display: inline-block;
  border-radius: 4px;
  background-color: #332626;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 12px;
  padding: 3px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 10px;
}

.buttonfooter span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.buttonfooter span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.buttonfooter:hover span {
  padding-right: 25px;
}

.buttonfooter:hover span:after {
  opacity: 1;
  right: 0;
}
.buttonfooter:active {
  background-color: #332626;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.buttonfooter a
{
    color: white;
    text-decoration: none;
}

h4
{
  font-size: 35px;
}

.rec1
{
  display: none;
}

.rec2
{
  display: none;
}