/*GNRL*/

* {margin:0;padding:0;border:0 none; position: relative;max-width: 100%;}
*,*:before, *:after {
box-sizing: border-box;}

html, body {
width: 100%;
height: 100%;
overflow: hidden;
font-family:'PT sans narrow', sans-serif;
font-size: 1rem;
}

input {
display: none;
}

/*SCROLLBAR*/

.s_bar label {
display: block;
height: 4%;
width: auto;
text-align: center;
cursor: pointer;
border-radius: .4rem;
transition: .5s;
z-index: 2;
text-align:center;
padding:0;
font-size:.7rem;
color:rgba(255, 207, 78,.6);
}
.s_bar {
background:rgba(0,0,0,.7);
width: 20px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
cursor: context-menu;
z-index: 10;
transition: .7s;
opacity:1;
border-radius: 0px;
}
.s_bar:before {
content: '';
position: absolute;
top: 0;
left: 3px;
right: 3px;
height: 4%;
transition: .7s;
z-index: 6;
width: 0;
height: 0;
border-top:20px solid transparent;
border-right: 32px solid gold;
border-bottom: 20px solid transparent;
}

section:hover .s_bar {
opacity: .6;
}

section {
width: 100%;
height: 100%;
overflow: hidden;
}



/*CONTENT*/

section > div {
transition: .5s cubic-bezier(.7,0,.3,1);
transition-delay: .2s;
}

article {
background: #000 no-repeat center / cover;
width: 100vw;
height: 100vh;
padding: 0 3rem;
overflow: hidden;
}

header {
position: absolute;
top:38%;
left: 0;
width: 100vw;
transform: translatey(-570%);
font-family: 'PT sans narrow', sans-serif;
font-size: calc(2vw + 1vh + 2vmin);
line-height: .8;
text-align: center;
font-weight: 100;
font-variant: small-caps;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.01em;
text-transform:none;
text-rendering: optimizeLegibility;
color: rgba(255, 255, 255, 0.2);
text-shadow:0 0 1px  rgba(255, 255, 255,.1), -1px -1px 0 rgba(238, 238, 238,.1), -2px -2px 0 rgba(204, 204, 204,.1), -3px -3px 0 rgba(170, 170, 170,.1), -4px -4px 0 rgba(136, 136, 136,.1), -5px -5px 0 rgba(102, 102, 102,.1), -6px -6px 0 rgba(68, 68, 68,.1);
z-index:100;
}


h1, p, span{
font-family:'PT sans narrow', sans-serif;
text-align:justify;
text-shadow:1px 1px 2px #111;
font-weight:normal;
}

p{
color:white;
}

