img {
  border-style:none;
}

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

    @font-face {
        font-family: '28DaysLater';
        src: url('font/28dayslater.eot');
        src: url('font/28dayslater.eot?#iefix') format('embedded-opentype'),
             url('font/28dayslater.woff') format('woff'),
             url('font/28dayslater.ttf') format('truetype'),
             url('font/28dayslater.svg#28dayslater') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    
@font-face {
    font-family: 'providencebold';
    src: url('ufonts.com_providence-bold-webfont.eot');
    src: url('ufonts.com_providence-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('ufonts.com_providence-bold-webfont.woff') format('woff'),
         url('ufonts.com_providence-bold-webfont.ttf') format('truetype'),
         url('ufonts.com_providence-bold-webfont.svg#providencebold') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

}



.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

body {
  width: 100%;
  height: 100%;
  background: url('../img/backBody.png') repeat;
}

div {
    webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

map {
  display: inline;
}

#conteneurPrincipal {
  width: 1024px;
  height: 768px;
  margin: auto;
  background: url('../img/background2.jpg');
}

header {
  width: 1022px;
  height: 180px;
}

.headerMenu {
  height: 23px;
  float: left;
  margin-left: 5px;
  padding-top: 24px;
}

.headerMenu a, .headerMenu a:visited, .headerMenu a:active, .headerMenu a:focus {
  text-decoration: none;
   border:none;
   outline:none;
}

.headerSubMenu {
  display: none;
  margin-top: 3px;
}

.headerMenu:hover .headerSubMenu, .headerMenu.hover_effect .headerSubMenu{
  display: block;
}

#headerAccueil {
  width: 63px;
  background: url('../img/header.accueil.png') top left no-repeat;
  margin-left: -10px;
  margin-right: 2px;
}

.en #headerAccueil {
  width: 50px;
  background: url('../img/header.accueil.en.png') top left no-repeat;
  margin-left: -10px;
  margin-right: 2px;
}

#headerWebserie {
  width: 85px;
  background: url('../img/header.webserie.png') top left no-repeat;
    margin-right: 2px;
}

#headerTransmedia {
  width: 137px;
  background: url('../img/header.transmedia.png') top left no-repeat;
  margin-right: 15px;
}

.en #headerTransmedia {
  width: 151px;
  background: url('../img/header.transmedia.en.png') top left no-repeat;
  margin-right: 15px;
}

.floatLeft {
  float: left;
}





#headerPedaNew {
  width: 142px;
  background: url('../img/header.peda_new.png') top left no-repeat;
  margin-left: 160px;
  margin-right: 5px;
}

#headerPedaNew:hover, #headerPedaNew.hover_effect { background-position: -142px 0px; }

#headerActeurNew {
  width: 107px;
  background: url('../img/header.profils.png') top left no-repeat;
  margin-right: 15px;
}

#headerActeurNew:hover, #headerActeurNew.hover_effect{
  background-position: -107px 0px;
  height: auto;
}

#headerMarilou {
  width: 44px;
  background: url('../img/header.marilou.png') top left no-repeat;
  height: 14px;
}
#headerMarilou:hover, #headerMarilou.hover_effect { background-position: -44px 0px; }

#headerSofian {
  width: 44px;
  background: url('../img/header.sofian.png') top left no-repeat;
  height: 14px;
}
#headerSofian:hover, #headerSofian.hover_effect { background-position: -44px 0px; }

#headerEmma {
  width: 44px;
  background: url('../img/header.emma.png') top left no-repeat;
  height: 14px;
}
#headerEmma:hover, #headerEmma.hover_effect { background-position: -44px 0px; }

#headerRomain {
  width: 44px;
  background: url('../img/header.romain.png') top left no-repeat;
  height: 14px;
}
#headerRomain:hover, #headerRomain.hover_effect { background-position: -44px 0px; }





#headerActeur {
  padding-top: 0px;
}

#headerAccueil:hover, #headerAccueil.hover_effect {
  background: url('../img/header.accueil.png') no-repeat;
  background-position: -63px 0px;
}

.en #headerAccueil:hover, .en #headerAccueil.hover_effect{
  background: url('../img/header.accueil.en.png') no-repeat;
  background-position: -50px 0px;
}

#headerWebserie:hover,  #headerWebserie.hover_effect{
  background: url('../img/header.webserie.png') no-repeat;
  background-position: -85px 0px;
  height: 100px;
}

#headerTransmedia:hover, #headerTransmedia.hover_effect{
  background: url('../img/header.transmedia.png') no-repeat;
  background-position: -137px 0px;
  height: auto;
}

.en #headerTransmedia:hover, .en #headerTransmedia.hover_effect{
  background: url('../img/header.transmedia.en.png') no-repeat;
  background-position: -151px 0px;
  height: auto;
}

#headerEp1 {
  width: 127px;
  background: url('../img/header.ep1.png') top left no-repeat;
  height: 14px;
}

.en #headerEp1 {
  width: 88px;
  background: url('../img/header.ep1.en.png') top left no-repeat;
  height: 14px;
}

#headerEp2 {
  width: 145px;
  background: url('../img/header.ep2.png') top left no-repeat;
  height: 14px;
}

.en #headerEp2 {
  width: 110px;
  background: url('../img/header.ep2.en.png') top left no-repeat;
  height: 14px;
}

#headerEp3 {
  width: 95px;
  background: url('../img/header.ep3.png') top left no-repeat;
  height: 14px;
}

.en #headerEp3 {
  width: 146px;
  background: url('../img/header.ep3.en.png') top left no-repeat;
  height: 14px;
}

#headerEp4 {
  width: 96px;
  background: url('../img/header.ep4.png') top left no-repeat;
  height: 14px;
}

