/****GENERAL ****/ body{margin: 0;} .lb-close {margin: -30px;} /*pop up avatar */ .mfp-wrap {z-index: 1000000001 !important;} .mfp-counter {display: none !important;} img.mfp-img {z-index: 1000000000 !important;} /*** HAUT ***/ #haut{width: 100%; float: left; margin: 2% 0 ; position: absolute;} #wrapReseauxSoc{width: 48%; float: left; margin: 0 0 0 2%;} .reseauxSoc{float: left; height: auto; margin-right: 1%;} .imgReseauxSoc{width: 30%;} #wrapConnectLP {width: 48%; float: right; margin: 0 2% 0 0;} #connectLP {height: 100%; margin: 0 auto;} #connectionIndex {margin: 0 0 0 0;} /* reseaux sociaux */ #btFB a, #btTwitter a, #btYoutube a, #btPinterest a, #btGoogle a {font-family: 'wonderblah_elmt', 'Oswald', Verdana, Arial, Helvetica, sans-serif; font-size: 42px; text-decoration: none; color: #82CFF0; opacity: 0.5;} #btFB a:hover, #btTwitter a:hover, #btYoutube a:hover, #btPinterest a:hover, #btGoogle a:hover {opacity: 1;} /* Connect */ #wrapConnexion{width: 48%; float: right; height: 43px; padding-right: 2%;} .connexion{float: right; margin-left: 1%;} /*** CONTENT ***/ #content{width: 100%; float: left; margin: 5% 0 5%;} #contentAll{width: 50%; margin: 0 auto;} #wrapLogoMotto {float: left; margin-bottom: 5%;} #Logo {width: 16%; float: left; margin: 0 0 0 10%;} #wrapSVG {width: 100%;} #imgLogo {width: 75%; float: right; padding-right: 5%;} #Motto {width: 74%; float: left;margin-top: 7%;margin-left: -5%;} #imgMotto {width: 80%; float: left;} #wrapVideo {float: left; width: 100%;} #video {text-align: center;} #video iframe {height: 300px; width: 75%;} #MY_VIDEO_1 {width: 100%;} #wrapBouton{width: 100%; float: left; margin-top: 2%;} #boutonLP{width: 75%; margin: 0 auto;} #boutonIntroduction {width: 100%; text-align: center;} #lienIndex{ line-height: 18px; background-color: #82cff0; color: white; font-family: 'wonderblah', 'Oswald', Verdana, Arial, Helvetica, sans-serif; font-size: 20px; padding: 17px 0 8px 0; letter-spacing: 2px; border-radius: 5px; text-decoration: none; float: left; width: 100%;} a.#lienIndex {padding: 10px;} #lienIndex:hover {background-color: #FDC300;} #lienIndex:active {margin: 1px 0 -1px; background-color: #FDC300;} #avatarleft1 {position: absolute; width: 83px;margin: 147px 0 0 -406px; } #bubbleleft1 { width: 138px; position: absolute;margin: 130px 0 0 -452px; } #avatarleft2 { position: absolute;width: 83px; margin: 309px 0 0 -406px; } #bubbleleft2 { position: absolute;width: 138px; margin: 298px 0 0 -452px } #avatarright1 { position: absolute;width: 83px; margin:147px 0 0 58px ;} #bubbleright1 { position: absolute;width: 138px; margin: 130px 0 0 59px;} #avatarright2 { position: absolute;width: 83px; margin: 309px 0 0 59px ; } #bubbleright2 { position: absolute;width: 138px; margin: 298px 0 0 59px; } @media all and (min-width: 650px){ #avatarleft1 {position: absolute; width: 83px;margin: 147px 0 0 -434px; } #bubbleleft1 { width: 138px; position: absolute;margin: 130px 0 0 -486px; } #avatarleft2 { position: absolute;width: 83px; margin: 309px 0 0 -434px; } #bubbleleft2 { position: absolute;width: 138px; margin: 298px 0 0 -486px } #avatarright1 { position: absolute;width: 83px; margin:147px 0 0 83px ;} #bubbleright1 { position: absolute;width: 138px; margin: 130px 0 0 73px;} #avatarright2 { position: absolute;width: 83px; margin: 309px 0 0 83px ; } #bubbleright2 { position: absolute;width: 138px; margin: 298px 0 0 73px; } } @media all and (min-width: 711px){ #avatarleft1 {position: absolute; width: 83px;margin: 147px 0 0 -478px; } #bubbleleft1 { width: 138px; position: absolute;margin: 130px 0 0 -530px; } #avatarleft2 { position: absolute;width: 83px; margin: 309px 0 0 -478px; } #bubbleleft2 { position: absolute;width: 138px; margin: 298px 0 0 -530px } #avatarright1 { position: absolute;width: 83px; margin:147px 0 0 94px ;} #bubbleright1 { position: absolute;width: 138px; margin: 130px 0 0 91px;} #avatarright2 { position: absolute;width: 83px; margin: 309px 0 0 94px ; } #bubbleright2 { position: absolute;width: 138px; margin: 298px 0 0 91px; } } @media all and (min-width: 768px){ #avatarleft1 {position: absolute; width: 83px;margin: 147px 0 0 -479px; } #bubbleleft1 { width: 138px; position: absolute;margin: 130px 0 0 -568px; } #avatarleft2 { position: absolute;width: 83px; margin: 392px 0 0 -479px; } #bubbleleft2 { position: absolute;width: 138px; margin: 385px 0 0 -568px } #avatarright1 { position: absolute;width: 83px; margin:147px 0 0 88px ;} #bubbleright1 { position: absolute;width: 138px; margin: 130px 0 0 115px;} #avatarright2 { position: absolute;width: 83px; margin: 392px 0 0 88px ; } #bubbleright2 { position: absolute;width: 138px; margin: 385px 0 0 115px; } } @media all and (min-width: 850px){ #avatarleft1 {position: absolute; width: 83px;margin: 147px 0 0 -535px; } #bubbleleft1 { width: 138px; position: absolute;margin: 130px 0 0 -619px; } #avatarleft2 { position: absolute;width: 83px; margin: 380px 0 0 -535px; } #bubbleleft2 { position: absolute;width: 138px; margin: 363px 0 0 -619px } #avatarright1 { position: absolute;width: 83px; margin:147px 0 0 84px ;} #bubbleright1 { position: absolute;width: 138px; margin: 130px 0 0 112px;} #avatarright2 { position: absolute;width: 83px; margin: 380px 0 0 84px ; } #bubbleright2 { position: absolute;width: 138px; margin: 363px 0 0 112px; } } @media all and (min-width: 1000px){ #avatarleft1 {position: absolute; width: 100px;margin: 147px 0 0 -634px; } #bubbleleft1 { width: 167px; position: absolute;margin: 130px 0 0 -739px; } #avatarleft2 { position: absolute;width: 100px; margin: 377px 0 0 -634px; } #bubbleleft2 { position: absolute;width: 167px; margin: 356px 0 0 -739px; } #avatarright1 { width: 100px;} #bubbleright1 { width: 167px; margin: 130px 0 0 125px;} #avatarright2 { width: 100px; } #bubbleright2 { width: 167px;margin: 363px 0 0 125px; } } @media all and (min-width: 1110px){ #avatarleft1 {position: absolute; width: 140px;margin: 147px 0 0 -733px; } #bubbleleft1 { width: 250px; position: absolute;margin: 130px 0 0 -846px; } #avatarleft2 { position: absolute;width: 140px; margin: 343px 0 0 -733px; } #bubbleleft2 { position: absolute;width: 250px; margin: 314px 0 0 -846px } #avatarright1 { position: absolute;width: 140px; margin:147px 0 0 84px ;} #bubbleright1 { position: absolute;width: 250px; margin: 130px 0 0 86px;} #avatarright2 { position: absolute;width: 140px; margin: 343px 0 0 84px ; } #bubbleright2 { position: absolute;width: 250px; margin: 314px 0 0 86px; } } @media all and (min-width: 1310px){ #avatarleft1 {position: absolute; width: 140px;margin: 147px 0 0 -805px; } #bubbleleft1 { width: 250px; position: absolute;margin: 123px 0 0 -960px; } #avatarleft2 { position: absolute;width: 140px; margin: 349px 0 0 -805px; } #bubbleleft2 { position: absolute;width: 250px; margin: 325px 0 0 -960px; } #avatarright1 { position: absolute;width: 140px; margin:147px 0 0 84px ;} #bubbleright1 { position: absolute;width: 250px; margin: 123px 0 0 125px;} #avatarright2 { position: absolute;width: 140px; margin: 349px 0 0 84px ; } #bubbleright2 { position: absolute;width: 250px; margin: 325px 0 0 125px; } } @media all and (min-width: 1440px){ #avatarleft1 {position: absolute; width: 140px;margin: 147px 0 0 -900px; } #bubbleleft1 { width: 250px; position: absolute;margin: 130px 0 0 -1060px; } #avatarleft2 { position: absolute;width: 140px; margin: 357px 0 0 -900px; } #bubbleleft2 { position: absolute;width: 250px; margin: 340px 0 0 -1060px } } @media all and (min-width: 1610px){ #avatarleft1 {position: absolute;width: 189px;height: auto;margin: 170px 0 0 -1000px;} #avatarleft2 {position: absolute;width: 189px;height: auto;margin: 420px 0 0 -1000px;} #avatarright1 {position: absolute;width: 189px;height: auto;margin: 170px 0 0 30px;} #avatarright2 {position: absolute;width: 189px;height: auto;margin: 420px 0 0 30px;} #bubbleleft1 {position: absolute;width: 350px;margin: 120px 0 0 -1230px;} #bubbleleft2 {position: absolute;width: 350px;margin: 391px 0 0 -1230px;} #bubbleright1 {position: absolute;width: 350px;margin: 120px 0 0 90px;} #bubbleright2 {position: absolute;width: 350px;margin: 391px 0 0 90px;} } @media all and (min-width: 1900px){ #avatarleft1 {position: absolute;width: 250px;height: auto;margin: 210px 0 0 -500px;} #avatarleft2 {position: absolute;width: 250px;height: auto;margin: 500px 0 0 -500px;} #avatarright1 {position: absolute;width: 250px;height: auto;margin: 210px 0 0 750px;} #avatarright2 {position: absolute;width: 250px;height: auto;margin: 500px 0 0 750px;} #bubbleleft1 {position: absolute;width: 450px;margin: 190px 0 0 -750px;} #bubbleleft2 {position: absolute;width: 450px;margin: 461px 0 0 -750px;} #bubbleright1 {position: absolute;width: 450px;margin: 190px 0 0 800px;} #bubbleright2 {position: absolute;width: 450px;margin: 461px 0 0 800px;} } @media all and (min-width: 2400px){ #avatarleft1 {position: absolute;width: 250px;height: auto;margin: 210px 0 0 -700px;} #avatarleft2 {position: absolute;width: 250px;height: auto;margin: 500px 0 0 -700px;} #avatarright1 {position: absolute;width: 250px;height: auto;margin: 210px 0 0 1000px;} #avatarright2 {position: absolute;width: 250px;height: auto;margin: 500px 0 0 1000px;} #bubbleleft1 {position: absolute;width: 450px;margin: 190px 0 0 -950px;} #bubbleleft2 {position: absolute;width: 450px;margin: 461px 0 0 -950px;} #bubbleright1 {position: absolute;width: 450px;margin: 190px 0 0 1050px;} #bubbleright2 {position: absolute;width: 450px;margin: 461px 0 0 1050px;} } @media all and (min-width: 2498px){ #avatarleft1 {position: absolute;width: 250px;height: auto;margin: 210px 0 0 -700px;} #avatarleft2 {position: absolute;width: 250px;height: auto;margin: 500px 0 0 -700px;} #avatarright1 {position: absolute;width: 250px;height: auto;margin: 210px 0 0 1000px;} #avatarright2 {position: absolute;width: 250px;height: auto;margin: 500px 0 0 1000px;} #bubbleleft1 {position: absolute;width: 450px;margin: 190px 0 0 -900px;} #bubbleleft2 {position: absolute;width: 450px;margin: 461px 0 0 -900px;} #bubbleright1 {position: absolute;width: 450px;margin: 190px 0 0 1050px;} #bubbleright2 {position: absolute;width: 450px;margin: 461px 0 0 1050px;} } @media all and (min-width: 2997px){ #avatarleft1 {position: absolute;width: 250px;height: auto;margin: 210px 0 0 -700px;} #avatarleft2 {position: absolute;width: 250px;height: auto;margin: 500px 0 0 -700px;} #avatarright1 {position: absolute;width: 250px;height: auto;margin: 210px 0 0 1200px;} #avatarright2 {position: absolute;width: 250px;height: auto;margin: 500px 0 0 1200px;} #bubbleleft1 {position: absolute;width: 450px;margin: 190px 0 0 -900px;} #bubbleleft2 {position: absolute;width: 450px;margin: 461px 0 0 -900px;} #bubbleright1 {position: absolute;width: 450px;margin: 190px 0 0 1250px;} #bubbleright2 {position: absolute;width: 450px;margin: 461px 0 0 1250px;} } @media all and (min-width: 2999px){ #avatarleft1 {position: absolute;width: 300px;height: auto;margin: 44px 0 0 -1850px;} #avatarleft2 {position: absolute;width: 300px;height: auto;margin: 395px 0 0 -1850px;} #avatarright1 {position: absolute;width: 300px;height: auto;margin: 44px 0 0 100px;} #avatarright2 {position: absolute;width: 300px;height: auto;margin: 395px 0 0 100px;} #bubbleleft1 {position: absolute;width: 500px;margin: 40px 0 0 -2073px;} #bubbleleft2 {position: absolute;width: 500px;margin: 367px 0 0 -2073px;} #bubbleright1 {position: absolute;width: 500px;margin: 40px 0 0 120px;} #bubbleright2 {position: absolute;width: 500px;margin: 367px 0 0 120px;} } @media all and (min-width: 3800px){ #avatarleft1 {position: absolute;width: 350px;height: auto;margin: 227px 0 0 -850px;} #avatarleft2 {position: absolute;width: 350px;height: auto;margin: 878px 0 0 -850px;} #avatarright1 {position: absolute;width: 350px;height: auto;margin: 227px 0 0 1400px;} #avatarright2 {position: absolute;width: 350px;height: auto;margin: 878px 0 0 1400px;} #bubbleleft1 {position: absolute;width: 600px;margin: 144px 0 0 -1204px;} #bubbleleft2 {position: absolute;width: 600px;margin: 808px 0 0 -1204px;} #bubbleright1 {position: absolute;width: 600px;margin: 144px 0 0 1478px;} #bubbleright2 {position: absolute;width: 600px;margin: 808px 0 0 1478px;} } /*** Bas CONTENT ***/ #bas-content{width: 100%; float: left; height: auto; margin-top: 1%;} #wrapAvatar{width: 75%; margin: 0 auto;} .avatarCaption{float: left;width: 10%; z-index: 1 !important;} .special{margin-right: 12%; z-index: 2 !important;} .avatar{transition-duration: 1s;transition-property: transform; z-index: 3 !important;} .avatarPresentation{width: 100%;} .avatar:hover{transform: rotateY(360deg);} .caption{text-align: center;color:#82cff0; font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif;margin-bottom: 35px;} .firstLine{font-weight: 300;} .secondLine{font-weight: 300;} /*** MINI liblahry ***/ #mini-liblahry {display: inline-block;width: 100%;height: 100%;margin-bottom: 10px;margin-top: 5%;} ul#ul-master-blahs {text-align: center;margin: 0 auto;} ul#ul-master-blahs li {float: left;position: relative;width: 19%;margin: 0 -3% 5% -3%;padding: 0 0 0 6% !important;list-style-type: none;} .liblahry-img img {outline: none; width: 68% !important; height: 100%;} /* iPad */ @media all and (min-width: 769px) and (max-width: 1199px) { #listBlahs #ul-master-blahs li .liblahry-img img {outline: none; width: 75% !important; height: 100%;} #listBlahs ul#ul-master-blahs li { width: 32%; } } .overlayLiblhary {width: 68%; height: 100%; margin: 0;position: absolute;z-index: 1;} #listBlahs #ul-master-blahs li .liblahry-img {width: 100%; position: relative; float: left; outline: none;} .overlayLiblhary:hover::after {position: absolute; content: '\f002'; width: 100%; height: 100%; margin: 33% 0 0 -50%;font-family: 'FontAwesome'; color: #FDC300; font-size: 4em;} .overlayLiblhary:hover::before {position: absolute; content: ''; width: 50%; height: 50%; margin: 25% 0 0 -25%; background: rgba(250,250,250,0.6); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;} #goToTop-button {display: none; position: fixed; bottom: 20px; right: 30px; z-index: 400; border: solid 3px #FFFFFF; outline: none; background-color: #FDC300; color: white; cursor: pointer; padding: 0 1% 0.3%; border-radius: 10px; font-size: 70px; opacity: 0.7;} #goToTop-button:hover {opacity: 1;}