h1{
text-align:center;
background-image: url((http://www.lacor.info/film/a_la_folie/img/or.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.5px black;
}

h1 span{
text-align:center;
background-image: url((http://www.lacor.info/film/a_la_folie/img/or.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.5px black;
font-size:0.6em;
}

.cero{
background-color:rgba(223, 83, 27,1);
background-size: 200%;
background-position: 50% 0%;
transition: 8s cubic-bezier(.2,.75,.7,.5) ;
transition-delay: 0s;
}

#cero:checked ~ div .cero {
background:rgb(0,0,0) url(http://www.lacor.info/film/a_la_folie/img/galerie/large/a_la_folie_20.jpg) no-repeat bottom right;
background-size: 120%;
background-position: 100% 70%;
transition-delay: 0s;
}

.h-cero, .h-cero span{
width: 80%;
margin:0 10%;
opacity:1;
background-position:50%;
background-image: url(http://www.lacor.info/film/a_la_folie/img/or.jpg);
animation: title 3.2s ease-out forwards 1s;
}

#cero:checked ~ div .h-cero,#cero:checked ~ div .h-cero span{
width: 100%;
margin:auto 0;
opacity:0;
transition-delay:0s;
display: table;
margin: 0 auto;
}

@keyframes title{
0% {
text-shadow: 0 0 50px rgba(255,255,255,0.3);
letter-spacing: 80px;
opacity: 0;
-moz-transform: rotateY(-90deg);
}
50% {
text-shadow: 0 0 1px  rgba(255,255,255,0.2);
opacity: 0.8;
-moz-transform: rotateY(0deg);
}
75% {
text-shadow: 0 0 1px  rgba(255,255,255,0.1);
opacity: 0.8;
-moz-transform: rotateY(0deg) translateZ(60px);
}
100% {
text-shadow: 0 0 1px  rgba(255,255,255,0);
opacity: 0.8;
letter-spacing: 1px;
-moz-transform: rotateY(0deg) translateZ(100px);
}
}

.uno {
background-color:rgb(214, 177, 88);
background-position:  50% 90%;
opacity:0;
background-size: 50%;
transition: 8s cubic-bezier(.2,0,.7,.5) ;
transition-delay: 0s;
}

#uno:checked ~ div .uno {
background:rgb(49, 32, 19) url(http://www.lacor.info/film/a_la_folie/img/galerie/large/a_la_folie_18.jpg) no-repeat ;
background-size: 50%;
opacity:1;
background-position: 50% 90%;
position: relative;
}

.dos {
background-image: linear-gradient(rgba(62, 19, 10,.5), rgba(160, 53, 22,0.5)) ;
background-position: 50% 500%;
background-size: 0 0;
transition: 5s cubic-bezier(.2,0,.7,1);
transition-delay: 0s;
}

#dos:checked ~ div .dos {
background-size: 100% auto;
background-position: 50% 50%;
transition-delay: 0s;
}

.tres {
background: rgba(160, 53, 22,1);
background-image: linear-gradient(180deg,rgba(124, 136, 160,1), rgba(47, 37, 35,1)) ;
background-position: 50% 500%;
background-size: 0 0;
transition: 9s cubic-bezier(.2,0,.7,1) ;
transition-delay: 10s;
}

#tres:checked ~ div .tres {
background: rgba(47, 37, 35,1) url(http://www.lacor.info/film/a_la_folie/texte_burdeau/slider/img/trois_soeurs_du_yunnan.jpg) no-repeat bottom right;
background-size: 100%;
background-position: 50% 98%;
position: relative;
background-position: 50% 50%;
transition-delay: 0s;
}

#tres p  {
width:50%;
transition: 9s cubic-bezier(.2,0,.7,1) ;
transition-delay: 10s;
}

#tres:checked ~ p .tres {
width:100%;
transition-delay: 0s;
}

.cuatro {
background-color:rgba(92, 33, 12,1);
background-image:radial-gradient(ellipse at 0 10%, rgba(92, 33, 12,1)0%,#000000 90%,#000000 100%);
background-position:  0 -100vw;
transition: 10s background-position cubic-bezier(.06,.1,.9,.95);
}

#cuatro:checked ~ div .cuatro {
background-position: 0% 0%;
transition-delay:0s;
}

.h-cinco {
width: 80%;
margin:0 10%;
transition:.3s  margin, width, cubic-bezier(.02,.02,.98,.98) ;
}

#cinco:checked ~ div .h-cinco{
width: 100%;
margin:auto 0;
transition-delay:0s;
}

.cinco {
background-color:rgba(47, 37, 35,1);
background-image: linear-gradient(rgba(120, 114, 102,1), rgba(50, 56, 80,1)) ;
background-position: 50% 600%;
background-size: 0 0;
transition: 10s cubic-bezier(.3,0,.9,1);
transition-delay: 5s;
opacity:.95;
}

#cinco:checked ~ div .cinco {
transition-delay: 5s;
background-image: linear-gradient(rgba(120, 114, 102,1), rgba(50, 56, 80,1)) ;
background: rgba(120, 114, 102,1) url(http://www.lacor.info/film/a_la_folie/texte_burdeau/slider/img/a_la_folie_01.png) no-repeat center bottom;
background-size: contain;
position: relative;
opacity:1;
}

.sies{
background-color:rgba(118, 69, 37,1);
background-image: linear-gradient(rgba(118, 69, 37,1), rgba(20, 18, 19,1)) ;
background-position: 50% 600%;
background-size: 0 0;
transition: 8s cubic-bezier(.3,0,.9,1);
transition-delay: 0s;
}
#sies:checked ~ div .sies {
background: rgba(20, 18, 19,1) url(http://www.lacor.info/film/a_la_folie/img/galerie/large/a_la_folie_07.jpg) no-repeat bottom right;
background-size: 70%;
background-position: 50% 13% ;
transition-delay: 0s;
}