.en #headerEp4 {
  width: 87px;
  background: url('../img/header.ep4.en.png') top left no-repeat;
  height: 14px;
}

#headerPeda {
  width: 112px;
  background: url('../img/header.peda.png') top left no-repeat;
  height: 21px;
}

.en #headerPeda {
  width: 108px;
  background: url('../img/header.peda.en.png') top left no-repeat;
  height: 21px;
}


#headerEp1:hover, #headerEp1.hover_effect{
  background: url('../img/header.ep1.png') no-repeat;
  background-position: -126px 0px;
}

.en #headerEp1:hover, .en #headerEp1.hover_effect{
  background: url('../img/header.ep1.en.png') no-repeat;
  background-position: -88px 0px;
}

#headerEp2:hover, #headerEp2.hover_effect{
  background: url('../img/header.ep2.png') no-repeat;
  background-position: -145px 0px;
}


.en #headerEp2:hover, .en #headerEp2.hover_effect{
  background: url('../img/header.ep2.en.png') no-repeat;
  background-position: -110px 0px;
}


#headerEp3:hover, #headerEp3.hover_effect{
  background: url('../img/header.ep3.png') no-repeat;
  background-position: -94px 0px;
}

.en #headerEp3:hover, .en #headerEp3.hover_effect{
  background: url('../img/header.ep3.en.png') no-repeat;
  background-position: -146px 0px;
}


#headerEp4:hover, #headerEp4.hover_effect{
  background: url('../img/header.ep4.png') no-repeat;
  background-position: -96px 0px;
}

.en #headerEp4:hover, .en #headerEp4.hover_effect{
  background: url('../img/header.ep4.en.png') no-repeat;
  background-position: -87px 0px;
}

#headerPeda:hover, #headerPeda.hover_effect{
  background: url('../img/header.peda.png') no-repeat;
  background-position: -112px 0px;
}

.en #headerPeda:hover, .en #headerPeda.hover_effect{
  background: url('../img/header.peda.en.png') no-repeat;
  background-position: -108px 0px;
}

#headerPopote {
  width: 76px;
  background: url('../img/header.popotte.png') top left no-repeat;
  height: 14px;
}

.en #headerPopote {
  width: 69px;
  background: url('../img/header.popotte.en.png') top left no-repeat;
  height: 14px;
}




#headerJdp-eau {
  width: 105px;
  background: url('../img/header.jdp_eau.png') top left no-repeat;
  height: 14px;
}

#headerKit-antigaspi {
  width: 105px;
  background: url('../img/header.kit_antigaspi.png') top left no-repeat;
  height: 14px;
}




#headerKit {
  width: 80px;
  background: url('../img/header.kit.png') top left no-repeat;
  height: 14px;
}

#headerArg {
  width: 25px;
  background: url('../img/header.arg.png') top left no-repeat;
  height: 14px;
}

#headerDispoTransmedia {
  width: 132px;
  background: url('../img/header.dispo.trans.png') top left no-repeat;
  height: 14px;
}

.en #headerDispoTransmedia {
  width: 120px;
  background: url('../img/header.dispo.trans.en.png') top left no-repeat;
  height: 14px;
}

#headerPopote:hover, #headerPopote.hover_effect{
  background: url('../img/header.popotte.png') no-repeat;
  background-position: -76px 0px;
}

.en #headerPopote:hover, .en #headerPopote.hover_effect{
  background: url('../img/header.popotte.en.png') no-repeat;
  background-position: -69px 0px;
}



#headerCPCSCBE {
  width: 175px;
  background: url('../img/header.cpcscbe.png') top left no-repeat;
  height: 14px;
}





#headerJdp-eau:hover, #headerJdp-eau.hover_effect{
  background-position: -105px 0px;
}

#headerKit-antigaspi:hover, #headerKit-antigaspi.hover_effect{
  background-position: -105px 0px;
}





#headerKit:hover, #headerKit.hover_effect{
  background: url('../img/header.kit.png') no-repeat;
  background-position: -80px 0px;
}

#headerArg:hover, #headerArg.hover_effect{
  background: url('../img/header.arg.png') no-repeat;
  background-position: -25px 0px;
}

#headerDispoTransmedia:hover, #headerDispoTransmedia.hover_effect{
  background: url('../img/header.dispo.trans.png') no-repeat;
  background-position: -132px 0px;
}

.en #headerDispoTransmedia:hover, .en #headerDispoTransmedia.hover_effect{
  background: url('../img/header.dispo.trans.en.png') no-repeat;
  background-position: -119px 0px;
}


#headerCPCSCBE:hover, #headerCPCSCBE.hover_effect{
  background: url('../img/header.cpcscbe.png') no-repeat;
  background-position: -175px 0px;
}


.titreProvi {
  font-family: 'providencebold',
              Corbel,
             "Lucida Grande",
             "Lucida Sans Unicode",
             "Lucida Sans",
             "DejaVu Sans",
             "Bitstream Vera Sans",
             "Liberation Sans",
             Verdana,
             sans-serif;
  font-size: 14;
}



#argContainer, #popoteContainer, #transContainer, #ep1Container, #ep2Container, #ep3Container, #kitContainer {
 font-family: 'providencebold',
              Corbel,
             "Lucida Grande",
             "Lucida Sans Unicode",
             "Lucida Sans",
             "DejaVu Sans",
             "Bitstream Vera Sans",
             "Liberation Sans",
             Verdana,
             sans-serif;
  font-size: 12;
  position: relative;
}

#argContainer, #popoteContainer, #transContainer, #kitContainer {
  margin-left: 30px;
  margin-top: 25px;
  width: 753px;
  height: 364px;
}

.headerActeurHover {
  display: none;
}

