@charset "UTF-8"; * { -webkit-box-sizing: border-box; box-sizing: border-box; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; font-smoothing: antialiased; font-smooth: never; -moz-font-smooth: never; box-sizing: border-box; } @font-face { font-family: 'Helvetica'; src: url("fonts/HelveticaLTStd-Roman.otf") format("opentype"); } @font-face { font-family: 'HelveticaOblique'; src: url("fonts/HelveticaLTStd-Obl.otf") format("opentype"); } @font-face { font-family: 'HappyTimes'; src: url("fonts/happy-times-NG_regular_master.otf") format("opentype"); } @font-face { font-family: 'HappyTimesOblique'; src: url("fonts/happy-times-NG_italic_master.otf") format("opentype"); } @font-face { font-family: 'SelfModern'; src: url("fonts/Self Modern Italic.otf") format("opentype"); } html { height: 100%; } body { margin: 0; padding: 0; background: black; overflow: hidden; } .home { margin: 0; padding: 0; background: black; background-image: url(outlinebg.png); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; } .noScroll { width: 100%; height: 100%; position: absolute; overflow: hidden; } .menu { font-family: Helvetica; font-size: 9pt; font-weight: normal; position: fixed; top: 3px; left: 3px; } .menu .buttonsMenu { background: black; color: white; display: inline-block; border-width: 1px; border-style: solid; border-radius: 1vw; border-color: white; padding: 0.3vw 0.6vw 0.3vw 0.6vw; cursor: pointer; } .menu .buttonsMenu:hover { background: #ff3f1d; color: black; border-color: #ff3f1d; } #aboutUs { background: black; color: white; display: inline-block; border-width: 1px; border-style: solid; border-radius: 1vw; border-color: white; padding: 0.3vw 0.6vw 0.3vw 0.6vw; cursor: pointer; } #aboutUs:hover { background: #ff3f1d; color: black; border-color: #ff3f1d; } .hoverAboutUs { display: none; position: absolute; top: 2vw; left: 6vw; } .hoverAboutUs .closeButton { position: absolute; margin: 3px; background: black; color: white; display: inline-block; border-width: 1px; border-style: solid; border-radius: 1vw; border-color: white; padding: 0.2vw 0.4vw 0.2vw 0.4vw; cursor: pointer; top: 2px; right: 2px; font-family: Helvetica; font-size: 0.5vw; } .hoverAboutUs .closeButton:hover { background: white; color: black; border-color: white; } .iconsSideMenu { font-family: Helvetica; font-size: 9pt; font-weight: normal; position: fixed; display: block; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 3px; } .iconsSideMenu img { width: 5vw; margin: 5px; display: block; } .object { position: absolute; width: 10vw; cursor: move; color: white; text-align: center; font-family: SelfModern; font-size: 1.2 vw; font-weight: normal; } .object #Rd { display: none; } .object p { /*opacity: 0; transform: translateY(-50%); transition: transform 500ms ease-in-out, opacity 300ms ease-in-out; */ display: none; margin: 0; } .object:hover p { /*opacity: 1; transform: translateY(0);*/ display: block; } .object:hover #Rd { display: block; } .object:hover #BW { display: none; } .object img { width: 100%; display: inline; } .object a { position: absolute; top: 50%; left: 50%; width: 30%; height: 30%; cursor: pointer; display: block; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .landingPage { position: relative; padding: 9vw 20vw 0 20vw; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: black; background-image: url(backgroundproducercountries.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; overflow: hidden; color: white; text-align: center; font-family: Helvetica; font-size: 1vw; font-weight: normal; } .landingPage p { padding: 2vw 5vw; } .landingPage h1 { font-family: SelfModern; font-size: 400%; font-weight: normal; margin: 0 0 30w 0; padding: 1vw; } .landingPage .buttonEnter { margin: 5% 0 0 0; background: black; color: white; display: inline-block; position: fixed; top: 60%; right: 50%; border-width: 1px; border-style: solid; border-radius: 3vw; border-color: white; padding: 1.5vw 1vw 1.5vw 1vw; cursor: pointer; } .landingPage .buttonEnter:hover { background: #ff3f1d; color: black; border-color: #ff3f1d; } .object:nth-child(1) { left: 10%; top: 87%; } .object:nth-child(2) { left: 71%; top: 20%; } .object:nth-child(3) { left: 88%; top: 32%; } .object:nth-child(4) { left: 87%; top: 45%; } .object:nth-child(5) { left: 73%; top: 60%; } .netherlands { position: relative; background: black; background-image: url(backgroundnetherlands.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; overflow: hidden; color: white; font-family: Helvetica; font-size: 0.8vw; font-weight: normal; } .netherlands p { position: absolute; left: 48vw; width: 20vw; top: 11vw; } .netherlands .buttonEnter { margin: 1% 0 0 0; background: black; color: white; display: inline-block; top: 70%; left: 50%; position: fixed; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-width: 1px; border-style: solid; border-radius: 3vw; border-color: white; font-size: 1vw; padding: 0.5vw 0.7vw 0.5vw 0.7vw; cursor: pointer; } .netherlands .buttonEnter:hover { background: #ff3f1d; color: black; border-color: #ff3f1d; } .producerscountries { position: relative; background: black; background-image: url(backgroundproducercountries.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; overflow: hidden; color: white; text-align: center; font-family: Helvetica; font-size: 0.8vw; font-weight: normal; } .producerscountries p { position: absolute; width: 30vw; left: 35vw; -webkit-transform: translateY(-50%); transform: translateY(-50%); top: 27vw; } .producerscountries .buttonEnter { margin: 1% 0 0 0; background: black; color: white; display: inline-block; top: 70%; left: 50%; position: fixed; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); border-width: 1px; border-style: solid; border-radius: 3vw; border-color: white; font-size: 1vw; padding: 0.5vw 0.7vw 0.5vw 0.7vw; cursor: pointer; } .producerscountries .buttonEnter:hover { background: #ff3f1d; color: black; border-color: #ff3f1d; } .hpGianmarco { margin: 0; padding: 0; background: black; background-image: url(outlinebg.png); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; } .homepage { margin: 0; padding: 0; background: black; background-image: url(backgroundproducercountries.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; } .landingPageJuli { position: absolute; width: 100%; height: 100%; overflow: hidden; color: white; font-family: Helvetica; font-size: 1vw; font-weight: normal; } .landingPageJuli .texte { position: absolute; text-align: left; width: 30vw; margin: 10vw 20vw; } .landingPageJuli .LienEpisode1 { position: absolute; width: 50px; height: 50px; cursor: pointer; top: 20vw; right: 30vw; } .landingPageJuli .LienEpisode1 img { width: 100%; } .landingPageJuli .ImgEpisode1 { display: none; position: absolute; top: 20vw; right: 30vw; } .landingPageJuli .closeButton { position: absolute; top: 0; right: 0; background: black; color: white; display: inline-block; border-width: 1px; border-style: solid; border-radius: 1vw; border-color: white; padding: 0.3vw 0.6vw 0.3vw 0.6vw; cursor: pointer; } .landingPageJuli .closeButton:hover { background: white; color: black; border-color: white; } .landingPageJuli .LienEpisode2 { position: absolute; top: 30vw; left: 20vw; width: 50px; height: 50px; cursor: pointer; } .landingPageJuli .LienEpisode2 img { width: 100%; } .landingPageJuli .ImgEpisode2 { display: none; position: absolute; top: 30vw; left: 20vw; } .objectCamille { position: absolute; display: block; color: white; text-align: center; height: 10vw; -webkit-transition: top 10s linear, left 10s linear; transition: top 10s linear, left 10s linear; } .objectCamille:nth-child(1) { height: 14vw; } .objectCamille:nth-child(2) { height: 10vw; } .objectCamille:nth-child(3) { height: 14vw; } .objectCamille:nth-child(4) { height: 10vw; } .objectCamille:nth-child(5) { height: 14vw; } .objectCamille:nth-child(6) { height: 10vw; } .objectCamille img { height: 100%; display: none; } .objectCamille img:first-child { display: block; } .objectCamille .hover { display: block; } .objectCamille:hover img:first-child { display: none; } .objectCamille:hover img:last-child { display: block; } .bodyManifestoPage { margin: 0; padding: 0; background: black; background-image: url(bgthoughts.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; overflow: hidden; } .april { width: 30%; position: absolute; top: 20vw; right: 20vw; overflow: hidden; } .april .texte { font-family: HelveticaOblique; } .juin { width: 20%; position: absolute; top: 10vw; left: 10vw; overflow: hidden; } .juin .texte { font-family: HelveticaOblique; } .beantobar { width: 25%; position: absolute; top: 18vw; left: 5vw; overflow: hidden; } .tonys { width: 35%; position: absolute; top: 3vw; left: 33vw; overflow: hidden; } .issues { width: 50%; position: absolute; top: 35vw; right: 5vw; overflow: hidden; } .issues a:link { color: white; } .issues a:visited { color: white; } .issues a:active { color: #4505fa; } .thoughtsWindows { font-family: Helvetica; font-size: 11pt; font-weight: normal; } .thoughtsWindows .entête { text-transform: uppercase; font-size: 10pt; background: black; border-width: 1px; border-style: solid; color: white; padding: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; } .thoughtsWindows .entête .titre { text-align: left; width: 50%; } .thoughtsWindows .entête .date { text-align: right; width: 50%; } .thoughtsWindows .texte { background: white; padding: 20px; } .somethoughts { position: absolute; width: 50vw; top: 8vw; left: 5vw; } .bodyPageDraggeable { margin: 0; padding: 0; background: black; overflow: auto; } .quotes { width: 40%; position: absolute; font-family: Helvetica; font-size: 11pt; font-weight: normal; cursor: move; } .quotes:hover .entête { opacity: 1; } .quotes .entête { text-transform: uppercase; font-size: 10pt; background: black; border-width: 1px; border-style: solid; color: white; padding: 3px; opacity: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } .quotes .entête .titre { text-align: left; font-family: HelveticaOblique; width: 50%; } .quotes .entête .linksource { text-align: right; width: 50%; } .quotes .texte { background: white; padding: 3px; } .quotes mark { background-color: #4505fa; color: white; padding: 1px 6px 1px 6px; } .quotes a:link { color: white; } .quotes a:visited { color: white; } .quotes a:active { color: #4505fa; } .moreResources { font-family: HelveticaOblique; font-size: 11pt; font-weight: normal; position: absolute; } .moreResources .entête { text-transform: uppercase; font-size: 10pt; background: black; border-width: 1px; border-style: solid; border-color: white; color: #4505fa; padding: 3px; display: -webkit-box; display: -ms-flexbox; display: flex; } .moreResources .entête .titre { text-align: left; width: 50%; } .moreResources .texte { background: white; padding: 3px; } .moreResources a:link { color: #4505fa; } .moreResources a:visited { color: #4505fa; } .moreResources a:active { color: black; } #inapril2018 { top: 5vw; right: 13vw; } #theharkinengel { top: 7vw; left: 10vw; } #theprotocollaidout { top: 20vw; left: 2vw; } #in2009 { top: 15vw; right: 4vw; } .personnalText { position: absolute; font-family: HelveticaOblique; font-size: 11pt; font-weight: normal; color: white; cursor: move; padding: 2px; left: 20vw; top: 33vw; } .personnalText:hover { border-width: 1px; border-style: dashed; border-color: white; border-radius: 0.5vw; } .personnalText:hover .personnal-hover { display: block; } .personnalText .personnal-hover { position: absolute; top: -2vw; left: 50%; padding: .5vw; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-align: center; display: none; background-color: white; color: black; font-size: 8pt; line-height: .2; } .personnalText .personnalTextHarkinEngel { -webkit-column-count: 3; column-count: 3; -webkit-column-gap: 20px; column-gap: 20px; width: 60vw; } .personnalText .personnalTextLivingIncome { -webkit-column-count: 1; column-count: 1; -webkit-column-gap: 20px; column-gap: 20px; width: 40vw; } .wholeBoxEditable { position: fixed; display: block; width: 15vw; top: 36vw; right: 9px; } .wholeBoxEditable .zoneDragBoxEditable { height: 15px; width: 100%; cursor: move; } .wholeBoxEditable .boxEditable { border-width: 1px; border-style: dashed; border-color: white; border-radius: 0.5vw; position: absolute; font-family: Helvetica; font-size: 11pt; font-weight: normal; color: #4505fa; background: black; margin: 2px; width: 100%; } .instructions { display: block; width: 15vw; bottom: 8px; right: 5px; font-family: Helvetica; font-size: 9pt; font-weight: normal; position: fixed; border-width: 1px; border-style: solid; border-color: #4505fa; background: black; margin: 2px; color: white; padding: 5px; } .instructions .buttonGoogleDoc { display: inline-table; background: #4505fa; color: white; border-width: 1px; border-style: solid; border-radius: 1vw; border-color: #4505fa; padding: 0.2vw 0.5vw 0.2vw 0.5vw; margin: 10px 40% 2px 40%; cursor: pointer; color: white; } .instructions .buttonGoogleDoc:hover { background: white; color: #4505fa; border-color: white; } .bodyTestIndex { margin: 0; padding: 0; width: 100%; height: 100%; } #bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -20; background: white; font-family: Helvetica; font-size: 11pt; font-weight: normal; text-align: center; background-image: url(BGoutlineNoir.png); background-position-y: 50px; background-repeat: no-repeat; background-size: cover; } #bg .title { font-size: 40px; margin: 5vw 10vw 0 10vw; } #bg .texte { margin: 1vw 20vw 0 20vw; } #bg .title2 { display: none; } #bg .texte2 { display: none; } #bg .title3 { display: none; } #bg .texte3 { display: none; } #trigger { position: absolute; z-index: 3; width: 10vw; cursor: move; } #trigger img { width: 100%; } #trigger a { position: absolute; top: 50%; left: 50%; width: 30%; height: 30%; cursor: pointer; display: block; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #trigger2 { position: absolute; z-index: 4; width: 10vw; cursor: move; } #trigger2 img { width: 100%; } #trigger2 a { position: absolute; top: 50%; left: 50%; width: 30%; height: 30%; cursor: pointer; display: block; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #trigger:hover ~ #bg { background: black; background-image: url(BGoutlineBlc.png); background-position-y: 50px; background-repeat: no-repeat; background-size: cover; } #trigger:hover ~ #bg .title { display: none; } #trigger:hover ~ #bg .texte { display: none; } #trigger:hover ~ #bg .title2 { display: block; font-size: 40px; margin: 5vw 10vw 0 10vw; color: white; } #trigger:hover ~ #bg .texte2 { display: block; margin: 1vw 20vw 0 20vw; color: white; } #trigger:hover ~ #bg .title3 { display: none; } #trigger:hover ~ #bg .texte3 { display: none; } #trigger2:hover ~ #bg { background: #ff58ab; background-image: url(BGoutlineBlc.png); background-position-y: 50px; background-repeat: no-repeat; background-size: cover; } #trigger2:hover ~ #bg .title3 { display: block; font-size: 40px; margin: 5vw 10vw 0 10vw; color: white; } #trigger2:hover ~ #bg .texte3 { display: block; margin: 1vw 20vw 0 20vw; color: white; } #trigger2:hover ~ #bg .title { display: none; } #trigger2:hover ~ #bg .texte { display: none; } #trigger2:hover ~ #bg .title2 { display: none; } #trigger2:hover ~ #bg .texte2 { display: none; } .map-container { height: 100%; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .map-container img { height: 100%; } .map-container .map-pointer { position: absolute; width: 5vh; height: 5vh; background-color: green; opacity: .5; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); cursor: pointer; } .map-container #Episode1 { left: 70%; top: 9%; } .map-container #Episode2 { left: 70%; top: 23%; } .map-container #Episode3 { left: 57.5%; top: 37%; } .map-container #Episode4 { left: 42%; top: 67%; } .map-container #Episode5 { left: 66%; top: 81%; } .map-container #Episode6 { left: 63.5%; top: 77%; } .map-container #Episode7 { left: 64%; top: 71.5%; } /*# sourceMappingURL=styles.css.map */