.h-sies {
bottom: 110vw;
transition: .8s bottom cubic-bezier(.7,0,.3,1) 2s;
}

#sies:checked ~ div .h-sies {
bottom: 0;
transition-delay: 1.3s;
}

.siete{
background-color:rgba(20, 18, 19,1);
background-image: linear-gradient(rgba(120, 114, 102,1), rgba(61, 106, 134,1)) ;
background-position: 50% 0;
background-size: 700%;
opacity:.7;
transition:40s cubic-bezier(.15,.8,.94,.59);
transition-delay: 0s;
}

#siete:checked ~ div .siete {
background: rgba(82, 138, 175,1) url(http://www.lacor.info/film/a_la_folie/img/coal_money_01.jpg) no-repeat bottom right;
background-size: 0% ;
background-position: 50% 95%;
transition-delay: 0s;
opacity:1;
}

.ocho {
background-image: linear-gradient(#000,#111);
background-size:500%;
transition: 20s cubic-bezier(1,1.1,.3,.1);
transition-delay: 0s;
}

#ocho:checked ~ div .ocho {
background: rgba(0, 0, 0,1) url(http://www.lacor.info/film/a_la_folie/img/galerie/large/a_la_folie_21.jpg) no-repeat bottom right;
background-size: 100% auto;
background-position: 50% 90%;
transition-delay: 0s;
}

.nueve {
background-color:rgba(86, 76, 64,1);
background-image: linear-gradient(90deg, rgba(219, 196, 180,1),rgba(86, 76, 64,1));
background-position: -200vw 0;
transition: 4s
background-position cubic-bezier(.7,0,.3,1) 4s;
}

#nueve:checked ~ div .nueve {
background-position: 0% 0%;
transition-delay: .7s;
}

.diez{
background-color:rgb(94, 52, 25);
background-image: linear-gradient(rgb(94, 52, 25),rgba(0, 0, 0,1));
background-position: 70% 10%;
background-size:350%;
transition: 40s cubic-bezier(.3,0,.9,1);
transition-delay: 1s;
}

#diez:checked ~ div .diez {
background: rgba(0, 0, 0,1) url(http://www.lacor.info/film/a_la_folie/img/galerie/large/a_la_folie_23.jpg) no-repeat bottom right;
background-position: 0% 50%;
transition-delay: .7s;
background-size: 100%;
}

.onse{
background-color:rgb(57, 37, 27);
background-position: 50% 50%;
background-size:0;
transition: .7s cubic-bezier(.3,0,.9,1);
transition-delay: 0s;
}

#onse:checked ~ div .onse {
background: #191011 url(http://www.lacor.info/film/a_la_folie/texte_burdeau/slider/img/a_la_folie_11.jpg)no-repeat bottom right;
background-size:70%;
background-position: 50% 100%;
transition-delay: 0s;
}

.doce {
background: rgb(21, 21, 47) url();
background-position: 0;
background-size:500%;
background-position: 0 100%;
transition:.2s  cubic-bezier(.3,0,.9,1);
transition-delay: 3s;
}

#doce:checked ~ div .doce {
background: rgb(21, 21, 47) url(http://www.lacor.info/film/a_la_folie/img/wang_bing_femis.jpg)no-repeat bottom left;
background-size:500%;
background-position: 0 100%;
transition-delay: 15s;
}

.h-doce {
right: 110vw;
transition: 4s right cubic-bezier(.7,0,.3,1) 7s;

}
#doce:checked ~ div .h-doce {
right: 0;
transition-delay: 0s;
}

.trece {
background-color:rgba(0, 0, 0,.99);
background-image: radial-gradient(ellipse at 0 10%, #5e3419 0%,#000000 100%);
background-position: -200vw 0;
transition: 4s
background-position cubic-bezier(.7,0,.3,1) 4s;
}

#trece:checked ~ div .trece {
background-position: 0;
transition-delay: .7s;
}

.catorce {
background-color:#000;
background-image: radial-gradient(ellipse at center, #5e3419 0%,#000000 100%);
background-position: 50% 600%;
background-size: 0 0;
transition:6s cubic-bezier(.3,0,.9,1);
transition-delay: 0s;
}

#catorce:checked ~ div .catorce {
background-size: auto 100%;
background-position: 50% 98%;
transition-delay: 1s;
}