#headerMarilou:hover .headerActeurStd, #headerEmma:hover .headerActeurStd, #headerRomain:hover .headerActeurStd, #headerSofian:hover .headerActeurStd {
  display: none;
}

#headerMarilou:hover .headerActeurHover, #headerEmma:hover .headerActeurHover, #headerRomain:hover .headerActeurHover, #headerSofian:hover .headerActeurHover {
  display: inline;
}


#ep1Container, #ep2Container, #ep3Container {
  margin-left: 170px;
  margin-top: 30px;
}

#headerDispoTrans {
  background: url('../img/dispo.trans.png') no-repeat top left;
  width: 121px;
  height: 56px;
  float: right;
  margin-right: -1px;
  margin-top: 43px;
  cursor: pointer;
}

.en #headerDispoTrans {
  background: url('../img/dispo.trans.en.png') no-repeat top left;
  width: 112px;
  height: 56px;
  float: right;
  margin-right: -1px;
  margin-top: 43px;
  cursor: pointer;
}

#headerPresse {
 background: url('../img/presse.png') no-repeat top left;
  width: 91px;
  height: 47px;
float: right;
margin-top: 12px;
margin-right: -1px;
cursor: pointer;
}

.en #headerPresse {
 background: url('../img/presse.en.png') no-repeat top left;
  width: 95px;
  height: 47px;
float: right;
margin-top: 12px;
margin-right: -1px;
cursor: pointer;
}

#headerEspacePeda {
 background: url('../img/espace-peda.png') no-repeat top left;
  width: 140px;
  height: 70px;
float: right;
margin-top: 60px;
margin-right: -1px;
cursor: pointer;
}

.en #headerEspacePeda {
 background: url('../img/espace-peda.en.png') no-repeat top left;
  width: 141px;
  height: 70px;
float: right;
margin-top: 60px;
margin-right: -1px;
cursor: pointer;
}

#headerDispoTrans:hover {
  background: url('../img/dispo.trans.png') no-repeat -121px 0px;
}

.en #headerDispoTrans:hover {
  background: url('../img/dispo.trans.en.png') no-repeat -112px 0px;
}

#headerPresse:hover {
 background: url('../img/presse.png') no-repeat -91px 0px;
}

.en #headerPresse:hover {
 background: url('../img/presse.en.png') no-repeat -95px 0px;
}

#headerEspacePeda:hover {
 background: url('../img/espace-peda.png') no-repeat -140px 0px;
}

.en #headerEspacePeda:hover {
 background: url('../img/espace-peda.en.png') no-repeat -141px 0px;
}

#backHome {
position: absolute;
width: 167px;
height: 105px;
cursor: pointer;
top: 25px;
left: 288px;
}




#main {
  width: 1022px;
  height: 565px;
      -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

footer {
  width: 1022px;
  height: 65px;
  margin-top: -10px;
  webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#hautContenu {
  width: 100%;
  height: 420px;
  position: relative;
}

#hautContenu > div {
  float: left;
}

#hautContenu > div > div {
    margin: 0 auto 0 auto;
    height: 390px;
}


#videoConteneur {
      margin: 20px auto 0 auto;
}

 #roadmapConteneur {
      position: relative;
    width: 15%;
      height: 420px;
 }

 #pedagogieConteneur {
      position: relative;
    width: 21%;
      height: 420px;
      font-family: 'stpauls';
      display: none;
 }


#cacheMisereVideo {
  position: absolute;
  z-index: 5;
  background: black;
  width: 640px;
height: 8px;
top: 352px;
}

 #videoConteneur {
    width: 64%;
    z-index: 5;
    position: relative;
    height: 400px;
 }


 #profilMainConteneur {
    width: 79%;
    z-index: 5;
    position: relative;
  margin-top: 25px;
  margin-left: 18px;
    margin-right: -5px;
    font-family: 'spacecowboy';
 }

area {
  cursor: pointer;
}

#roadmap {
    width: 99%;
    /*background: red;*/
    background: url('../img/backroad.png') top left no-repeat;
       position: relative;
    padding-top: 45px;
}

#roadmapInner {
  height: 320px;
  width: 145px;
  overflow: hidden;
}

#roadmapInnerPadding {
  height: 5px;
  width: 145px;
}

#roadmapInnerContent {
  height: 720px;
  width: 145px;
  background: url('../img/fdr.png');
}

#roadmapInnerContent2 {
  height: 460px;
  width: 145px;
  background: url('../img/fdr.ep2.png');
}

#roadmapInnerContent3 {
  height: 592px;
  width: 145px;
  background: url('../img/fdr.ep3.png');
}

#roadmapInnerContent4 {
  height: 690px;
  width: 145px;
  background: url('../img/fdr.ep4.png');
}

.roadmapBoxes2 {
  position: absolute;
  display: none;
  cursor: pointer;
}

.roadImageTrigger {
  display: none;
}



 #pedagogieSnap {
    width: 99%;
 }

  #pedagogie {
    width: 100%;
    height: 100%;
    background: url('../img/backpeda.png');
    padding-top: 10px;
 }

 #video {
    width: 640px;
    height: 390px;
    margin: auto;
    position: relative;
 }

 #profile {
  width:98%;
  height: 390px;
  margin: auto;
  position: relative;
 }

 #profileLeft, #profileMiddle {
  height: 100%;
  width: 30%;
  float: left;
 }

 #profileRight {
    height: 100%;
    width: 40%;
    float: left;
 }


#profileCitation {
  position: relative;
} 

#profileAvatar, #profileCitation, #profileFAQ, #profileTransmedia, #ProfileSociaux {
  width: 100%;
}

#profileAvatar{
  height: 40%;
}

#profileCitation{
  height: 20%;
}

#profileFAQ {
  height: 40%;
}

