html, body { background-color: #6c6d99; } #Container { background: url('../../img/background/textures/texture-color--2@2x.png'); } .posterModal:before { background-color: #464763; } .posterModal .quicklink { background: url('data:image/svg+xml;utf8,'); } .posterModal .modalChemin { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterModal .modalAccordeon { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterModal .modal_next { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterModal .modal_cursor { background: url('data:image/svg+xml;utf8,'); } .posterModal .modal_keyboard { background: url('data:image/svg+xml;utf8,'); } .posterModal .modal_touchand { background: url('data:image/svg+xml;utf8,'); } .posterModal .modal_accordion { background: url('data:image/svg+xml;utf8,'); } .endContainer .remarks { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .endContainer .mailto { background: url('data:image/svg+xml;utf8,'); } .posterBack { background-image: url('data:image/svg+xml;utf8,'); background-size: 874px 874px; background-repeat: repeat-x; } .posterMid .cross.small { background-image: url('data:image/svg+xml;utf8,'); background-size: 15px 15px; background-repeat: no-repeat; width: 15px; height: 15px; } .posterMid .cross.medium { background-image: url('data:image/svg+xml;utf8,'); background-size: 30px 30px; width: 30px; height: 30px; } .posterMid .cross.big { background-image: url('data:image/svg+xml;utf8,'); background-size: 55px 55px; width: 55px; height: 55px; } .posterInfos .posterIFs { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; background-size: 215px 250px; } .posterInfos .posterWDD { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterInfos .posterHelp { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterInfos .posterSocial_link.tw { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterInfos .posterSocial_link.tw:hover { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterInfos .posterSocial_link.fb { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterInfos .posterSocial_link.fb:hover { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterInfos .posterSocial_link.heart { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterInfos .posterSocial_link.heart:hover { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterNav .navTitle { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; } .posterNav .navBulletAcc { background-color: #2D2E40; } .posterNav .navBulletAcc:after { background-color: #2D2E40; } .posterNav .navStart:before { background-color: #38ebbc; } .posterNav .navFill { background-color: #38ebbc; } .posterTitleBox .posterIcon { background: url("../../img/icon-theme/icon--2.svg") no-repeat 0 0; background-size: 100px 100px; } .posterArea .classicContainer .anchorPoint.anchortop:after, .posterArea .controverseContainer .anchorPoint.anchortop:after { background-image: url('data:image/svg+xml;utf8,'); } .posterArea .classicContainer .anchorPoint.anchorbottom:after, .posterArea .controverseContainer .anchorPoint.anchorbottom:after { background-image: url('data:image/svg+xml;utf8,'); } .posterArea .titrechapitreContainer .anchortop { background-image: url('data:image/svg+xml;utf8,'); } .posterArea .titrechapitreContainer .anchorbottom { background-image: url('data:image/svg+xml;utf8,'); } .posterArea .titrechapitreContainer .contentBox { background: #38ebbc; } .posterArea .definitionContainer .anchortop, .posterArea .citationContainer .anchortop { background-image: url('data:image/svg+xml;utf8,'); } .posterArea .definitionContainer .anchorbottom, .posterArea .citationContainer .anchorbottom { background-image: url('data:image/svg+xml;utf8,'); } .posterArea .definitionContainer .contentBox, .posterArea .citationContainer .contentBox { color: #464763; } .posterArea .definitionContainer .anchorPoint:after { background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; } .posterArea .definitionContainer.animated .anchorPoint:after { background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; } .posterArea .definitionContainer .contentBox { background-color: #dadae5; } .posterArea .citationContainer .anchorPoint:after { background-image: url('data:image/svg+xml;utf8,'); } .posterArea .citationContainer.animated .anchorPoint:after { background-image: url('data:image/svg+xml;utf8,'); } .posterArea .citationContainer .contentBox { background-color: #dadae5; } .posterArea .controverseContainer .titreCenterControverse { background-image: url('data:image/svg+xml;utf8,'); } .posterArea .controverseContainer .navLeftControverse .bt { background-image: url('data:image/svg+xml;utf8,'); } .posterArea .controverseContainer .navRightControverse .bt { background-image: url('data:image/svg+xml;utf8,'); } .posterArea .controverseContainer .navRightControverse, .posterArea .controverseContainer .navLeftControverse { color: #6c6d99; } .posterArea .controverseContainer .bt.selected { background-image: url('data:image/svg+xml;utf8,') !important; } .posterArea .transitionContainer:before { background-color: #6c6d99; } .posterArea .accordeonContainer .navAccordeonLeft { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; background-size: 50px 100px; } .posterArea .accordeonContainer .navAccordeonRight { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; background-size: 50px 100px; } .posterArea .accordeonContainer .slice { background-color: #464763; } .posterArea .accordeonContainer .inboxContainer p { color: #dadae5; } .posterArea .accordeonContainer .accordeonCloseBt { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; background-size: 39px 39px; } .posterArea .losangeContainer .losange { background: url('data:image/svg+xml;utf8,') no-repeat 0 0; background-size: 100% 100%; } .posterArea .icoMedia[data-type-id="datafixe"], .posterArea .icoMedia[data-type-id="none"], .posterArea .icoMedia[data-type-id="datainteractive"] { background: url('data:image/svg+xml;utf8,'); background-size: 19px 19px; } .posterArea .icoMedia[data-type-id="embed"] { background: url('data:image/svg+xml;utf8,'); background-size: 22px 15px; } .posterArea .icoMedia[data-type-id="image"] { background: url('data:image/svg+xml;utf8,'); background-size: 22px 17px; } .posterArea .icoMedia[data-type-id="video"] { background: url('data:image/svg+xml;utf8,'); background-size: 22px 15px; } /* GENERAL ADMIN SETTINGS */ @font-face { font-family: 'neubau_seriflight'; src: url('../../fonts/neubau-serif-light-webfont.eot'); src: url('../../fonts/neubau-serif-light-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/neubau-serif-light-webfont.woff2') format('woff2'), url('../../fonts/neubau-serif-light-webfont.woff') format('woff'), url('../../fonts/neubau-serif-light-webfont.ttf') format('truetype'), url('../../fonts/neubau-serif-light-webfont.svg#neubau_seriflight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'neubau_serifbold'; src: url('../../fonts/neubauserif-bold-webfont.eot'); src: url('../../fonts/neubauserif-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/neubauserif-bold-webfont.woff2') format('woff2'), url('../../fonts/neubauserif-bold-webfont.woff') format('woff'), url('../../fonts/neubauserif-bold-webfont.ttf') format('truetype'), url('../../fonts/neubauserif-bold-webfont.svg#neubau_serifbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sans_otregular'; src: url('../../fonts/firasansot-regular-webfont.eot'); src: url('../../fonts/firasansot-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/firasansot-regular-webfont.woff2') format('woff2'), url('../../fonts/firasansot-regular-webfont.woff') format('woff'), url('../../fonts/firasansot-regular-webfont.ttf') format('truetype'), url('../../fonts/firasansot-regular-webfont.svg#fira_sans_otregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sans_otmedium'; src: url('../../fonts/firasansot-medium-webfont.eot'); src: url('../../fonts/firasansot-medium-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/firasansot-medium-webfont.woff2') format('woff2'), url('../../fonts/firasansot-medium-webfont.woff') format('woff'), url('../../fonts/firasansot-medium-webfont.ttf') format('truetype'), url('../../fonts/firasansot-medium-webfont.svg#fira_sans_otregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sans_otbold'; src: url('../../fonts/firasansot-bold-webfont.eot'); src: url('../../fonts/firasansot-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/firasansot-bold-webfont.woff2') format('woff2'), url('../../fonts/firasansot-bold-webfont.woff') format('woff'), url('../../fonts/firasansot-bold-webfont.ttf') format('truetype'), url('../../fonts/firasansot-bold-webfont.svg#fira_sans_otbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sans_otbold_italic'; src: url('../../fonts/firasansot-bolditalic-webfont.eot'); src: url('../../fonts/firasansot-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/firasansot-bolditalic-webfont.woff2') format('woff2'), url('../../fonts/firasansot-bolditalic-webfont.woff') format('woff'), url('../../fonts/firasansot-bolditalic-webfont.ttf') format('truetype'), url('../../fonts/firasansot-bolditalic-webfont.svg#fira_sans_otbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sans_otregular_italic'; src: url('../../fonts/firasansot-regularitalic-webfont.eot'); src: url('../../fonts/firasansot-regularitalic-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/firasansot-regularitalic-webfont.woff2') format('woff2'), url('../../fonts/firasansot-regularitalic-webfont.woff') format('woff'), url('../../fonts/firasansot-regularitalic-webfont.ttf') format('truetype'), url('../../fonts/firasansot-regularitalic-webfont.svg#fira_sans_otregular_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sans_otmedium_italic'; src: url('../../fonts/firasansot-mediumitalic-webfont.eot'); src: url('../../fonts/firasansot-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/firasansot-mediumitalic-webfont.woff2') format('woff2'), url('../../fonts/firasansot-mediumitalic-webfont.woff') format('woff'), url('../../fonts/firasansot-mediumitalic-webfont.ttf') format('truetype'), url('../../fonts/firasansot-mediumitalic-webfont.svg#fira_sans_otmedium_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fira_sans_otlight_italic'; src: url('../../fonts/firasansot-lightitalic-webfont.eot'); src: url('../../fonts/firasansot-lightitalic-webfont.eot?#iefix') format('embedded-opentype'), url('../../fonts/firasansot-lightitalic-webfont.woff2') format('woff2'), url('../../fonts/firasansot-lightitalic-webfont.woff') format('woff'), url('../../fonts/firasansot-lightitalic-webfont.ttf') format('truetype'), url('../../fonts/firasansot-lightitalic-webfont.svg#fira_sans_otmedium_italic') format('svg'); font-weight: normal; font-style: normal; } html, body { margin: 0; padding: 0; height: 100%; width: 100%; font-family: Arial; font-size: 12px; } .debug { position: fixed; z-index: 1000; right: 10px; top: 30px; background: #fff; color: #333; width: 600px; } #Page { width: 100%; } #Page.noexpand { background: red; height: 0 !important; } #Container { overflow: hidden; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; } /* ANCHOR POINTS */ .anchorPoint { width: 1px; height: 1px; position: absolute; } /* EMBED SETTINGS */ .tableauPlaceholder { width: 100% !important; min-height: 200px; } /*FRAME */ .frameBorder { position: fixed; background: #fff; z-index: 1000; height: 20px; } .frameTop { top: 0px; left: 0px; width: 100%; } .frameBottom { bottom: 0px; left: 0px; width: 100%; } /* .frameLeft{ top: 20px; bottom: 20px; left: 0px; width: 20px; &:before{ content:""; position: absolute; left: 0px; bottom: 100%; height: 20px; width: 20px; background: #fff; z-index: 1001; } &:after{ content:""; position: absolute; left: 0px; top: 100%; height: 20px; width: 20px; background: #fff; } }*/ /* POSTER NAV */ .posterNav { position: fixed; left: 30px; top: 30px; z-index: 6; min-width: 500px; } .posterNav .decalX { position: absolute; z-index: 100; background: #fff; padding: 10px; } .posterNav .metaposterLink { position: absolute; left: -7px; top: 2px; background: url("../../img/btn-metaposter.svg") no-repeat center 0; background-size: 60px 60px; width: 60px; height: 60px; color: #fff; cursor: pointer; } .posterNav .navTitle { position: absolute; left: 65px; top: 5px; font-size: 14px; text-transform: uppercase; font-family: "fira_sans_otregular"; color: #fff; margin: 0; padding-left: 25px; } .posterNav .navTimeline { width: 500px; background: #fff; height: 6px; border-radius: 6px; position: absolute; left: 70px; top: 35px; } .posterNav .navTimeline .navStart { background: url("../../img/nav/timeline/timeline-start.svg") no-repeat 0 0; background-size: 20px 20px; position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; top: -7px; left: -7px; cursor: pointer; } .posterNav .navTimeline .navStart:before { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 10px; left: 5px; top: 5px; } .posterNav .navTimeline .navBulletContainer { position: relative; left: 0px; z-index: 1; } .posterNav .navTimeline .navBullet { position: absolute; width: 10px; height: 10px; border-radius: 10px; background: #fff; position: absolute; top: -2px; cursor: pointer; margin-left: -5px; } .posterNav .navTimeline .navBullet .bulletTooltip { background: #38ebbc; padding: 3px 5px; color: #fff; position: absolute; left: 0px; top: 100%; opacity: 0; z-index: -1; font-size: 11px; line-height: 13px; border-radius: 5px; min-width: 100px; text-align: center; -webkit-transform: translate(-50%, 6px); -ms-transform: translate(-50%, 6px); transform: translate(-50%, 6px); -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .posterNav .navTimeline .navBullet .bulletTooltip p { margin: 0; } .posterNav .navTimeline .navBullet:hover { background: #38ebbc; } .posterNav .navTimeline .navBullet:hover .bulletTooltip { opacity: 1; z-index: 100; } .posterNav .navTimeline .navBulletAcc { position: absolute; top: 0px; width: 2px; height: 6px; cursor: pointer; margin-left: -1px /*&:after{ content:""; position: absolute; width: 4px; height: 4px; border-radius: 4px; border: 2px solid #fff; position: absolute; top: 10px; left: -3px; }*/ } .posterNav .navTimeline .navFill { position: absolute; height: 6px; left: 0px; width: 0px; top: 0px; z-index: 1; border-radius: 6px; } .posterInfos { position: fixed; left: 80px; bottom: 30px; z-index: 100; } .posterInfos .posterIFs { position: absolute; left: 0px; bottom: 80px; width: 215px; height: 250px; } .posterInfos .posterWDD { position: absolute; left: 0px; bottom: 28px; width: 92px; height: 28px; } .posterInfos .posterHelp { position: absolute; left: 130px; bottom: 0px; width: 90px; height: 38px; } .posterInfos .posterSocial { left: 260px; bottom: 0px; position: absolute; width: 78px; } .posterInfos .posterSocial .posterSocial_link { display: block; float: left; width: 35px; height: 35px; margin-right: 2px; outline: none; } .posterInfos .posterSoutenir { left: 340px; text-align: center; } .posterInfos .posterSoutenir .posterSocial_title { left: 0px !important; } .posterInfos .posterSoutenir .posterSocial_link { float: none; display: inline-block; position: relative; top: 3px; } .posterInfos .posterHelp_title, .posterInfos .posterSocial_title { font-size: 14px; font-family: "fira_sans_otregular"; position: absolute; bottom: 40px; left: 22px; color: #fff; } .posterInfos .posterSocial_title { width: 100%; text-align: center; left: -3px; } /*POSTER BACKGROUND */ .parallaxWrapper { position: absolute; left: 0px; top: 0px; height: 100%; overflow: hidden; } .parallaxWrapper .parallaxBlock { width: 100%; } .posterBack, .posterMid { position: absolute; left: 0px; top: 50%; height: 612px; margin-top: -306px; } .posterBack { opacity: 0.25; height: 874px; margin-top: -437px; } .posterMid .cross { width: 22px; height: 22px; position: absolute; } .posterModal { position: fixed; left: 0px; top: 0px; z-index: 100; width: 100%; height: 100%; opacity: 1; } .posterModal:before { content: ""; opacity: 0.8; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } .posterModal.hidden { opacity: 0; z-index: -1; } .posterModal .posterModalContainer { position: absolute; left: 50%; top: 50%; width: 500px; height: 500px; background: #fff; border-radius: 250px; text-align: center; box-sizing: border-box; padding: 10px 40px; margin-left: -250px; margin-top: -250px; overflow: hidden; } .posterModal .posterModalContainer .quicklink { background-size: 20px 20px; background-repeat: no-repeat; background-position: center 0; font-family: "fira_sans_otregular_italic"; font-size: 10px; line-height: 12px; padding-top: 22px; color: #6c6d99; cursor: pointer; } .posterModal .posterModalContainer .modal_content { position: absolute; left: 0px; width: 100%; top: 80px; height: 400px; overflow: hidden; } .posterModal .posterModalContainer .modal_content .modal_content_slider { width: 300%; height: 100%; position: absolute; left: 0px; top: 0px; -webkit-transition: left 0.3s ease-out; transition: left 0.3s ease-out; } .posterModal .posterModalContainer .modal_content .modal_content_slider[data-step='2'] { left: -100%; } .posterModal .posterModalContainer .modal_content .modal_content_slider[data-step='3'] { left: -200%; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide { float: left; width: 33.3%; text-align: center; height: 100%; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide p { margin: 0 0 10px; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .postr_logo { background: url("../../img/modale/logo-postr.svg") no-repeat center 0; background-size: 120px 120px; width: 100%; height: 120px; margin: 26px 0 10px; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_text { font-size: 14px; line-height: 24px; font-family: "fira_sans_otregular"; color: #6c6d99; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_subtitle { font-size: 18px; font-family: "fira_sans_otlight_italic"; color: #6c6d99; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_subtitle.bigmargin { margin-bottom: 30px; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_title { font-size: 18px; font-family: "fira_sans_otbold"; color: #6c6d99; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_picto { width: 80px; height: 80px; background-image: url("../../img/home/sprite-icons-themes@2x.png"); background-repeat: no-repeat; background-position: -80px 0px; background-size: 960px 160px; position: relative; display: inline-block; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_picto:before { background-color: #6c6d99; content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1; border-radius: 80px; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_summary { padding: 0 50px; list-style: none; color: #6c6d99; font-size: 12px; line-height: 18px; height: 140px; overflow: auto; font-family: "fira_sans_otmedium"; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_summary p { margin: 0; display: inline; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_summary li { margin: 0 0 4px; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_text2_title { font-family: "fira_sans_otbold"; font-size: 12px; line-height: 16px; color: #6c6d99; margin: 0; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_text2 { font-family: "fira_sans_otregular_italic"; font-size: 12px; line-height: 16px; color: #6c6d99; margin: 0; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_decopics { margin: 10px 0 20px; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_decopics .modal_decopic { display: inline-block; background-size: 70px 70px; width: 70px; height: 70px; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_slide_col2 { width: 50%; float: left; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_slide_col2 .modal_line { background: url("../../img/modale/line--2.svg"); background-size: 120px 60px; width: 120px; height: 60px; display: inline-block; } .posterModal .posterModalContainer .modal_content .modal_content_slider .modal_slide .modal_slide_col2 .modal_accordion { background-size: 70px 70px; width: 70px; height: 70px; display: inline-block; } .posterModal .posterModalContainer .modal_content .modal_next { position: absolute; left: 50%; bottom: 0px; cursor: pointer; background-size: 39px 39px; background-position: center 0px; font-family: "fira_sans_otregular_italic"; font-size: 16px; padding-top: 44px; color: #6c6d99; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } .posterModal .posterModalContainer .modalBlock { display: inline-block; width: 100%; } .posterModal .posterModalContainer .modalBlock.modalPicto { width: 80px; height: 80px; background-image: url("../../img/home/sprite-icons-themes@2x.png"); background-repeat: no-repeat; background-position: -80px 0px; background-size: 960px 160px; position: relative; } .posterModal .posterModalContainer .modalBlock.modalPicto:before { background-color: #6c6d99; content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: -1; border-radius: 80px; } .posterModal .posterModalContainer .modalBlock.modalPictoTitle { font-family: "neubau_serifbold"; font-size: 18px; letter-spacing: -0.03em; color: #6c6d99; margin-top: 10px; } .posterModal .posterModalContainer .modalBlock.modalChemin { margin-top: 20px; width: 62px; height: 22px; } .posterModal .posterModalContainer .modalBlock.modalCheminText { font-family: "fira_sans_otmedium_italic"; font-size: 18px; line-height: 24px; color: #6c6d99; margin-top: 10px; } .posterModal .posterModalContainer .modalBlock.modalAccordeon { margin-top: 20px; width: 32px; height: 44px; } .posterModal .posterModalContainer .modalBlock.modalAccordeonText { font-family: "fira_sans_otmedium_italic"; font-size: 18px; line-height: 24px; color: #6c6d99; margin-top: 10px; } /* POSTER EDITOR TOOLBAR */ .posterSpace { position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; opacity: 0; z-index: 5; } .posterSpace.displayed { opacity: 1; } /* POSTER DECORATION LINES */ .posterDecoration { position: relative; left: 0px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .posterDecoration .decoContainer { position: absolute; left: 0px; height: 100%; } .posterDecoration .deco { position: absolute; height: 1px; border-top: 2px dashed #fff; margin-top: 1px; opacity: 0.2; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: left center 0; -ms-transform-origin: left center 0; transform-origin: left center 0; } .posterDecoration .decoFill { position: absolute; height: 0px; margin-top: -1px; border-top: 4px solid #fff; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: left center 0; -ms-transform-origin: left center 0; transform-origin: left center 0; box-shadow: 0px 0px 10px 0px #fff; } /* POSTER EDITOR UI */ .posterArea { top: 50%; margin-top: -256px; position: relative; height: 562px /* ON OVER POSTER*/ /*TITLE BOX */ /* DEFAULT POSTER*/ /* CONTAINERS CONFIG */ } .posterArea .overflowBox { position: fixed; left: 60px; top: 40px; height: 1px; background: #fff; width: 1px; overflow: auto; } .posterArea .toolsContainer > div { opacity: 0; } .posterArea .handlerMove { opacity: 0; } .posterArea .handlerDelete { opacity: 0; } .posterArea .ui-draggable-dragging { z-index: 99; } .posterArea .ui-resizable-handle { opacity: 0; } .posterArea.open .toolsContainer > div { opacity: 1; } .posterArea.open .toolsContainer { top: -1px !important; } .posterArea.open .handlerMove { opacity: 1; } .posterArea.open .handlerDelete { opacity: 1; } .posterArea.open .ui-resizable-handle { opacity: 1; } .posterArea .posterTitleBox { position: absolute; left: 300px; top: 50%; margin-top: -50px; width: 100px; height: 100px; } .posterArea .posterTitleBox .posterIcon { position: relative; width: 100px; height: 100px; } .posterArea .posterTitleBox .posterIcon:before { content: ""; position: absolute; width: 80px; height: 80px; left: 10px; top: 10px; border-radius: 80px; box-shadow: 0px 0px 20px 0px #fff; } .posterArea .posterTitleBox .posterTitle { margin: 0px; font-size: 80px; line-height: 80px; color: #fff; font-family: "neubau_seriflight"; position: absolute; bottom: 100px; left: 50px; width: 300px; font-weight: normal; } .posterArea .posterTitleBox .posterDisclaimer { font-size: 12px; line-height: 15px; color: #fff; position: absolute; top: 100px; left: 50px; width: 300px; font-family: "fira_sans_otregular"; } .posterArea .posterTitleBox .anchorPoint { left: 50px; top: 50px; } .posterArea .boxGlobalContainer { width: 250px; position: absolute !important; height: 250px; } .posterArea .boxGlobalContainer .contentBox { position: absolute; width: 100%; height: 100%; overflow: auto; } .posterArea .classicContainer:after { content: ""; position: absolute; width: 100%; bottom: 0px; left: 0px; height: 20px; opacity: 0; border-radius: 0px 0px 10px 10px; /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #ffffff 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ) /* IE6-9 */ } .posterArea .classicContainer:before { content: ""; position: absolute; width: 100%; top: 0px; left: 0px; height: 20px; opacity: 0; border-radius: 10px 10px 0px 0px; /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, rgba(255, 255, 255, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%, rgba(255, 255, 255, 0) 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ z-index: 10; } .posterArea .classicContainer.animated:after, .posterArea .classicContainer.animated:before { opacity: 1; } .posterArea .classicContainer .contentBox { background-color: #FFF; border-radius: 10px; font-family: "Arvo"; font-size: 14px; line-height: 20px; color: #464763; opacity: 0; box-shadow: 0 -10px 20px 0 rgba(0, 0, 0, 0.15); } .posterArea .classicContainer .contentBox .h1 { font-family: "Arvo"; font-weight: 700; font-size: 16px; line-height: 18px; color: #464763; } .posterArea .classicContainer .contentBox .h2 { font-family: "Arvo"; font-weight: 700; font-size: 14px; line-height: 18px; color: #464763; } .posterArea .classicContainer .contentBox .h3 { font-family: "Arvo"; font-size: 14px; line-height: 18px; color: #464763; } .posterArea .classicContainer.animated .contentBox { opacity: 1; } .posterArea .classicContainer .anchorBar { content: ""; position: absolute; width: 4px; height: 70px; background: #fff; left: 50%; opacity: 0; margin-left: -2px; } .posterArea .classicContainer .anchorBar.anchortop { bottom: 100%; } .posterArea .classicContainer .anchorBar.anchorbottom { top: 100%; } .posterArea .classicContainer.animated .anchorBar { opacity: 1; } .posterArea .classicContainer .anchorDiv { position: absolute; width: 100%; height: 103px; background-repeat: no-repeat; } .posterArea .classicContainer .anchorDiv.anchorPoint { left: 50%; background: transparent; } .posterArea .classicContainer .anchorDiv.anchorPoint:after { content: ""; position: absolute; left: 0px; top: 0px; width: 39px; height: 102px; } .posterArea .classicContainer .anchorDiv.anchorPoint.anchorbottom { bottom: -180px; } .posterArea .classicContainer .anchorDiv.anchorPoint.anchorbottom:after { margin-left: -20px; margin-top: -80px; } .posterArea .classicContainer .anchorDiv.anchorPoint.anchortop { top: -90px; } .posterArea .classicContainer .anchorDiv.anchorPoint.anchortop:after { margin-left: -20px; margin-top: -10px; } .posterArea .titrechapitreContainer, .posterArea .citationContainer, .posterArea .definitionContainer { min-height: 50px; height: auto !important; position: relative; } .posterArea .titrechapitreContainer .contentBox, .posterArea .citationContainer .contentBox, .posterArea .definitionContainer .contentBox { height: auto !important; padding-top: 15px; padding-bottom: 15px; } .posterArea .titrechapitreContainer .contentBox .inboxContainer, .posterArea .citationContainer .contentBox .inboxContainer, .posterArea .definitionContainer .contentBox .inboxContainer { margin-top: 0px; margin-bottom: 0px; } .posterArea .titrechapitreContainer .ui-resizable-s, .posterArea .citationContainer .ui-resizable-s, .posterArea .definitionContainer .ui-resizable-s { display: none !important; } .posterArea .titrechapitreContainer .ui-resizable-e, .posterArea .citationContainer .ui-resizable-e, .posterArea .definitionContainer .ui-resizable-e { width: 1px; background-color: #1E1E1E; } .posterArea .titrechapitreContainer .ui-resizable-se, .posterArea .citationContainer .ui-resizable-se, .posterArea .definitionContainer .ui-resizable-se { display: none !important; } .posterArea .titrechapitreContainer p, .posterArea .citationContainer p, .posterArea .definitionContainer p { margin: 0; } .posterArea .titrechapitreContainer .contentBox, .posterArea .citationContainer .contentBox, .posterArea .definitionContainer .contentBox { border-radius: 10px; overflow-x: visible !important; overflow-y: visible !important; position: relative; } .posterArea .titrechapitreContainer .anchorDiv, .posterArea .citationContainer .anchorDiv, .posterArea .definitionContainer .anchorDiv { position: absolute; width: 100%; height: 33px; background-repeat: no-repeat; } .posterArea .titrechapitreContainer .anchorDiv.anchortop, .posterArea .citationContainer .anchorDiv.anchortop, .posterArea .definitionContainer .anchorDiv.anchortop { background-position: 50px top; top: -33px; } .posterArea .titrechapitreContainer .anchorDiv.anchorbottom, .posterArea .citationContainer .anchorDiv.anchorbottom, .posterArea .definitionContainer .anchorDiv.anchorbottom { background-position: 50px top; bottom: -33px; } .posterArea .titrechapitreContainer .definitionBottomArrow, .posterArea .citationContainer .definitionBottomArrow, .posterArea .definitionContainer .definitionBottomArrow { position: absolute; bottom: -33px; left: 63px; width: 35px; height: 33px; background-image: url(img/definitionBottomArrow.png); } .posterArea .titrechapitreContainer .anchorDiv { position: absolute; width: 100%; height: 86px; background-repeat: no-repeat; z-index: 2; } .posterArea .titrechapitreContainer .anchorDiv.anchortop { background-position: 50px top; top: -34px; } .posterArea .titrechapitreContainer .anchorDiv.anchorbottom { background-position: 50px top; bottom: -86px; } .posterArea .titrechapitreContainer .anchorPoint { left: 50px; } .posterArea .titrechapitreContainer .anchorPoint.anchortop { top: -60px; } .posterArea .titrechapitreContainer .anchorPoint.anchorbottom { bottom: -60px; } .posterArea .titrechapitreContainer .anchorPoint:after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 20px; background: #fff; border: 3px solid #464763; left: 0px; top: 0px; margin-left: -12px; margin-top: -12px; } .posterArea .titrechapitreContainer .contentBox { font-family: 'neubau_serifbold'; font-size: 40px; line-height: 40px; letter-spacing: -0.03em; color: #FFF; opacity: 0.9; padding: 10px 0 15px; z-index: 1; } .posterArea .definitionContainer .contentBox { font-family: 'fira_sans_otregular'; font-size: 18px; line-height: 24px; opacity: 0; } .posterArea .definitionContainer .contentBox .h2 { font-size: 15px; font-family: 'Arvo'; font-weight: 700; } .posterArea .definitionContainer.animated .contentBox { opacity: 1; margin-top: 0; } .posterArea .definitionContainer .anchorDiv { opacity: 0; position: absolute; width: 100%; height: 129px; background-repeat: no-repeat; } .posterArea .definitionContainer .anchorDiv.anchortop { background-position: 50px top; top: -34px; margin-top: 50px; } .posterArea .definitionContainer .anchorDiv.anchorbottom { background-position: 50px top; bottom: -129px; margin-top: -50px; } .posterArea .definitionContainer.animated .anchorDiv { opacity: 1; margin-top: 0; } .posterArea .definitionContainer .anchorPoint { left: 46px; } .posterArea .definitionContainer .anchorPoint .anchorPointText { position: absolute; left: -45px; font-size: 30px; letter-spacing: -0.03em; font-family: "neubau_serifbold"; color: #fff; } .posterArea .definitionContainer .anchorPoint.anchortop { top: -60px; } .posterArea .definitionContainer .anchorPoint.anchortop .anchorPointText { bottom: 20px; } .posterArea .definitionContainer .anchorPoint.anchorbottom { bottom: -60px; } .posterArea .definitionContainer .anchorPoint.anchorbottom .anchorPointText { top: 20px; } .posterArea .definitionContainer .anchorPoint:after { content: ""; position: absolute; width: 33px; height: 34px; left: 0px; top: 0px; margin-left: -17px; margin-top: -17px; } .posterArea .citationContainer { width: 350px !important; } .posterArea .citationContainer .contentBox { font-family: "fira_sans_otregular_italic"; font-size: 18px; line-height: 24px; opacity: 0; } .posterArea .citationContainer .contentBox:before { content: ""; position: absolute; left: 7px; top: 7px; background: url("../../img/icon-box/citation-open.svg") no-repeat 0 0; background-size: 45px 37px; width: 45px; height: 37px; } .posterArea .citationContainer .contentBox:after { content: ""; position: absolute; right: 6px; bottom: 5px; background: url("../../img/icon-box/citation-close.svg") no-repeat 0 0; background-size: 40px 40px; width: 45px; height: 37px; } .posterArea .citationContainer .contentBox .inboxContainer { margin: 0 15px 0 60px; padding: 10px 0; font-size: 15px; font-family: "Arvo"; font-weight: 700; } .posterArea .citationContainer .contentBox .inboxContainer .h1 { font-size: 18px; line-height: 24px; font-family: 'fira_sans_otregular_italic'; color: #464763; font-weight: normal; } .posterArea .citationContainer.anchorbottom .contentBox { margin-top: 0px; } .posterArea .citationContainer.anchortop .contentBox { margin-top: 0px; } .posterArea .citationContainer.animated .contentBox { opacity: 1; } .posterArea .citationContainer .anchorDiv { position: absolute; width: 100%; height: 134px; background-repeat: no-repeat; opacity: 0; } .posterArea .citationContainer .anchorDiv.displayed { opacity: 1; } .posterArea .citationContainer .anchorDiv.anchortop { background-position: 50px top; top: -34px; margin-top: 50px; } .posterArea .citationContainer .anchorDiv.anchorbottom { background-position: 50px top; bottom: -128px; margin-top: -50px; } .posterArea .citationContainer.animated .anchorDiv { opacity: 1; margin-top: 0px; } .posterArea .citationContainer .anchorPoint { left: 48px; } .posterArea .citationContainer .anchorPoint .anchorPointText { position: absolute; left: -35px; font-size: 30px; letter-spacing: -0.03em; font-family: "neubau_serifbold"; color: #fff; } .posterArea .citationContainer .anchorPoint.anchortop { top: -52px; } .posterArea .citationContainer .anchorPoint.anchortop .anchorPointText { bottom: 20px; } .posterArea .citationContainer .anchorPoint.anchorbottom { bottom: -52px; } .posterArea .citationContainer .anchorPoint.anchorbottom .anchorPointText { top: 20px; } .posterArea .citationContainer .anchorPoint:after { content: ""; position: absolute; width: 27px; height: 27px; left: 0px; top: 0px; margin-left: -14px; margin-top: -14px; } .posterArea .questionContainer { min-height: 50px; height: auto !important; } .posterArea .questionContainer .contentBox { height: auto !important; position: relative; bottom: -5px; font-size: 30px !important; margin-top: -50px; opacity: 0; font-family: 'neubau_seriflight'; color: #FFF; overflow-x: visible !important; overflow-y: visible !important; } .posterArea .questionContainer .contentBox .inboxContainer { margin-left: 0px; margin-right: 0px; } .posterArea .questionContainer.animated .contentBox { opacity: 1; margin-top: 0px; } .posterArea .questionContainer .anchorDiv { position: absolute; width: 100%; height: 134px; background-repeat: no-repeat; } .posterArea .questionContainer .anchorDiv.anchortop { background-image: url(img/citationTopArrow.png); background-position: 50px top; top: -128px; } .posterArea .questionContainer .anchorDiv.anchorbottom { background-image: url(img/citationBottomArrow.png); background-position: 50px top; bottom: -128px; } .posterArea .questionContainer .anchorPoint { bottom: -25px; left: 23px; } .posterArea .questionContainer p { margin: 0; } .posterArea .questionContainer .questionBottomLine { position: absolute; width: 100%; height: 134px; background-repeat: no-repeat; overflow: hidden; bottom: -134px; opacity: 0; margin-top: -50px; } .posterArea .questionContainer .questionBottomLine .questionBottomLeftLine { width: 52px; height: 25px; background-image: url(img/questionBottomLeft.png); background-position: left top; float: left; } .posterArea .questionContainer .questionBottomLine .questionBottomRightLine { height: 25px; width: 100%; margin-left: 52px; background-repeat: repeat-x; background-image: url(img/questionBottomRight.png); background-position: left top; } .posterArea .questionContainer.animated .questionBottomLine { opacity: 1; margin-top: 0px; } .posterArea .questionContainer .questionBottomLineBack { width: 100%; overflow: hidden; position: relative; height: 25px; } .posterArea .questionContainer .questionBottomLineBack .questionBottomLeftLine { position: absolute; width: 52px; height: 25px; background-image: url(img/questionBottomLeft.png); } .posterArea .questionContainer .questionBottomLineBack .questionBottomRightLine { position: absolute; height: 25px; width: 100%; left: 52px; background-image: url(img/questionBottomRight.png); background-repeat: repeat-x; } .posterArea .controverseContainer.front { /*removed and after init added element */ } .posterArea .controverseContainer.front .anchorBar { content: ""; position: absolute; width: 4px; height: 70px; background: #fff; left: 50%; opacity: 0; margin-left: -2px; } .posterArea .controverseContainer.front .anchorBar.anchortop { bottom: 100%; } .posterArea .controverseContainer.front .anchorBar.anchorbottom { top: 100%; } .posterArea .controverseContainer.front.animated .anchorBar { opacity: 1; } .posterArea .controverseContainer.front .navControverse { width: 100%; display: table; padding-top: 10px; position: absolute; z-index: 10; background: #fff; opacity: 0; border-radius: 10px 10px 0 0; } .posterArea .controverseContainer.front .navControverse .titreCenterControverse { text-align: center; font-family: 'Arvo', serif; color: #FFF; font-size: 20px; padding: 5px; background-repeat: no-repeat; background-position: center top; cursor: pointer; } .posterArea .controverseContainer.front .navControverse .navLeftControverse { width: 50px; vertical-align: middle; text-align: center; padding-top: 22px; position: relative; font-family: "Arvo"; font-size: 16px; } .posterArea .controverseContainer.front .navControverse .navLeftControverse:after { content: "non"; text-transform: uppercase; position: absolute; bottom: -3px; right: 3px; } .posterArea .controverseContainer.front .navControverse .navLeftControverse .bt { background-repeat: no-repeat; width: 40px; height: 59px; margin-left: 10px; cursor: pointer; position: relative; } .posterArea .controverseContainer.front .navControverse .rowControverse { display: table-row; } .posterArea .controverseContainer.front .navControverse .rowControverse > div { display: table-cell; } .posterArea .controverseContainer.front .navControverse .navRightControverse { width: 50px; vertical-align: middle; padding-top: 22px; position: relative; font-family: "Arvo"; font-size: 16px; } .posterArea .controverseContainer.front .navControverse .navRightControverse:after { content: "oui"; text-transform: uppercase; position: absolute; bottom: -3px; left: 3px; } .posterArea .controverseContainer.front .navControverse .navRightControverse .bt { background-repeat: no-repeat; width: 40px; height: 59px; cursor: pointer; position: relative; } .posterArea .controverseContainer.front.animated .navControverse { opacity: 1; } .posterArea .controverseContainer.front .contentBox { background-color: #FFF; border-radius: 10px; opacity: 0; box-shadow: 0 -10px 20px 0 rgba(0, 0, 0, 0.15); } .posterArea .controverseContainer.front.animated .contentBox { opacity: 1; } .posterArea .controverseContainer.front .controverseTitle { margin-top: 30px; text-align: center; font-family: 'Arvo', serif; color: #333333; font-size: 20px; line-height: 25px; text-transform: uppercase; margin-left: 55px; margin-right: 55px; z-index: 11; margin-bottom: 50px; opacity: 0; visibility: visible; } .posterArea .controverseContainer.front.animated .controverseTitle { opacity: 1; } .posterArea .controverseContainer.front .contentBox .inboxContainer { color: #333333; font-size: 13px; line-height: 22px; font-family: "fira_sans_otregular"; opacity: 0; visibility: hidden; } .posterArea .controverseContainer.front .contentBox .inboxContainer { position: absolute; top: 100px; left: 0px; } .posterArea .controverseContainer.front .contentBox .inboxContainer.displayed { opacity: 1; visibility: visible; } .posterArea .controverseContainer.front .anchorDiv { position: absolute; width: 100%; height: 103px; background-repeat: no-repeat; } .posterArea .controverseContainer.front .anchorDiv.anchorPoint { left: 50%; background: transparent; } .posterArea .controverseContainer.front .anchorDiv.anchorPoint:after { content: ""; position: absolute; left: 0px; top: 0px; width: 39px; height: 102px; } .posterArea .controverseContainer.front .anchorDiv.anchorPoint.anchorbottom { bottom: -180px; } .posterArea .controverseContainer.front .anchorDiv.anchorPoint.anchorbottom:after { margin-left: -20px; margin-top: -80px; } .posterArea .controverseContainer.front .anchorDiv.anchorPoint.anchortop { top: -90px; } .posterArea .controverseContainer.front .anchorDiv.anchorPoint.anchortop:after { margin-left: -20px; margin-top: -10px; } .mediaTitleBox { font-family: "Arvo"; font-weight: 700; font-size: 16px; color: #464763; line-height: 22px; } .mediaSourceBox { font-family: "fira_sans_otregular_italic"; font-size: 12px; color: #6c6d99; } .mediaTypeSelect { margin-right: 10px; } .bioContainer { background: url("../../img/shadow-bibliographie@2x.png") repeat-y 0 0 #464763; box-sizing: border-box; padding: 60px 60px 0px; left: auto !important /* todo : change classname -> fake anchorBAr*/ } .bioContainer:before, .bioContainer:after { content: ""; position: absolute; width: 100%; height: 300px; background: url("../../img/shadow-bibliographie@2x.png") repeat-y 0 0 #464763; left: 0px; } .bioContainer:before { bottom: 100%; } .bioContainer:after { top: 100%; } .bioContainer h1 { font-family: "neubau_serifbold"; font-size: 40px; letter-spacing: -0.03em; color: #fff; margin: 0px 0px 20px; } .bioContainer .anchorBar { position: absolute; width: 440px; top: 500px; height: 40px; left: 60px; z-index: 100; /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(70, 71, 99, 0)), color-stop(100%, #464763)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(70, 71, 99, 0) 0%, #464763 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ background: linear-gradient(to bottom, rgba(70, 71, 99, 0) 0%, #464763 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ) /* IE6-9 */ } .bioContainer .anchorPoint { position: absolute; width: 440px; top: 60px; height: 40px; left: 60px; z-index: 100; /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, left top, color-stop(0%, rgba(70, 71, 99, 0)), color-stop(100%, #464763)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(bottom, rgba(70, 71, 99, 0) 0%, #464763 100%); /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ background: linear-gradient(to top, rgba(70, 71, 99, 0) 0%, #464763 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ) /* IE6-9 */ } .bioContainer .contentBox { font-family: "fira_sans_otregular_italic"; font-size: 12px; line-height: 16px; color: #fff; width: 440px !important; height: 460px !important; padding-top: 20px; } .bioContainer .contentBox .inboxContainer { margin: 0; } .bioContainer .contentBox .inboxContainer p { margin: 0; } .bioContainer .contentBox .inboxContainer p:first-child .h1 { margin: 0 !important; } .bioContainer .contentBox .inboxContainer p:first-child .h1:before { background: transparent !important; } .bioContainer .contentBox .h1 { font-family: "Arvo"; font-weight: 700; font-size: 12px; line-height: 16px; color: #fff; display: block; margin: 25px 0 0; position: relative; } .bioContainer .contentBox .h1:before { content: ""; position: absolute; left: 0px; top: -20px; width: 10px; height: 1px; background: #fff; } .bioContainer .contentBox a { font-family: "fira_sans_otbold"; font-size: 12px; line-height: 16px; color: #38ebbc; background: transparent; position: relative; padding-left: 20px; } .bioContainer .contentBox a:before { content: "➡"; position: absolute; left: 0px; top: 2px; color: #fff; font-family: "fira_sans_otbold"; font-size: 12px; line-height: 16px; } .accordeonContainer { width: 1px; background: transparent !important; } .accordeonContainer:after { content: ""; position: absolute; height: 70px; width: 638px; bottom: 0px; left: 65px; box-shadow: 0 -70px 70px -30px #464763 inset; z-index: 100; opacity: 0; } .accordeonContainer.open { width: 768px !important; } .accordeonContainer.open:after { opacity: 1; } .accordeonContainer.open .toggleOpen { background-image: url("img/ico-close-box.png"); } .accordeonContainer.open .contentBox { z-index: 1; } .accordeonContainer .contentBox { height: 460px !important; margin-top: 90px; width: 768px !important; border-radius: 5px; overflow-y: auto; position: absolute; z-index: -1; font-size: 15px; line-height: 22px; font-family: "Arvo"; color: #fff; } .accordeonContainer .contentBox.realContent { opacity: 0; } .accordeonContainer .contentBox.realContent.displayed { opacity: 1; } .accordeonContainer .contentBox .h1 { font-weight: 700; } .accordeonContainer .contentBox .inboxContainer { margin: 0 65px; } .accordeonContainer .accordeonTitle { text-align: center; height: 70px; line-height: 70px; position: absolute; left: 0px; top: 10px; opacity: 0; width: 767px; background: #464763; z-index: 1; } .accordeonContainer .accordeonTitle.displayed { opacity: 1; } .accordeonContainer .accordeonTitle:after { content: ""; position: absolute; left: 0px; top: 100%; width: 100%; height: 10px; background: url("../../img/shadow-header-accordion@2x.png") no-repeat center 0; background-size: 768px 10px; } .accordeonContainer .accordeonTitle h1 { margin: 0; font-family: "neubau_serifbold"; font-size: 30px; letter-spacing: -0.03em; color: #fff; } .accordeonContainer .accordeonTitle .accordeonCloseBt { position: absolute; right: 20px; top: 15px; width: 39px; height: 39px; cursor: pointer; } .accordeonContainer .paperfold { float: left; width: 2px; height: 100%; overflow: hidden; background: #fff; position: relative; } .accordeonContainer .paperfold:before { content: ""; width: 1px; background: #333; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 10; } .accordeonContainer .paperfold:after { content: ""; width: 1px; height: 100%; position: absolute; right: 0px; top: 0px; z-index: 100; background: #b5b6cc; } .accordeonContainer.open .paperfold { width: 768px; } .accordeonContainer.open .paperfold .slice .overlay { opacity: 0 !important; } .accordeonContainer .navAccordeon { position: absolute; top: 0; height: 100%; width: 100%; } .accordeonContainer .navAccordeon .navAccordeonLeft { cursor: pointer; position: absolute; left: -50px; top: 50%; width: 50px; height: 100px; margin-top: -50px; border-radius: 50px 0px 0px 50px; box-shadow: 0 0 30px 0 #fff; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .accordeonContainer .navAccordeon .navAccordeonRight { cursor: pointer; position: absolute; right: -50px; top: 50%; width: 50px; height: 100px; margin-top: -50px; border-radius: 0 50px 50px 0; box-shadow: 0 0 30px 0 #fff; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .accordeonContainer .anchorPoint { left: 50%; top: 50%; } .classicContainer { min-width: 250px; } .transitionContainer .losangeContainer { width: 100%; height: 100%; position: absolute; opacity: 0; } .transitionContainer .losangeContainer .losange { width: 100%; height: 100%; position: absolute; } .transitionContainer.animated .losangeContainer { opacity: 1; } .transitionContainer .contentBox { display: table; box-shadow: none !important; opacity: 0; } .transitionContainer.animated .contentBox { opacity: 1; } .transitionContainer .inboxContainer { position: relative; display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle; font-family: 'Arvo', serif; color: #FFF; font-size: 16px; line-height: 20px; } .transitionContainer .anchorPoint { left: 50%; top: 50%; } .contentBox.ui-droppable .inboxContainer .handlerDelete { display: block; } .contentBox.ui-droppable .inboxContainer .handlerMove { display: block; } .contentBox.ui-droppable .inboxContainer.predelete { background-color: #FF0000 !important; } .inboxContainer { position: relative; margin: 15px 30px; } .inboxContainer .handlerDelete { display: none; height: 13px; left: -15px; color: #FF0000; position: absolute; top: 20px; width: 13px; background-image: url("img/ico-delete.png"); background-repeat: no-repeat; cursor: pointer; } .inboxContainer .handlerMove { display: none; height: 13px; position: absolute; left: -15px; width: 13px; background-image: url("img/ico-move-inbox.png"); cursor: pointer; } .inboxContainer.predelete { background-color: #FF0000 !important; } .inboxContainer img { max-width: 100%; height: auto; padding-top: 10px; padding-bottom: 10px; } .inboxContainer .editableContent { width: 100%; } .inboxContainer .mediaTypeSelect { float: left; } .inboxContainer .mediaTypeSelect .icoMedia { width: 22px; height: 22px; background-repeat: no-repeat; z-index: 999; position: relative; top: 2px; } .inboxContainer .embedBox { min-height: 20px; padding: 10px; } .inboxContainer .editableTitleMedia { padding-left: 30px; font-family: 'Arvo', serif; color: #333333; font-weight: 700; font-size: 16px; } .inboxContainer a { padding: 0px; color: #333; text-decoration: none; outline: none; border-bottom: 3px solid #38ebbc; } .inboxContainer a:hover { border-bottom: 3px solid #333; } .inboxContainer h1 { font-family: "Arvo"; font-size: 16px; line-height: 18px; text-transform: uppercase; } .inboxContainer .tooltip { border: 1px solid #333; border-radius: 5px; padding: 0 4px; background: #fff; cursor: pointer; position: relative; display: inline-block; } .inboxContainer .tooltip:hover { background: #333; color: #fff; } .tooltipText { position: fixed; padding: 10px; background: #333; color: #fff; opacity: 0; font-size: 12px; font-family: "fira_sans_otbold_italic"; line-height: 16px; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5); letter-spacing: 0.05rem; z-index: -1; margin-top: -18px; display: block; border-radius: 10px 10px 10px 0; max-width: 260px; -webkit-transform: translate(0, -100%); -ms-transform: translate(0, -100%); transform: translate(0, -100%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .tooltipText:after { content: ""; position: absolute; top: 100%; left: 0px; width: 0; height: 0; border-left: 0px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #333; } .tooltipText.displayed { opacity: 1; z-index: 1000; } .endContainer { position: absolute; width: 281px; height: 281px; background: #fff; border-radius: 200px; text-align: center; margin-left: -320px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .endContainer .title { background: url("../../img/logo-postr-wo.svg") no-repeat center 0; background-size: 120px 120px; width: 100%; margin-top: 0px; padding-top: 100px; font-size: 14px; font-family: "fira_sans_otregular_italic"; color: #6c6d99; } .endContainer .remarks { display: block; background-size: 30px 30px; background-position: center 0; font-size: 12px; line-height: 16px; font-family: "fira_sans_otregular_italic"; color: #6c6d99; margin-top: 10px; padding-top: 40px; cursor: pointer; } .endContainer .mailto { font-size: 10px; display: block; color: #6c6d99; font-family: "fira_sans_otbold"; background-size: 30px 30px; background-repeat: no-repeat; background-position: center 0; margin-top: 4px; padding-top: 30px; cursor: pointer; } .endContainer .mailto:hover { color: #464763; } .endContainer .anchorPoint { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; background: transparent; } html.touch { -webkit-overflow-scrolling: touch; } html.touch *, html.touch *:before, html.touch *:after { box-shadow: none !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html.touch #Page { display: none; } html.touch .posterDecoration { visibility: hidden; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } html.touch .posterDecoration svg { width: 100%; height: 100%; } html.touch .posterDecoration svg line { opacity: 0.3; } html.touch .boxGlobalContainer { margin-top: 30px; } html.touch .posterSpace { visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } html.touch .posterSpace.displayed { visibility: visible; overflow-x: auto; overflow-y: hidden; } html.touch .posterSpace.displayed .posterArea { visibility: visible; } html.touch .posterSpace.displayed .posterDecoration { visibility: visible; } html.touch .posterArea { position: absolute; top: 50%; overflow: hidden; visibility: hidden; margin-top: -290px; height: 588px; padding-right: 800px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } html.touch .posterArea .bioContainer { right: 0px !important; display: block !important; } html.touch .frameBorder { height: 30px; } html.touch .posterInfos { bottom: 40px; } html.touch .open .paperfold { background-color: #464763 !important; } html.touch .slice { display: none; } /* EMBEDED CONTENT SETTINGS */ iframe { max-width: 100%; } table { width: 100%; } svg { max-width: 100%; } /* END EMBEDED CONTENT SETTINGS */ html.no-touch .navTimeline { -webkit-transition: width 1s ease-out; transition: width 1s ease-out; } html.no-touch .navBulletContainer { -webkit-transition: left 1s ease-out; transition: left 1s ease-out; } html.no-touch .navBulletAcc { -webkit-transition: width 1s ease-out; transition: width 1s ease-out; } html.no-touch .posterModal { -webkit-transition: opacity 0.3s ease-out, z-index 0.3s ease-out; transition: opacity 0.3s ease-out, z-index 0.3s ease-out; } html.no-touch .posterSpace { -webkit-transition: opacity 0.6s ease-out; transition: opacity 0.6s ease-out; } html.no-touch .decoContainer { -webkit-transition: left 1s ease-out; transition: left 1s ease-out; } html.no-touch .boxGlobalContainer { -webkit-transition: left 1s ease-out; transition: left 1s ease-out; } html.no-touch .classicContainer { -webkit-perspective: 600px; perspective: 600px; } html.no-touch .classicContainer:after, html.no-touch .classicContainer:before { -webkit-transition: opacity 0s ease-out, -webkit-transform 0.3s ease-out; transition: opacity 0s ease-out, transform 0.3s ease-out; } html.no-touch .classicContainer.animated:after, html.no-touch .classicContainer.animated:before { -webkit-transition: opacity 0.3s ease-out 0.3s; transition: opacity 0.3s ease-out 0.3s; } html.no-touch .classicContainer .contentBox { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: opacity 0.3s ease-out, -webkit-transform 0.3s ease-out; transition: opacity 0.3s ease-out, transform 0.3s ease-out; } html.no-touch .classicContainer .anchorBar { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } html.no-touch .definitionContainer .contentBox, html.no-touch .citationContainer .contentBox { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } html.no-touch .definitionContainer.anchorbottom .contentBox, html.no-touch .citationContainer.anchorbottom .contentBox { -webkit-transform: translate(0, -50px); -ms-transform: translate(0, -50px); transform: translate(0, -50px); } html.no-touch .definitionContainer.anchortop .contentBox, html.no-touch .citationContainer.anchortop .contentBox { -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); } html.no-touch .definitionContainer.animated .contentBox, html.no-touch .citationContainer.animated .contentBox { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } html.no-touch .definitionContainer .anchorDiv, html.no-touch .citationContainer .anchorDiv { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } html.no-touch .definitionContainer.anchorbottom .anchorDiv, html.no-touch .citationContainer.anchorbottom .anchorDiv { -webkit-transform: translate(0, -50px); -ms-transform: translate(0, -50px); transform: translate(0, -50px); } html.no-touch .definitionContainer.anchortop .anchorDiv, html.no-touch .citationContainer.anchortop .anchorDiv { -webkit-transform: translate(0, 50px); -ms-transform: translate(0, 50px); transform: translate(0, 50px); } html.no-touch .definitionContainer.animated .anchorDiv, html.no-touch .citationContainer.animated .anchorDiv { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } html.no-touch .definitionContainer .anchorPoint:after, html.no-touch .citationContainer .anchorPoint:after { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } html.no-touch .questionContainer .contentBox { -webkit-transition: opacity 0.3s ease-out, margin-top 0.3s ease-out; transition: opacity 0.3s ease-out, margin-top 0.3s ease-out; } html.no-touch .questionContainer .questionBottomLine { -webkit-transition: opacity 0.3s ease-out, margin-top 0.3s ease-out; transition: opacity 0.3s ease-out, margin-top 0.3s ease-out; } html.no-touch .controverseContainer.front { -webkit-perspective: 600px; perspective: 600px; } html.no-touch .controverseContainer.front .anchorBar { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: opacity 0.3s ease-out, margin-top 0.3s ease-out; transition: opacity 0.3s ease-out, margin-top 0.3s ease-out; } html.no-touch .controverseContainer.front .navControverse { -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } html.no-touch .controverseContainer.front.animated .navControverse { -webkit-transition: opacity 0.3s ease-out 0.3s; transition: opacity 0.3s ease-out 0.3s; } html.no-touch .controverseContainer.front .contentBox { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } html.no-touch .controverseContainer.front .contentBox .inboxContainer.displayed { -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } html.no-touch .accordeonContainer { -webkit-transition: width 1s ease-out !important; transition: width 1s ease-out !important; } html.no-touch .accordeonContainer.open:after { -webkit-transition: opacity 0.3s ease-out 0.9s; transition: opacity 0.3s ease-out 0.9s; } html.no-touch .accordeonContainer .contentBox.realContent { -webkit-transition: opacity 0.3s ease-out 0s !important; transition: opacity 0.3s ease-out 0s !important; } html.no-touch .accordeonContainer .contentBox.realContent.displayed { -webkit-transition: opacity 0.3s ease-out 1s !important; transition: opacity 0.3s ease-out 1s !important; } html.no-touch .accordeonContainer .accordeonTitle { -webkit-transition: opacity 0s ease-out 0s !important; transition: opacity 0s ease-out 0s !important; } html.no-touch .accordeonContainer .accordeonTitle.displayed { -webkit-transition: opacity 0.3s ease-out 1s !important; transition: opacity 0.3s ease-out 1s !important; } html.no-touch .accordeonContainer .paperfold { -webkit-perspective: 1400px; perspective: 1400px; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transition: width 1s ease-out; transition: width 1s ease-out; } html.no-touch .accordeonContainer .paperfold .slice { height: 100%; -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 1s ease-out 0s; transition: all 1s ease-out 0s; width: 192px; z-index: 100; } html.no-touch .accordeonContainer .paperfold .slice.s1 { -webkit-transform: rotate3d(0, 1, 0, 102deg); -ms-transform: rotate3d(0, 1, 0, 102deg); transform: rotate3d(0, 1, 0, 102deg); } html.no-touch .accordeonContainer .paperfold .slice.s2 { -webkit-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, -179deg); -ms-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, -179deg); transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, -179deg); } html.no-touch .accordeonContainer .paperfold .slice.s3 { -webkit-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 179deg); -ms-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 179deg); transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 179deg); } html.no-touch .accordeonContainer .paperfold .slice.s4 { width: 196px; -webkit-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, -179deg); -ms-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, -179deg); transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, -179deg); } html.no-touch .accordeonContainer .paperfold .slice .overlay { width: 192px; height: 100%; opacity: 1; position: absolute; -webkit-transition: all 1s linear; transition: all 1s linear; } html.no-touch .accordeonContainer .paperfold .slice.s3 > .overlay, html.no-touch .accordeonContainer .paperfold .slice.s1 > .overlay { background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%); background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%); } html.no-touch .accordeonContainer .paperfold .slice.s4 > .overlay, html.no-touch .accordeonContainer .paperfold .slice.s2 > .overlay { background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); } html.no-touch .accordeonContainer.open .paperfold .slice.s1 { -webkit-transform: rotate3d(0, 1, 0, 0deg); -ms-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } html.no-touch .accordeonContainer.open .paperfold .slice.s2 { -webkit-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 0deg); -ms-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 0deg); transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 0deg); } html.no-touch .accordeonContainer.open .paperfold .slice.s3 { -webkit-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 0deg); -ms-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 0deg); transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 0deg); } html.no-touch .accordeonContainer.open .paperfold .slice.s4 { -webkit-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 0deg); -ms-transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 0deg); transform: translate3d(191px, 0px, 0px) rotate3d(0, 1, 0, 0deg); } html.no-touch .transitionContainer .losangeContainer { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } html.no-touch .transitionContainer .contentBox { -webkit-transition: opacity 0s ease-out; transition: opacity 0s ease-out; } html.no-touch .transitionContainer.animated .contentBox { -webkit-transition: opacity 0.3s ease-out 0.3s; transition: opacity 0.3s ease-out 0.3s; } html.no-touch .inboxContainer a:hover { -webkit-transition: color 0.3s ease-out; transition: color 0.3s ease-out; } html.no-touch .tooltipText { -webkit-transtion: opacity 0.3s ease-out; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } html.no-touch .classicContainer .contentBox, html.no-touch .controverseContainer .contentBox { -webkit-transform: rotate3d(0, 1, 0, 25deg); -ms-transform: rotate3d(0, 1, 0, 25deg); transform: rotate3d(0, 1, 0, 25deg); } html.no-touch .classicContainer .anchorBar, html.no-touch .controverseContainer .anchorBar { -webkit-transform: rotate3d(0, 1, 0, 25deg); -ms-transform: rotate3d(0, 1, 0, 25deg); transform: rotate3d(0, 1, 0, 25deg); } html.no-touch .animated.classicContainer .contentBox, html.no-touch .animated.controverseContainer .contentBox { -webkit-transform: rotate3d(0, 1, 0, 0deg); -ms-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } html.no-touch .animated.classicContainer .anchorBar, html.no-touch .animated.controverseContainer .anchorBar { -webkit-transform: rotate3d(0, 1, 0, 0deg); -ms-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } html, body { height: 100%; } .poster { position: absolute; height: 100%; width: 6000px; background-color: #CCC; } .box { width: 350px; height: 200px; background-color: #333; }