body { font-family: Futura,"Trebuchet MS"; color: #595454; text-align: center; } nav { text-align: center; } nav ul { color: #595454; list-style-type: none; } nav li { display: inline-block; margin-right: 15px; } nav a { font-size: 1.5em; color: #9B999B; padding-bottom: 3px; text-decoration: none; } nav a:hover { color: #CCCCCC; } H1 { font-size: 1.4em; color: #9B999B; text-align: center; } H2 { color: #1eb5bc; text-align: center; font-size:2em; margin-top:0px; } H3 { color: #000000; text-align: center; font-size:0.9em; margin-top:-20px; } H4 { text-align: center; font-size:2em; margin-top:0px; } H5 { color: #595454; text-align: center; font-size:0.8em; margin-top:0px; } H6 { font-size: 1em; color: #9B999B; text-align: center; } a { text-decoration: none; color: #9B999B; } a:hover { opacity:0.6; } } figure { display: inline-block; } #slideshow { position: relative; width: 895px; height: 600px; } #slideshow:before, #slideshow:after { position: absolute; display:block; bottom:16px; width: 50%; height: 20px; content: " "; background: rgba(0,0,0,0.1); z-index: -10; } #slideshow:before { left:0; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); } #slideshow:after { right:0; -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); -o-transform: rotate(4deg); } #slideshow .commands { position: absolute; top: 45%; padding: 5px 13px; border-bottom:0; font-family: 'Amaranth', Arial, Verdana, sans-serif; font-size: 1.3em; color: #aaa; text-decoration:none; background-color: #eee; background-image: -webkit-linear-gradient(#fff,#ddd); background-image: -moz-linear-gradient(#fff,#ddd); background-image: -ms-linear-gradient(#fff,#ddd); background-image: -o-linear-gradient(#fff,#ddd); background-image: linear-gradient(#fff,#ddd); text-shadow: 0 0 1px #aaa; } #slideshow .commands:after { position: absolute; bottom: 65px; left:-18px; content: attr(title); width: 50px; padding: 12px; background: #fff; font-family: Georgia, Times, serif; font-size: 14px; text-align:center; text-shadow: 0 0 0; opacity: 0; -webkit-transition: opacity 0.7s, bottom 0.7s; -moz-transition: opacity 0.7s, bottom 0.7s; transition: opacity 0.7s, bottom 0.7s; } #slideshow .commands:before { position: absolute; bottom: 55px; left: 13px; content: " "; width: 1px; height: 1px; border-top: 10px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent; z-index:100; opacity: 0; -webkit-transition: opacity 0.7s, bottom 0.7s; -moz-transition: opacity 0.7s, bottom 0.7s; transition: opacity 0.7s, bottom 0.7s; } #slideshow .commands:hover:before { bottom: 35px; opacity: 1; } #slideshow .commands:hover:after { bottom: 45px; opacity: 1; } #slideshow .commands:focus { outline: 0; -webkit-transform: translate(1px, 2px); -moz-transform: translate(1px, 2px); -ms-transform: translate(1px, 2px); -o-transform: translate(1px, 2px); transform: translate(1px, 2px); } #slideshow .commands:active { -webkit-transform: translate(0, 1px); -moz-transform: translate(0, 1px); -ms-transform: translate(0, 1px); -o-transform: translate(0, 1px); transform: translate(0, 1px); } #slideshow .prev { left: -48px; } #slideshow .next { right: -48px; } #slideshow .prev, #slideshow .next { display:none; } #slideshow .prev, #slideshow .next { display:none; } #slideshow .commands1 { display: block; } #slideshow .container { position:relative; width: 895px; height: 600px; overflow: hidden; } /* timeline base */ #slideshow .container:after { position:absolute; bottom: 0; left:0; content: " "; background: #999; width: 100%; height: 1px; } @-webkit-keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } @-moz-keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } @keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } #slideshow .slider { position: absolute; left:0; top:0; width: 895px; height: 600px; } .sl_i:target ~ #slideshow .slider { -webkit-transition: left 0.4s; -moz-transition: left 0.4s; transition: left 0.4s; } .sl_command:target ~ #slideshow .slider { -webkit-transition: opacity 0.4s; -moz-transition: opacity 0.4s; transition: opacity 0.4s; } #slideshow .c_slider { position: absolute; left:0; top:0; width: 895%; height: 600px; background: url(AWslider/AW-ROSALIE1.jpg) 0 0 no-repeat, url(AWslider/AW-OPHELIA.jpg) 895px 0 no-repeat, url(AWslider/AW-SOLENE1.jpg) 1790px 0 no-repeat, url(AWslider/AW-MAX1.jpg) 2685px 0 no-repeat, url(AWslider/AW-LUCIE1.jpg) 3580px 0 no-repeat, url(AWslider/AW-PAUL1.jpg) 4475px 0 no-repeat, url(AWslider/AW-ANGIE.jpg) 5370px 0 no-repeat, url(AWslider/AW-ALIX1.jpg) 6265px 0 no-repeat, url(AWslider/AW-ROXANE1.jpg) 7160px 0 no-repeat, url(AWslider/AW-LUCA1.jpg) 8055px 0 no-repeat, url(AWslider/AW-CHLOE1.jpg) 8950px 0 no-repeat, url(AWslider/AW-OLIVIA1.jpg) 9845px 0 no-repeat, url(AWslider/AW-THEO1.jpg) 10740px 0 no-repeat, url(AWslider/AW-ELISE1.jpg) 11635px 0 no-repeat; } .sl_i:target ~ #slideshow .c_slider { -webkit-transition: background 0.4s; -moz-transition: background 0.4s; transition: background 0.4s; } #slideshow figure { position:relative; padding:0; margin:0; } @-webkit-keyframes figurer { 0%, 25%, 50%, 75%, 100% { -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; } } @-moz-keyframes figurer { 0%, 25%, 50%, 75%, 100% { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; } } @keyframes figurer { 0%, 25%, 50%, 75%, 100% { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0) inset; box-shadow: 0 0 65px rgba(0,0,0, 0) inset; } 5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; } } #slideshow figure:after { position: absolute; display:block; content: " "; top:0; left:0; width: 100%; height: 100%; -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset; -webkit-animation: figurer 32s infinite; -moz-animation: figurer 32s infinite; animation: figurer 32s infinite; } /* actions when target ! */ .sl_command { display: none; } .sl_command:target ~ #slideshow .slider, .sl_command:target ~ #slideshow figure:after, .sl_command:target ~ #slideshow figcaption, .sl_command:target ~ #slideshow #timeline, .sl_command:target ~ #slideshow .dots_commands li:first-child a:after { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; } #sl_play:target ~ #slideshow .slider, #sl_play:target ~ #slideshow figure:after, -webkit-animation-play-state: running; -moz-animation-play-state: running; animation-play-state: running; } .sl_command:target ~ #slideshow .pause { opacity:0; } .sl_command:target ~ #slideshow .play { opacity:1; right: 25px; cursor: pointer; } #sl_play:target ~ #slideshow .pause { opacity:0; } #sl_play:target ~ #slideshow .play { opacity:0; right: 55px; cursor: default;} .sl_i:target ~ #slideshow .slider { visibility: hidden } .sl_i:target ~ #slideshow .slider figcaption { visibility: hidden } #sl_i1:target ~ #slideshow .commands { display: none; } #sl_i1:target ~ #slideshow .commands1 { display: block; } #sl_i1:target ~ #slideshow .c_slider { background-position: 0 0, 895px 0, 1790px 0, 2685px 0, 3580px 0, 4475px 0, 5370px 0, 6265px 0, 7160px 0, 8055px 0, 8950px 0, 9845px 0, 10740px 0, 11635px 0; } #sl_i2:target ~ #slideshow .commands { display: none; } #sl_i2:target ~ #slideshow .commands2 { display: block; } #sl_i2:target ~ #slideshow .c_slider { background-position: -895px 0, 0 0, 895px 0, 1790px 0, 2685px 0, 3580px 0, 4475px 0, 5370px 0, 6265px 0, 7160px 0, 8055px 0, 8950px 0, 9845px 0, 10740px 0; } #sl_i3:target ~ #slideshow .commands { display: none; } #sl_i3:target ~ #slideshow .commands3 { display: block; } #sl_i3:target ~ #slideshow .c_slider { background-position: -1790px 0, -895px 0, 0 0, 895px 0, 1790px 0, 2685px 0, 3580px 0, 4475px 0, 5370px 0, 6265px 0, 7160px 0, 8055px 0, 8950px 0, 9845px 0; } #sl_i4:target ~ #slideshow .commands { display: none; } #sl_i4:target ~ #slideshow .commands4 { display: block; } #sl_i4:target ~ #slideshow .c_slider { background-position: -2685px 0, -1790px 0, -895px 0, 0 0, 895px 0, 1790px 0, 2685px 0, 3580px 0, 4475px 0, 5370px 0, 6265px 0, 7160px 0, 8055px 0, 8950px 0; } #sl_i5:target ~ #slideshow .commands { display: none; } #sl_i5:target ~ #slideshow .commands5 { display: block; } #sl_i5:target ~ #slideshow .c_slider { background-position: -3580px 0, -2685px 0, -1790px 0, -895px 0, 0 0, 895px 0, 1790px 0, 2685px 0, 3580px 0, 4475px 0, 5370px 0, 6265px 0, 7160px 0, 8055px 0; } #sl_i6:target ~ #slideshow .commands { display: none; } #sl_i6:target ~ #slideshow .commands6 { display: block; } #sl_i6:target ~ #slideshow .c_slider { background-position: -4475px 0, -3580px 0, -2685px 0, -1790px 0, -895px 0, 0 0, 895px 0, 1790px 0, 2685px 0, 3580px 0, 4475px 0, 5370px 0, 6265px 0, 7160px 0; } #sl_i7:target ~ #slideshow .commands { display: none; } #sl_i7:target ~ #slideshow .commands7 { display: block; } #sl_i7:target ~ #slideshow .c_slider { background-position: -5370px 0, -4475px 0, -3580px 0, -2685px 0, -1790px 0, -895px 0, 0 0, 895px 0, 1790px 0, 2685px 0, 3580px 0, 4475px 0, 5370px 0, 6265px 0; } #sl_i8:target ~ #slideshow .commands { display: none; } #sl_i8:target ~ #slideshow .commands8 { display: block; } #sl_i8:target ~ #slideshow .c_slider { background-position: -6265px 0, -5370px 0, -4475px 0, -3580px 0, -2685px 0, -1790px 0, -895px 0, 0 0, 895px 0, 1790px 0, 2685px 0, 3580px 0, 4475px 0, 5370px 0; } #sl_i9:target ~ #slideshow .commands { display: none; } #sl_i9:target ~ #slideshow .commands9 { display: block; } #sl_i9:target ~ #slideshow .c_slider { background-position: -7160px 0, -6265px 0, -5370px 0, -4475px 0, -3580px 0, -2685px 0, -1790px 0, -895px 0, 0 0, 895px 0, 1790px 0, 2685px 0, 3580px 0, 4475px 0; } #sl_i10:target ~ #slideshow .commands { display: none; } #sl_i10:target ~ #slideshow .commands10 { display: block; } #sl_i10:target ~ #slideshow .c_slider { background-position: -8055px 0, -7160px 0, -6265px 0, -5370px 0, -4475px 0, -3580px 0, -2685px 0, -1790px 0, -895px 0, 0 0, 895px 0, 1790px 0, 2685px 0, 3580px 0; } #sl_i11:target ~ #slideshow .commands { display: none; } #sl_i11:target ~ #slideshow .commands11 { display: block; } #sl_i11:target ~ #slideshow .c_slider { background-position: -8950px 0, -8055px 0, -7160px 0, -6265px 0, -5370px 0, -4475px 0, -3580px 0, -2685px 0, -1790px 0, -895px 0, 0 0, 895px 0, 1790px 0, 2685px 0; } #sl_i12:target ~ #slideshow .commands { display: none; } #sl_i12:target ~ #slideshow .commands12 { display: block; } #sl_i12:target ~ #slideshow .c_slider { background-position: -9845px 0, -8950px 0, -8055px 0, -7160px 0, -6265px 0, -5370px 0, -4475px 0, -3580px 0, -2685px 0, -1790px 0, -895px 0, 0 0, 895px 0, 1790px 0; } #sl_i13:target ~ #slideshow .commands { display: none; } #sl_i13:target ~ #slideshow .commands13 { display: block; } #sl_i13:target ~ #slideshow .c_slider { background-position: -10740px 0, -9845px 0, -8950px 0, -8055px 0, -7160px 0, -6265px 0, -5370px 0, -4475px 0, -3580px 0, -2685px 0, -1790px 0, -895px 0, 0 0, 895px 0; } #sl_i14:target ~ #slideshow .commands { display: none; } #sl_i14:target ~ #slideshow .commands14 { display: block; } #sl_i14:target ~ #slideshow .c_slider { background-position: -11635px 0, -10740px 0, -9845px 0, -8950px 0, -8055px 0, -7160px 0, -6265px 0, -5370px 0, -4475px 0, -3580px 0, -2685px 0, -1790px 0, -895px 0, 0 0; }
home
about
fiction
clips
music
docs & co
ACTIVISM WORKS
follow ACTIVISM WORKS on
Instagram
DANS LA PRESSE :
Exposition photo de Pierre Dugowson
du 8 au 11 octobre 2020
Festival ATMOSPHERES
<
>
<
>
<
>
<
>
<
>
<
>
<
>
<
>
<
>
<
>
<
>
<
>
<
>
<
>