#profileTransmedia{
  height: 30%;
}

#profileSociaux {
  height: 70%;
}


#profileCitationBox {
  position: absolute;
  bottom: 0;
  left: 50%;
  font-size: 18px;
  background: url('../img/backprofilbox.png');
  padding: 2px;
  border-radius: 4px;

}

#profileAvatar img {
  border-radius: 5px;
}

#profileFAQBox {
  width: 90%;
  height: 80%;
  border-radius: 6px;
  margin-left : 10%;
  font-size: 16px;
  padding-left: 5px;
  background: url('../img/backprofilbox.png');
}

#profileContenuCentral {
  width: 94%;
  height: 60%;
  border-radius: 6px;
  margin-left : 10%;
  margin-top: 55%;
  font-size: 20px;
  background: url('../img/backprofilbox.png');
}

#profileTransmediaBox {
   width: 80%;
  height: 70%;
  border-radius: 6px;
  margin-top: 10%; 
  margin-left: 10%;
}

#profileSociauxGauche, #profileSociauxDroite {
  float: left;
  height: 100%;
  width: 50%;
}

#profileSociauxGaucheBox, #profileSociauxDroiteBox {
  width: 80%;
  height: 60%;
  border-radius: 6px;
  margin-top: 10%; 
  margin-left: 10%; 
}



 #video {
  z-index: 5;
 }

 #basContenu {
    width: 100%;
    height: 145px;
    margin-top: -10px;
    /*background: url('../img/backtransbottom.png') bottom left no-repeat;*/
}

#transmediaConteneur {
  width: 100%;
  height: 100%;
  position: relative;
  display: none;
}

#transmedia {
  width: 639px;
  height: 150px;
  margin: 15px auto 0 164px;
  background: url('../img/backtrans.png') no-repeat;
  position: relative;
}

#roadmapClose {
    position: absolute;
    left: 140px;
    top: -25px;
    cursor: pointer;
}

#roadmapOpen {
    position: absolute;
    left: 160px;
    top: 50px;
    cursor: pointer;
    z-index: 0;
    opacity: 0;
}

#pedaClose {
    position: absolute;
    left: 140px;
    top: 0px;
    cursor: pointer;
    z-index: 15px;
}

#pedaOpen {
    position: absolute;
    left: 0px;
    top: 20px;
    display: none;
    cursor: pointer;
}

#transmediaClose {
    position: absolute;
    left: 96%;
    top: 0%;
    cursor: pointer;
}

#transmediaOpen {
    position: absolute;
    top: 100%;
    left: 18%;
    display: none;
    cursor: pointer;
}


.facebookPopup {
  margin-right: 15px;
  cursor: pointer;
}

.twitterPopup {
  margin-right: 15px;
  cursor: pointer;
}

.bookmarkPopup {
  cursor: pointer;
}






#logoConteneur, #profilConteneur {
  width: 12.5%;
  position: relative;
  height: 100%;
  float: left;
}

#logoConteneur img {
  position: absolute;
}

#profilConteneur img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -35px;
  margin-top: -35px;
  z-index:99999;
}



#menuConteneur {
  width: 75%;
  height: 100%;
  padding-top: 65px;
  float: left;
  position: relative;
  z-index:99998;
}


#menuConteneur p {
  text-align: justify;
  width: 100%;
}




#trailer {
position: relative;
margin-left: 140px;
}

.preziplayer {
  display: none;
}

#presseCont {
  position: relative;
}

#presse {
  left: 111px;
top: 40px;
position: absolute;
}

#vidcontrols {
  width: 680px;
  height: 20px;
}

#vidcontrols div {
  cursor: pointer;
}

#playpause {
  width: 16px;
  height: 17px;
  background : url('../img/html5-vid-ctrl-pause.png') top left black;
  float: left;
  margin-right: 10px;
}

#progressbar {
  width: 580px;
  height: 17px;
  /*background : url('../images/html5-vid-ctrl-play.png') top left black;*/
  float: left;
  margin-right: 10px;
}
 
/* make sure the horizontal slider is positioned relative */
#progressbar > .ui-slider-horizontal {
  position: relative;
  height: 6px;
  width: 100%;
  background: #333333;
  margin-top: 6px;
}
 
/* the handle must be positioned absolute, in respects to the horizontal slider */
#progressbar > .ui-slider-horizontal .ui-slider-handle {
  position: absolute;
  height: 8px;
  width: 3px;
  background: #ADA59C;
  z-index: 1;
  margin-top: -1px;
}
 


#son {
  width: 50px;
  height: 25px;
  background : url('../img/html5-vid-ctrl-sound-on.png') top left transparent no-repeat;
  float: left;
  -moz-transition: all 2s ease-in-out; 
  -ms-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out; 
  -webkit-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
}

#son:hover > .ui-slider-horizontal, #son .ui-slider-horizontal:hover, #son:hover .ui-slider-horizontal:hover {
  opacity: 1;
}

#son > .ui-slider-horizontal {
  -moz-transition: all 3s ease-in-out; 
  -ms-transition: all 3s ease-in-out;
  -o-transition: all 3s ease-in-out; 
  -webkit-transition: all 3s ease-in-out;
  transition: all 3s ease-in-out;
  opacity: 0;
  position: relative;
  height: 4px;
  width: 100%;
  background: #333333;
  margin-top: 8px;
  margin-left: 17px;
}
 
#son > .ui-slider-horizontal .ui-slider-handle {
  position: absolute;
  height: 10px;
  width: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 4px;
  background: #ADA59C;
  z-index: 1;
  margin-top: -3px;
}

#son > .ui-slider-horizontal .ui-slider-handle:active {
  border: 0px solid transparent;
}



.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 11px; line-height: 1em; display: block; padding: 0 5px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }




