/**
	Juizy Slideshow
	@author: Geoffrey Crofte
	@date: 2011-12-07
	@from: self work http://creativejuiz.fr/trytotry
	@license: CreativeCommons (BY)
	
	
	************* Changelog *************
	
	** v.1.1.1 - 2012-02-27
	- Figcaption element hidden when you take the control
	
	** v.1.1.0 - 2011-12-31
	- Caption of figure (figcaption element) display improvement
	
	** v.1.0.0 - 2011-12-07
	- First version
	
*/

figure {
    display: inline-block;
    width: 10.8%;
}
#slideshow {
    border-radius: 2px;
    /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);*/
    /*height: 481px;*/
    margin: 0 auto 2em;
    /*padding: 15px;*/
    position: relative;
    width: 640px;
}
#slideshow::before, #slideshow::after {
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    border-radius: 50%;
    bottom: 16px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 20px 10px rgba(0, 0, 0, 0.7);
    content: " ";
    display: block;
    /*height: 195px;*/
    position: absolute;
    width: 87%;
    z-index: -10;
}
#slideshow::before {
    left: 0;
    transform: rotate(-4deg);
}
#slideshow::after {
    right: 0;
    transform: rotate(4deg);
}
#slideshow .commands {
    background-color: #eee;
    border-bottom: 0 none;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    color: #aaa;
    font-family: "Amaranth",Arial,Verdana,sans-serif;
    font-size: 1.3em;
    padding: 5px 13px;
    position: absolute;
    text-decoration: none;
    text-shadow: 0 0 1px #aaa;
    top: 45%;
}
#slideshow .commands::after {
    background: #fff none repeat scroll 0 0;
    border-radius: 12px;
    bottom: 65px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    content: attr(title);
    font-family: Georgia,Times,serif;
    font-size: 14px;
    left: -18px;
    opacity: 0;
    padding: 12px;
    position: absolute;
    text-align: center;
    text-shadow: 0 0 0;
    transition: opacity 0.7s ease 0s, bottom 0.7s ease 0s;
    width: 50px;
}
#slideshow .commands::before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #fff;
    bottom: 55px;
    content: " ";
    height: 1px;
    left: 13px;
    opacity: 0;
    position: absolute;
    transition: opacity 0.7s ease 0s, bottom 0.7s ease 0s;
    width: 1px;
    z-index: 100;
}
#slideshow .commands:hover::before {
    bottom: 35px;
    opacity: 1;
}
#slideshow .commands:hover::after {
    bottom: 45px;
    opacity: 1;
}
#slideshow .commands:focus {
    outline: 0 none;
    transform: translate(1px, 2px);
}
#slideshow .commands:active {
    transform: translate(0px, 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;
}
.play_commands {
    border: 0 none;
    height: 22px;
    opacity: 0;
    position: absolute;
    right: 25px;
    text-indent: -9999px;
    top: 25px;
    transition: opacity 1s ease 0s, right 1s ease 0s;
    width: 22px;
    z-index: 10;
}
.play {
    cursor: default;
    right: 55px;
}
.pause:hover {
    border: 0 none;
}
.play_commands:focus {
    outline: 0 none;
}
#slideshow:hover .pause, #sl_play:target ~ #slideshow:hover .pause, .play_commands:focus {
    opacity: 1;
}
.sl_command:target ~ #slideshow:hover .pause, #sl_pause:target ~ #slideshow:hover .pause {
    opacity: 0;
}
.pause::after, .pause::before {
    background: rgba(255, 255, 255, 0.5) none repeat scroll 0 0;
    content: " ";
    display: block;
    height: 22px;
    position: absolute;
    top: 0;
    width: 38%;
}
.pause::after {
    right: 0;
}
.pause::before {
    left: 0;
}
.play {
    border-bottom: 10px solid transparent;
    border-left: 20px solid rgba(255, 255, 255, 0.5);
    border-top: 10px solid transparent;
    height: 1px;
    opacity: 0;
    width: 1px;
}
.play:hover, .play:focus {
    border-bottom: 10px solid transparent;
}
#slideshow .container {
    height: 397px;
    overflow: hidden;
    position: relative;
    width: 640px;
}
#slideshow .container::after {
    background: #999 none repeat scroll 0 0;
    bottom: 0;
    content: " ";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}