.h-catorce {
bottom: 110vw;
transition: 2s bottom cubic-bezier(.7,0,.3,1) 1s;
ransition-delay: 1s;
}

#catorce:checked ~ div .h-catorce {
bottom:0;
transition-delay: 0s;
}

.quince{
background: #000 ;
background-size:400%;
background-position: 0 0;
transition: .7s  cubic-bezier(.3,0,.9,1);
transition-delay: 0s;
}

#quince:checked ~ div .quince {
background: #000 url(http://www.lacor.info/film/a_la_folie/img/maman_et_putain.jpg)no-repeat bottom left;
background-size:100%;
background-position: 40% 0;
transition-delay: 10s;
}

.dieciseis {
background-color:rgba(223, 83, 27,1);
background-size:100%;
background-position: 50% 90%;
-webkit-filter: grayscale(1);
transition: 20s cubic-bezier(1,1.5,.3,.1);
transition-delay: 10s;
}

#dieciseis:checked ~ div .dieciseis {
background: rgb(0,0,0) url(http://www.lacor.info/film/a_la_folie/img/galerie/large/a_la_folie_17.jpg) no-repeat bottom right;
background-size: 100% auto;
-webkit-filter: grayscale(0);
background-position: 50% 90%;
transition-delay: 10s;
}

.dieciseite{
background-color:rgb(0,0,0);
background-position: 50% 98%;
background-size:200%;
-webkit-filter: opacity(.6);
bottom:0;
transition: .5s cubic-bezier(.3,0,.9,1);
transition-delay: 0s;
}

#dieciseite:checked ~ div .dieciseite {
background: rgba(0,0,0,1) url(http://www.lacor.info/film/a_la_folie/img/galerie/large/a_la_folie_04.jpg) no-repeat bottom right;
background-size: 192%;
background-position: 60% 35%;
-webkit-filter: opacity(1);
transition-delay: 7s;
}

.h-dieciseite {
bottom: 110vw;
transition: .8s bottom cubic-bezier(.7,0,.3,1) 2s;
}

#dieciseite:checked ~ div .h-dieciseite {
bottom: 0;
transition-delay: 1.3s;
}

.dieciocho {
background-color:rgba(0,0,0,1);
background-size:500%;
background-position: 0% 100%;
transition:25s cubic-bezier(1,.9,.3,.1) 2s;
transition-delay: 0s;
}

#dieciocho:checked ~ div .dieciocho {
background: rgba(0,0,0,1) url(http://www.lacor.info/film/a_la_folie/img/a_louest_des_rails_18.jpg) no-repeat bottom right;
background-size: 100% ;
background-position:50%  80% ;
transition-delay: 1s;
}

.diecinueve {
background-color:rgba(111, 77, 50,1);
background-size:600%;
background-position: 50%  80%;
transition:20s cubic-bezier(.1,.3,.9,1) 2s;
transition-delay: 0s;
}

#diecinueve:checked ~ div .diecinueve {
background: rgba(0, 0, 0,1) url(http://www.lacor.info/film/a_la_folie/img/galerie/large/a_la_folie_03.jpg) no-repeat bottom right;
background-size: 100% ;
background-position: 0% 100%;
transition-delay: 0s;
}

.veinte {
background-color:rgba(111, 77, 50,1);
background-size:40%;
background-position: 50%  80%;
transition:1500s cubic-bezier(1,.9,.3,.1) 2s;
transition-delay: 0s;
}

#veinte:checked ~ div .veinte {
background: rgba(111, 77, 50,1) url(http://www.lacor.info/film/a_la_folie/img/a_louest_des_rails_20.jpg) no-repeat bottom right;
background-size: 600% ;
background-position: 10% 600%;
transition-delay: 3s;
}


.veintiuno {
background-color:rgba(219, 196, 180,1);
background-image: linear-gradient(90deg, rgba(86, 76, 64,1),rgba(219, 196, 180,1));
background-position: -200vw -200vw;
transition: 8s
background-position cubic-bezier(.7,0,.3,1) 4s;
}

#veintiuno:checked ~ div .veintiuno {
background-position: 50% 100%;
transition-delay: 0s;
}