.cadreVideo {
  position: absolute;
}

.cadreFille {
}

.cadreFille:hover {
  border: 3px #FF21C7 solid;
}

#videoIntroFille {
  width: 182px;
  height: 20px!important;
  top: 322px;
  left: 50px;
  display: none;
}


#tab-container {
  margin-top: 30px;
}


.infoPedagogieConteneur {
  width: 90%;
  margin: auto;
  height: auto;
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
  cursor: pointer;
}

.infoPedagogieConteneur b {
  font-size: 20px;
}

#pedagogieBlocNote {
 height: 100%;
}

#pedagogieLogin img, #pedagogieReg img {
  margin-top: -10px;  
}

#pedagogieReg {
  display: none;
  position: relative;
}

#pedagogieReg input, #pedagogieReg input:focus {
  position: absolute;
  font-family: 'spacecowboy';
  background: transparent;
  border: none;
  outline: none;

}

#pedagogieLoginNom {
  top: 91px;
  left: 32px;
  font-size: 24px;
}

#pedagogieLoginEmail {
  top: 170px;
  left: 50px;
  font-size: 18px;
}

#pedagogieLoginPass {
  top: 206px;
  left: 50px;
  font-size: 18px;
}

#pedagogieLoginFb {
  top: 245px;
  left: 50px;
  font-size: 18px;
}

#pedagogieLoginTw {
  top: 282px;
  left: 50px;
  font-size: 18px;
}





#pedagogieRegisterSuccess {
  display: none;
}




#transmediaTimeline {
  width: 100%;
  height: 100%;
  padding-top: 2%;
}

.transmediaTimelineActor {
  width: 100%;
  height: 18%;
}


.infoPedagogieHidden {
  display: none;
}

#pedaTabsFlux, #pedaTabsPerso {
  overflow: auto;
  max-height: 330px;
}

.blocPedagogieConteneur {
  display: none;
  background: url('../img/backpedacont.png') top left no-repeat;
  z-index: 15;
}

.blocPedagogieConteneurHaut {
  width: 100%;
  height: 15%;
  font-size: 40px;
  padding-top: 10px;
  padding-left: 30px;
  font-family: '28DaysLater';
  font-weight: bold;
}

.blocPedagogieConteneurBas {
  width: 100%;
  height: 85%;
  font-size: 16px;
  font-family: 'spacecowboy';
}

.blocPedagogieConteneurContenu {
  width: 65%;
  height: 100%;
  float: left;
  font-size: 12px;
}

.blocPedagogieConteneurSide {
  width: 35%;
  height: 100%;
  float: left;
}

.blocPedagogieConteneurDescription {
  width: 100%;
  height: 55%;
  font-size: 16px;
  overflow: auto;
}

.blocPedagogieConteneurTag {
  width: 100%;
  height: 25%;
  font-size: 20px;
}


.tags {
  font-family: '28DaysLater';
}



.tip-darkgray {
  opacity:0.95;
  z-index:1000;
  text-align:left;
  text-shadow:#444 0 1px 1px;
  border:1px solid #888;
  padding:8px;
  min-width:50px;
  max-width:530px;
  color: white;
  border-radius: 10px;
  background-color: black;

  /**
   * - If you set a background-image, border/padding/background-color will be ingnored.
   *   You can set any padding to .tip-inner instead if you need.
   * - If you want a tiled background-image and border/padding for the tip,
   *   set the background-image to .tip-inner instead.
   */
}
.tip-darkgray .tip-inner {
  font: 12px/22px arial,helvetica,sans-serif;
  margin-top:-1px;
  padding:0 4px 3px 4px;
}

/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
.tip-darkgray .tip-arrow-top {
  margin-top:-7px;
  margin-left:15px;
  top:0;
  left:0;
  width:16px;
  height:10px;
  background:url(../img/tip-darkgray_arrows.png) no-repeat;
}
.tip-darkgray .tip-arrow-right {
  margin-top:-9px; /* approx. half the height to center it */
  margin-left:-7px;
  top:50%;
  left:100%;
  width:11px;
  height:21px;
  background:url(../img/tip-darkgray_arrows.png) no-repeat -22px 0;
}
.tip-darkgray .tip-arrow-bottom {
  margin-top:-7px;
  margin-left:15px;
  top:100%;
  left:0;
  width:22px;
  height:13px;
  background:url(../img/tip-darkgray_arrows.png) no-repeat -44px 0;
}
.tip-darkgray .tip-arrow-left {
  margin-top:-9px; /* approx. half the height to center it */
  margin-left:-6px;
  top:50%;
  left:0;
  width:11px;
  height:21px;
  background:url(../img/tip-darkgray_arrows.png) no-repeat -66px 0;
}




.noteBloc {
  margin-top: 5px;
}



.glowingEffect {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 25px;
  cursor: pointer;
  display: none;
}



/* Scrollbar */


.scroll-pane
{
  width: 100%;
  overflow: auto;
}

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
  overflow: hidden;
  position: relative;
}

.jspPane
{
  position: absolute;
}

.jspVerticalBar
{
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
}



.jspHorizontalBar
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background: red;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
  margin: 0;
  padding: 0;
}

.jspCap
{
  display: none;
}

.jspHorizontalBar .jspCap
{
  float: left;
}

.jspTrack
{
  background: black;
  position: relative;
  width: 2px;
  margin-left: 7px;
  margin-top: 1px;
  margin-bottom: 1px;
}

.jspDrag
{
  background: black;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
  width: 12px;
  margin-left: -5px;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
  float: left;
  height: 100%;
}

.jspArrow
{
  text-indent: -20000px;
  display: block;
  cursor: pointer;
}

.jspArrow.jspDisabled
{
  cursor: default;
  background: none;
}