@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 {
    animation: 32s ease 0s normal none infinite running slider;
    height: 310px;
    left: 0;
    position: absolute;
    top: 0;
    width: 926%;
}
.sl_i:target ~ #slideshow .slider {
    transition: left 1s ease 0s;
}
.sl_command:target ~ #slideshow .slider {
    transition: opacity 1s ease 0s;
}
#slideshow .c_slider {
    background: url("img/dummy-640x310-1.jpg") no-repeat scroll 0 0px, url("img/dummy-640x310-2.jpg") no-repeat scroll 640px 0px, url("img/dummy-640x310-3.jpg") no-repeat scroll 1280px 0px, rgba(0, 0, 0, 0) url("img/dummy-640x310-4.jpg") no-repeat scroll 1920px 0;
    height: 516px;
    left: 0;
    position: absolute;
    top: 0;
    width: 400%;
}
.sl_i:target ~ #slideshow .c_slider {
    transition: background 1s ease 0s;
}
#slideshow figure {
    margin: 0;
    padding: 0;
    position: relative;
}
@keyframes figurer {
0%, 25%, 50%, 75%, 100% {
    box-shadow: 0 0 65px rgba(0, 0, 0, 0) inset;
}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {
    box-shadow: 0 0 65px rgba(0, 0, 0, 0.5) inset;
}
}
@keyframes figurer {
0%, 25%, 50%, 75%, 100% {
    box-shadow: 0 0 65px rgba(0, 0, 0, 0) inset;
}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {
    box-shadow: 0 0 65px rgba(0, 0, 0, 0.5) inset;
}
}
#slideshow figure::after {
    animation: 32s ease 0s normal none infinite running figurer;
    box-shadow: 0 0 65px rgba(0, 0, 0, 0.5) inset;
    content: " ";
    display: block;
    height: 154%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