.veintidos {
background-color:rgba(223, 83, 27,1);
background-position:0 5%;
background-size:400%;
transition: 40s cubic-bezier(.07,.90,.76,.06);
transition-delay: 0s;
}

#veintidos:checked ~ div .veintidos {
background: rgba(0, 0, 0,1) url(http://www.lacor.info/film/a_la_folie/img/galerie/large/a_la_folie_27.jpg) no-repeat bottom right;
background-size: 100% ;
background-position: 0% 100%;
transition-delay: 5s;
}

.h-veintidos {
margin-left: 0vw;
transition: 5s  cubic-bezier(.3,0,.9,1);
}

#veintidos:checked ~ div .h-veintidos {
margin-left:-4vw;
transition-delay:40s;
}

.veintitres {
background-color: rgba(57, 56, 54,1);
background-position: 50% 90%;
background-size: 50%;
opacity:0;
transition: 10s cubic-bezier(.3,0,.9,1);
transition-delay: 0s;
}

#veintitres:checked ~ div .veintitres {
background: rgba(111, 77, 50,1) url(http://www.lacor.info/film/a_la_folie/img/galerie/large/a_la_folie_25.jpg) no-repeat bottom right;
background-size: 50%;
opacity:1;
background-position: 50% 90%;
transition-delay: 0s;
}


#cero:checked ~ div {top:0}
#uno:checked ~ div  {top:-100vh}
#dos:checked ~ div {top:-200vh}
#tres:checked ~ div {top:-300vh}
#cuatro:checked ~ div {top:-400vh}
#cinco:checked ~ div {top:-500vh}
#sies:checked ~ div {top:-600vh}
#siete:checked ~ div {top:-700vh}
#ocho:checked ~ div {top:-800vh}
#nueve:checked ~ div {top:-900vh}
#diez:checked ~ div {top:-1000vh}
#onse:checked ~ div {top:-1100vh}
#doce:checked ~ div {top:-1200vh}
#trece:checked ~ div {top:-1300vh}
#catorce:checked ~ div {top:-1400vh}
#quince:checked ~ div {top:-1500vh}
#dieciseis:checked ~ div {top:-1600vh}
#dieciseite:checked ~ div {top:-1700vh}
#dieciocho:checked ~ div {top:-1800vh}
#diecinueve:checked ~ div {top:-1900vh}
#veinte:checked ~ div {top:-2000vh}
#veintiuno:checked ~ div {top:-2100vh}
#veintidos:checked ~ div {top:-2200vh}
#veintitres:checked ~ div {top:-2300vh}


#cero:checked ~ .s_bar:before {top:0%;}
#uno:checked ~ .s_bar:before {top:4%;}
#dos:checked ~ .s_bar:before {top:8%;}
#tres:checked ~ .s_bar:before {top:12%;}
#cuatro:checked ~ .s_bar:before {top:16%;}
#cinco:checked ~ .s_bar:before {top:20%;}
#sies:checked ~ .s_bar:before {top:24%;}
#siete:checked ~ .s_bar:before {top:28%;}
#ocho:checked ~ .s_bar:before {top:32%;}
#nueve:checked ~ .s_bar:before {top:36%;}
#diez:checked ~ .s_bar:before {top:40%;}
#onse:checked ~ .s_bar:before {top:44%;}
#doce:checked ~ .s_bar:before {top:48%;}
#trece:checked ~ .s_bar:before {top:52%;}
#catorce:checked ~ .s_bar:before {top:56%;}
#quince:checked ~ .s_bar:before {top:60%;}
#dieciseis:checked ~ .s_bar:before {top:64%;}
#dieciseite:checked ~ .s_bar:before {top:68%;}
#dieciocho:checked ~ .s_bar:before {top:72%;}
#diecinueve:checked ~ .s_bar:before {top:76%;}
#veinte:checked  ~ .s_bar:before {top:80%;}
#veintiuno:checked  ~ .s_bar:before {top:84%;}
#veintidos:checked  ~ .s_bar:before {top:88%;}
#veintitres:checked  ~ .s_bar:before {top:92%;}


/*SETTINGS PATTERN*/
.tod:after { background-size:36px;}
.tud:after { background-size:12px;}
.tad:after { background-size:6px;}
.ted:after { background-size:20px;}
.tid:after { background-size:4px;}