.jspVerticalBar .jspArrow
{
  height: 2px;
}

.jspHorizontalBar .jspArrow
{
  width: 16px;
  float: left;
  height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
  outline: none;
}

.jspCorner
{
  background: #eeeef4;
  float: left;
  height: 100%;
}

.jspArrowUp
{
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid black;
}
.jspArrowDown
{
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid black;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
  margin: 0 -3px 0 0;
}




footer a {
  text-decoration: none;
}

#footerContact:hover {
}

.footerOn {
  display: none;
}

footer a:hover .footerOn {
  display: inline;
}

footer a:hover .footerOff {
  display: none;
}

.openFont {
  font-family: 'Open Sans', sans-serif;
}

#mentionCont {
  height: 350px;
  width: 550px;
  margin-left: 140px;
  margin-top: 110px;
  font-size: 18px;
font-family: 'Patrick Hand', cursive;
}

#contactCont {
  height: 430px;
  width: 900px;
  margin-left: 110px;
  margin-top: 50px;
  font-size: 13px;
  position: relative;
}

#contactEnv {
  width: 270px;
  height: 80px;
  position: absolute;
  top: 25px;
  left: 90px;
}

#contactEnv2 {
  width: 270px;
  height: 150px;
  position: absolute;
  top: 135px;
  left: 250px;
  font-size: 26px;
}

#contactEnv3 {
  width: 250px;
  height: 100px;
  position: absolute;
  top: 279px;
  left: 10px;
  line-height: 22px;
}


#contactForm {
width: 310px;
height: 370px;
position: absolute;
top: 18px;
left: 585px;
}

#contactForm input, #contactForm textarea, #contactNews input {
  background: transparent;
  border: none;
font-size: 16px;
margin-bottom: 12px;
}

 #contactNews input {
 padding-top: 8px;
 padding-bottom: 6px;
}

#contactNews img {
cursor: pointer;
position: absolute;
left: 201px;
top: 73px;
}

#contactForm textarea {
  position: absolute;
  top: 125px;
  left: 0px;
}

#contactForm img {
    cursor: pointer;
    position: absolute;
  top: 317px;
  left: 202px;
}

#contactFormNom {
  position: absolute;
  top: 3px;
  left: 0px;
}

#contactFormEmail {
  position: absolute;
  top: 44px;
  left: 0px;
}

#contactFormprofession {
  position: absolute;
  top: 85px;
  left: 0px;
}

#contactNews {
  width: 310px;
  height: 100px;
  position: absolute;
  top: 353px;
  left: 585px;
    font-size: 11px;
}

#contactNewsEmail {
  position: absolute;
top: 30px;
left: 0px;
}

.openFont h3, .openFont h2 {
  margin: 0;
}

.ongletWeb {
  position: absolute;
  top: -61px;
  left: -11px;
}

.ongletTrans {
  position: absolute;
  top: -59px;
  left: -30px;
}

.episodeText {
  position: absolute;
  font-family: 'Patrick Hand', cursive;
  top: 21px;
  left: 10px;
  font-size: 15px;
  line-height: 15px;
}

.argText {
  position: absolute;
  font-family: 'Patrick Hand', cursive;
  top: 32px;
  left: 19px;
  font-size: 15px;
  line-height: 15px;
}

.popoteText {
  position: absolute;
  font-family: 'Patrick Hand', cursive;
  top: 31px;
  left: 229px;
  font-size: 15px;
  line-height: 15px;
}

.jdp-eauText {
  position: absolute;
  font-family: 'Patrick Hand', cursive;
  top: 70px;
  left: 10px;
  font-size: 15px;
  line-height: 19px;
}

.kit-antigaspiText {
  position: absolute;
  font-family: 'Patrick Hand', cursive;
  top: 70px;
  left: 13px;
  font-size: 15px;
  line-height: 19px;
}

.transText {
  position: absolute;
  font-family: 'Patrick Hand', cursive;
  top: 32px;
  left: 19px;
  font-size: 15px;
  line-height: 15px;
}

.transText2 {
position: absolute;
font-family: 'Patrick Hand', cursive;
top: 139px;
left: 364px;
font-size: 15px;
line-height: 15px;
text-align: center;
}

.kitText1, .kitText2, .kitText3, .kitText4, .kitText5, .kitText6, .kitText7 {
position: absolute;
font-family: 'Patrick Hand', cursive;
font-size: 15px;
line-height: 15px;
}

.kitText1 {
top: 54px;
left: 260px;
}

.kitText2 {
top: 150px;
left: 266px;
width: 429px;
}

.kitText3 {
top: 214px;
left: 267px;
width: 440px;
}

.kitText4 {
top: 280px;
left: 281px;
}

.kitText5 {
top: 279px;
left: 536px;
}

.kitText6 {
top: 261px;
left: 11px;
}

.kitText7 {
top: 321px;
left: 460px;
}

.kitText7 a {
  font-weight: bold;
font-size: 16px;
color: black;
text-decoration: underline;
}


.ongletKit {
  top: -43px;
left: -25px;
position: absolute;
}


.episodeText h3 {
  margin: 8px 0px 7px 0px;
}

.h2spe1 h3 {
 margin: 9px 0px 7px 0px; 
}

#facebookHeader {
top: 15px!important;
margin: 0px!important;
left: 101px!important;
}

#twitterHeader {
margin: 0px!important;
top: 14px!important;
left: 74px!important;
}

#hdheader {
top: 17px!important;
margin: 0px!important;
left: -50px!important;
}

#sdheader{
top: 17px!important;
margin: 0px!important;
left: -18px!important;
}

#frenchheader {
top: 17px!important;
margin: 0px!important;
left: 18px!important;
}