@keyframes figcaptionner {
0%, 25%, 50%, 75%, 100% {
    bottom: -50px;
}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {
    bottom: 5px;
}
}
@keyframes figcaptionner {
0%, 25%, 50%, 75%, 100% {
    bottom: -50px;
}
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% {
    bottom: 5px;
}
}
#slideshow figcaption {
    animation: 32s ease 0s normal none infinite running figcaptionner;
    background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
    border-top: 1px solid rgb(225, 225, 225);
    bottom: 5px;
    color: #555;
    font-family: Georgia,Times,serif;
    left: 0;
    letter-spacing: 0.05em;
    margin: 0;
    padding: 20px;
    position: absolute;
    right: 0;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.3);
    word-spacing: 0.05em;
}
@keyframes timeliner {
0%, 25%, 50%, 75%, 100% {
    width: 0;
}
20%, 45%, 70%, 90% {
    width: 640px;
}
}
@keyframes timeliner {
0%, 25%, 50%, 75%, 100% {
    width: 0;
}
20%, 45%, 70%, 90% {
    width: 640px;
}
}
#timeline {
    animation: 32s ease 0s normal none infinite running timeliner;
    background: rgba(214, 98, 13, 0.8) none repeat scroll 0 0;
    /*bottom: 15px;*/
    height: 1px;
    left: 15px;
    position: absolute;
    width: 0;
}
.dots_commands {
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    top: 32px;
}
.dots_commands li {
    display: inline;
    /*list-style: outside none none;*/
    margin: 0;
    padding: 0;
}
.dots_commands a {
    background: #fff none repeat scroll 0 0;
    border-bottom: 0 none;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) inset;
    display: inline-block;
    height: 8px;
    margin: 0 5px;
    position: relative;
    text-indent: -9999px;
    width: 8px;
    z-index: 25;
}
.dots_commands li + li a {
    z-index: 10;
}
@keyframes dotser {
0%, 100% {
    left: 0;
    opacity: 1;
}
20% {
    left: 0;
    opacity: 1;
}
22% {
    left: 0;
    opacity: 0;
}
23% {
    left: 18px;
    opacity: 0;
}
25% {
    left: 18px;
    opacity: 1;
}
45% {
    left: 18px;
    opacity: 1;
}
47% {
    left: 18px;
    opacity: 0;
}
48% {
    left: 36px;
    opacity: 0;
}
50% {
    left: 36px;
    opacity: 1;
}
70% {
    left: 36px;
    opacity: 1;
}
72% {
    left: 36px;
    opacity: 0;
}
73% {
    left: 54px;
    opacity: 0;
}
75% {
    left: 54px;
    opacity: 1;
}
95% {
    left: 54px;
    opacity: 1;
}
97% {
    left: 54px;
    opacity: 0;
}
98% {
    left: 0;
    opacity: 0;
}
}
@keyframes dotser {
0%, 100% {
    left: 0;
    opacity: 1;
}
20% {
    left: 0;
    opacity: 1;
}
22% {
    left: 0;
    opacity: 0;
}
23% {
    left: 18px;
    opacity: 0;
}
25% {
    left: 18px;
    opacity: 1;
}
45% {
    left: 18px;
    opacity: 1;
}
47% {
    left: 18px;
    opacity: 0;
}
48% {
    left: 36px;
    opacity: 0;
}
50% {
    left: 36px;
    opacity: 1;
}
70% {
    left: 36px;
    opacity: 1;
}
72% {
    left: 36px;
    opacity: 0;
}
73% {
    left: 54px;
    opacity: 0;
}
75% {
    left: 54px;
    opacity: 1;
}
95% {
    left: 54px;
    opacity: 1;
}
97% {
    left: 54px;
    opacity: 0;
}
98% {
    left: 0;
    opacity: 0;
}
}
.dots_commands li:first-child a::after, .dots_commands li:first-child a::before {
    background: #bd9b83 none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) inset;
    content: " ";
    height: 8px;
    left: 0;
    position: absolute;
    top: 0;
    width: 8px;
    z-index: 20;
}
.dots_commands li:first-child a::after {
    animation: 32s ease 0s normal none infinite running dotser;
}
.dots_commands li:first-child a::before {
    display: none;
}
.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 {
    animation-play-state: paused;
}
#sl_play:target ~ #slideshow .slider, #sl_play:target ~ #slideshow figure::after, #sl_play:target ~ #slideshow figcaption, #sl_play:target ~ #slideshow #timeline, #sl_play:target ~ #slideshow .dots_commands li:first-child a::after {
    animation-play-state: running;
}
.sl_command:target ~ #slideshow .pause {
    opacity: 0;
}
.sl_command:target ~ #slideshow .play {
    cursor: pointer;
    opacity: 1;
    right: 25px;
}
#sl_play:target ~ #slideshow .pause {
    opacity: 0;
}
#sl_play:target ~ #slideshow .play {
    cursor: default;
    opacity: 0;
    right: 55px;
}
.sl_i:target ~ #slideshow .slider {
    visibility: hidden;
}
.sl_i:target ~ #slideshow .slider figcaption {
    visibility: hidden;
}
.sl_i:target ~ #slideshow .dots_commands li:first-child a::after {
    display: none;
}
.sl_i:target ~ #slideshow .dots_commands li:first-child a::before {
    display: block;
}
#sl_i1:target ~ #slideshow .commands1 {
    display: block;
}
#sl_i1:target ~ #slideshow .c_slider {
    background-position: 0 0px, 640px 0px, 1280px 0px, 1920px 0;
}
#sl_i1:target ~ #slideshow .dots_commands li:first-child a::before {
    left: 0;
}
#sl_i2:target ~ #slideshow .commands {
    display: none;
}
#sl_i2:target ~ #slideshow .commands2 {
    display: block;
}
#sl_i2:target ~ #slideshow .c_slider {
    background-position: -640px 0px, 0 0px, 640px 0px, 1280px 0;
}
#sl_i2:target ~ #slideshow .dots_commands li:first-child a::before {
    left: 18px;
}
#sl_i3:target ~ #slideshow .commands {
    display: none;
}
#sl_i3:target ~ #slideshow .commands3 {
    display: block;
}
#sl_i3:target ~ #slideshow .c_slider {
    background-position: -1280px 0px, -640px 0px, 0 0px, 640px 0;
}
#sl_i3:target ~ #slideshow .dots_commands li:first-child a::before {
    left: 36px;
}
#sl_i4:target ~ #slideshow .commands {
    display: none;
}
#sl_i4:target ~ #slideshow .commands4 {
    display: block;
}
#sl_i4:target ~ #slideshow .c_slider {
    background-position: -1920px 0px, -1280px 0px, -640px 0px, 0 0;
}
#sl_i4:target ~ #slideshow .dots_commands li:first-child a::before {
    left: 54px;
}



section#slideshow{
	width: 100%;
}
section#slideshow .container{
	width: 100%;
}

figure img{
	width:  100%;      /*1159px; */
	/*height:481px;*/
}







/* responsive*/

@media screen and (max-width: 519px){
#slideshow .container {
    height: 213px;
  }
  section#slideshow {
    margin: 0 -1em 0 0;
}
}


@media screen and (max-width: 341px){
  #slideshow .container {
    height: 163px;
  }
}


@media screen and (max-width: 320px){
  #slideshow .container {
    height: 113px;
  }
}

@media screen and (max-width: 943px){
  #slideshow .container {
    height: 404px;
  }
}
@media screen and (max-width: 822px){
  #slideshow .container {
    height: 351px;
  }
}
@media screen and (max-width: 687px){
  #slideshow .container {
    height: 296px;
  }
}
@media screen and (max-width: 536px){
  #slideshow .container {
    height: 233px;
  }
}