#englishheader {
top: 17px!important;
margin: 0px!important;
left: 46px!important;
}

#coverWebfic {
  position: absolute;
z-index: 20;
left: 18px;
top: -14px;
}

#partenaireCont {
  width: 719px;
  height: 432px;
  margin-left: 132px;
  margin-top: 111px;
  overflow: auto;
}

#partenaireInnerCont {
  width: 100%;
  height: auto;
  font-family: 'Patrick Hand', cursive;
}

.partenaireBox {
  width: 100%;
  height: auto;
  margin: 10px 0px;
}

#partenaireInnerCont span  {
  background: url('../img/backSpan.png') repeat;
  padding-left:5px;
  padding-right:5px;
  font-family: 'Patrick Hand', cursive;
  font-size: 22px;
  border-radius: 5px;
}

.partenaireDesc {
  float: left;
  width: 48%;
  font-family: 'Patrick Hand', cursive;
}

.partenaireImg {
  float: left;
  width: 51%;
  text-align: center;
}

.partenaireImg img {
  max-width: 50%;
  margin: auto;
  cursor: pointer;
}

.clear {
  clear: both;
}


#pedagogieCont {
    width: 622px;
    height: 404px;
    margin-left: 273px;
    margin-top: 104px;
    overflow: auto;
}



#pedagogieInnerCont-new {
    width: 100%;
    height: auto;
    font-family: 'Patrick Hand', cursive;
}
#pedagogieInnerCont-new div.pad-and-marg {
    margin-bottom:40px;
    padding-right:5px;
}
#pedagogieInnerCont-new a {
    text-decoration: none;
    font-weight:bold;
    color:#000;
}
#pedaButtons-new {
    position: absolute;
    margin-left: 358px;
    margin-top: -50px;
}
#pedaButtons-new img {
    width: 110px;
}
#back-pedagogie {
    position: absolute;
    top:-20px;
    left:-220px;
    width:210px;
    height:70px;
}



#pedagogieInnerCont, #pedagogieInnerCont2, #pedagogieInnerCont3, #pedagogieInnerCont4eau {
  width: 100%;
  height: auto;
  font-family: 'Patrick Hand', cursive;
}

#pedagogieInnerCont {
  display: none;
}

.pedagogieBox {
  width: 100%;
  height: auto;
  margin: 10px 0px;
}

#pedagogieInnerCont span:not(#descriptionEpisode1), #pedagogieInnerCont2 span:not(#descriptionEpisode2), #pedagogieInnerCont3 span:not(#descriptionEpisode3), #pedagogieInnerCont4eau span:not(#descriptionEpisode4eau)  {
  padding-left:5px;
  padding-right:5px;
  background: url('../img/backSpan.png') repeat;
  font-weight: normal;
  font-size: 22px;
  border-radius: 5px;
/*background: url('../img/backSpan.png') repeat;
font-family: 'Patrick Hand', cursive;
font-size: 22px;
color: white;
display: inline-block;
padding: 2px 0px 0px 3px;*/
}

.pedagogieDesc {
  float: left;
  width: 48%;
  font-family: 'Patrick Hand', cursive;
}

.pedagogieImg {
  float: left;
  width: 51%;
  text-align: center;
}

.pedagogieImg img {
  max-width: 50%;
  margin: auto;
  cursor: pointer;
}



#pedagogieInnerCont-new span:not(#descriptionEpisode1):not(#descriptionEpisode2):not(#descriptionEpisode3):not(#descriptionEpisode4Eau) {
  padding-left:5px;
  padding-right:5px;
  background: url('../img/backSpan.png') repeat;
  font-weight: normal;
  font-size: 22px;
  border-radius: 5px;
}
#pedagogieInnerCont-new .pedagogieDesc {
    width: 50%;
}
#pedagogieInnerCont-new .pedagogieDesc img {
    width:158px;
}
#pedagogieInnerCont-new .pedagogieImg {
    width: 50%;
    padding-right:5px;
}
#pedagogieInnerCont-new .pedagogieImg img {
    max-width:none;
    width:158px;
}



.clear {
  clear: both;
}


#pedaAlim {
  position: absolute;
  width: 110px;
margin-left: 358px;
margin-top: -50px;
cursor: pointer;
}

#pedaSecu {
  position: absolute;
  width: 110px;
margin-left: 474px;
margin-top: -50px;
cursor: pointer;
}

#pedaEnergie {
position: absolute;
width: 110px;
margin-left: 589px;
margin-top: -50px;
cursor: pointer;
}

#pedaEau {
position: absolute;
width: 110px;
margin-left: 704px;
margin-top: -50px;
cursor: pointer;
}

#PECont {
  display: none;
  width: 655px;
height: 352px;
margin-left: 256px;
margin-top: 113px;
position: relative;
}

#PECont video {
width: 640px;
height: 360px;
}

.closePE {
position: absolute;
top: 0px;
right: 5px;
cursor: pointer;
z-index: 10;
}

#descEp1, #descEp2, #descEp3, #descEp4eau {
  display: none;
  width: 655px;
height: 352px;
margin-left: 256px;
margin-top: 113px;
position: relative;
  font-family: 'Patrick Hand', cursive;
}

#descEp1 {
font-size: 14px;
line-height: 14px;
background: url('../img/ep1.png') no-repeat;
padding: 22px 8px;
}

#descEp2 {
font-size: 14px;
line-height: 14px;
background: url('../img/ep2.png') no-repeat;
padding: 22px 8px;
}

#descEp3 {
font-size: 14px;
line-height: 14px;
background: url('../img/ep3.png') no-repeat;
padding: 22px 8px;
}

#descEp4eau {
font-size: 14px;
line-height: 14px;
background: url('../img/ep4eau.jpg') no-repeat;
padding: 32px 18px;
height:360px;
}

#descEp4eau.en {
background: url('../img/ep4eau-en.jpg') no-repeat;
}

#descEp1 h3, #descEp2 h3, #descEp3 h3 , #descEp4eau h3 {
  margin:0;
  margin-top:20px;
  margin-bottom:5px;
  line-height: 5px;
}

#descriptionEpisode1, #descriptionEpisode2, #descriptionEpisode3, #descriptionEpisode4eau {
  cursor: pointer;
}



#facebookMarilou {
  position: absolute;
  top: 200px;
  left: 15px;
  height: 38px;
  width: 99px;
  cursor: pointer;
}

#pinterestMarilou{
  position: absolute;
  width: 72px;
  height: 82px;
  top: 235px;
  left: 629px;
  cursor: pointer;
}

#bioMarilou {
  top: 95px;
  left: 147px;
  height: 250px;
  width: 405px;
  padding-right: 20px;
  position: absolute;
  font-size: 13px;
  color: white;
  font-family: 'Patrick Hand', cursive;

}

#bioMarilou .provbold {
  font-weight: bold;
  font-size: 120%;
}



#bioSofian {
  position: absolute;
width: 299px;
height: 190px;
left: 169px;
top: 140px;
font-size: 13px;
  padding-right: 20px;
  font-family: 'Patrick Hand', cursive;
}

#bioSofian .provbold, #bioEmma .provbold, #bioRomain .provbold {
  font-weight: bold;
  font-size: 120%;
}

#citationSofian {
  position: absolute;
top: 191px;
left: 29px;
width: 110px;
font-family: 'Patrick Hand', cursive;
height: 110px;
}

#descSofian {
  position: absolute;
  top: 55px;
  left: 167px;
  width: 171px;
  height: 65px;
  font-family: 'Patrick Hand', cursive;
  font-size: 14px;
  line-height:17px;
}

#descSofian .provbold {
  font-weight: bold;
}

#bioEmma {
  width: 338px;
height: 219px;
position: absolute;
top: 118px;
left: 148px;
font-size: 13px;
padding-right: 20px;
font-family: 'Patrick Hand', cursive;
}

#facebookEmma {
  width: 90px;
height: 34px;
position: absolute;
top: 222px;
left: 17px;
cursor: pointer;
}

#coueurEmma {
  position: absolute;
width: 177px;
height: 54px;
top: 205px;
left: 536px;
font-family: 'Patrick Hand', cursive;
}

#flickrEmma {
  position: absolute;
width: 90px;
height: 40px;
top: 316px;
left: 604px;
cursor: pointer;
}

#bioRomain {
  position: absolute;
width: 333px;
height: 223px;
left: 142px;
font-size: 13px;
top: 121px;
padding-right: 20px;
font-family: 'Patrick Hand', cursive;
}

#facebookRomain {
  position: absolute;
width: 32px;
height: 32px;
top: 236px;
left: 33px;
cursor: pointer;
}

#twitterRomain {
  position: absolute;
width: 32px;
height: 32px;
top: 236px;
left: 73px;
cursor: pointer;
}

#descRomain {
  position: absolute;
width: 252px;
height: 69px;
left: 150px;
top: 21px;
font-family: 'Patrick Hand', cursive;
font-size: 14px;
}

#descRomain .provbold{
font-weight: bold;
}

#tvRomain {
  position: absolute;
width: 135px;
height: 118px;
left: 571px;
top: 228px;
}

#tvRomain img {
margin-top: 17px;
margin-left: 4px;
}


#bioMarilou .jspVerticalBar {
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
transform: rotate(-8deg);
margin-right: 20px;
}

#bioEmma .jspVerticalBar {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
margin-right: 10px;
}

#bioRomain .jspVerticalBar {
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
transform: rotate(-8deg);
margin-right: 15px;
}

.roadmapPE {
  position: absolute;
  height: 22px;
  width: 22px;
  opacity: 0;
}

#creditsCont {
height: 442px;
margin-left: 282px;
margin-top: 60px;
font-family: 'Patrick Hand', cursive;
font-size: 16px;
width: 630px;
}
#creditsCont h1 {
  display:inline;
  padding-left:5px;
  padding-right:5px;
  background: url('../img/backSpan.png') repeat;
  font-weight: normal;
  font-size: 22px;
  border-radius: 5px;
}
#creditsCont h2 {
	font-size: 18px;
}

#episode1pe1 {
top: 52px;
left: 113px;
background: url('../img/roadmap/PE1_ON.png') top left no-repeat;
}

#episode1pe2 {
top: 297px;
left: 103px;
background: url('../img/roadmap/PE2_ON.png') top left no-repeat;
}

#episode1pe3 {
top: 421px;
left: 69px;
background: url('../img/roadmap/PE3_ON.png') top left no-repeat;
}

#episode1pe4 {
top: 536px;
left: 25px;
background: url('../img/roadmap/PE4_ON.png') top left no-repeat;
}


.jspHorizontalBar {
  display: none;
  opacity: 0;
}

.clicable {
  cursor: pointer;
}

#posterEp2 {
  position: absolute;
top: 1px;
left: 1px;
cursor: pointer;
width: 640px;
height: 360px;
  background: url('../img/poster.ep2.jpg') no-repeat top left;
  z-index: 50;
}

.en #posterEp2 {
  position: absolute;
top: 1px;
left: 1px;
cursor: pointer;
width: 640px;
height: 360px;
  background: url('../img/poster.ep2.en.jpg') no-repeat top left;
  z-index: 50;
}

#posterEpisode {
	position: absolute;
	top: 0px;
	left: 0px;
	cursor: pointer;
	width: 640px;
	height: 360px;
	z-index: 50;
}