<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class='pages'>
<input id='one' name='trigger' type='radio'>
<input id='two' name='trigger' type='radio'>
<input id='three' name='trigger' type='radio'>
<input id='four' name='trigger' type='radio'>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='logo'>Fashion</div>
<div class='pagenumber'>1 2</div>
<div class='content'>
<div class='content_center'>
<h4>The latest in fashion & fashion design</h4>
</div>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='content'>
<div class='content_center right'>
<h4>The latest in fashion & fashion design</h4>
</div>
<div class='overlay'></div>
</div>
<div class='control next'>
<label for='two'></label>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='logo'>Fashion</div>
<div class='pagenumber'>2 3</div>
<div class='control'>
<label for='one'></label>
</div>
<div class='content'>
<div class='content_picture'>
<img src='https://news.broncolor.swiss/wp-content/uploads/2017/03/Bild01.jpg'>
</div>
<div class='content_offset'>
<h2>Subtitle</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna, vitae eleifend velit. Donec dui turpis, viverra vitae lobortis commodo, lobortis et ex.</p>
</div>
<h1>
<span>L</span>
<span>o</span>
<span>o</span>
<span>k</span>
<span> </span>
<span>a</span>
<span>t</span>
<span> </span>
<span>t</span>
<span>h</span>
<span>i</span>
<span>s</span>
<span> </span>
<span>a</span>
<span>w</span>
<span>e</span>
<span>s</span>
<span>o</span>
<span>m</span>
<span>e</span>
<br>
<span>h</span>
<span>e</span>
<span>a</span>
<span>d</span>
<span>l</span>
<span>i</span>
<span>n</span>
<span>e</span>
<span> </span>
<span>r</span>
<span>i</span>
<span>g</span>
<span>h</span>
<span>t</span>
<span> </span>
<span>h</span>
<span>e</span>
<span>r</span>
<span>e</span>
</h1>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='hamburger'>
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
</div>
<div class='control next'>
<label for='three'></label>
</div>
<div class='bg'></div>
<div class='footer'>
<i class="fab fa-google-plus-g"></i>
<i class="fas fa-retweet"></i>
<i class="far fa-heart"></i>
<i class="far fa-share-square"></i>
</div>
<div class='content'>
<div class='content_quote'>
<h5>
<span class='quo'>
<i>"</i>
</span>
<span>This is a quote</span>
<span>from someone</span>
<span class='name'>Jamie Coulter</span>
<span class='auth'>- Jcoulterdesign</span>
<span class='quo'>"</span>
</h5>
</div>
<div class='content_picture'>
<img src='https://news.broncolor.swiss/wp-content/uploads/2017/03/Bild01.jpg'>
</div>
<h1>
<span>L</span>
<span>o</span>
<span>o</span>
<span>k</span>
<span> </span>
<span>a</span>
<span>t</span>
<span> </span>
<span>t</span>
<span>h</span>
<span>i</span>
<span>s</span>
<span> </span>
<span>a</span>
<span>w</span>
<span>e</span>
<span>s</span>
<span>o</span>
<span>m</span>
<span>e</span>
<br>
<span>h</span>
<span>e</span>
<span>a</span>
<span>d</span>
<span>l</span>
<span>i</span>
<span>n</span>
<span>e</span>
<span> </span>
<span>r</span>
<span>i</span>
<span>g</span>
<span>h</span>
<span>t</span>
<span> </span>
<span>h</span>
<span>e</span>
<span>r</span>
<span>e</span>
</h1>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='logo'>Fashion</div>
<div class='pagenumber'>4 5</div>
<div class='content'>
<div class='content_center'>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<h6>Lorem ipsum dolor sit amet</h6>
</div>
</div>
<div class='control'>
<label for='two'></label>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='hamburger'>
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
</div>
<div class='control next'>
<label for='four'></label>
</div>
<div class='bg'></div>
<div class='content_centerimage'>
<img src='https://profoto.azureedge.net/cdn/049e042/contentassets/f00fdbc1a7764964bd7f6c48f288cb05/profoto-collapsible-reflectors-rossella-vanon-fashion-photography-img_2013-600x900.jpg?width=1280&quality=75&format=jpg'>
</div>
<div class='content'>
<div class='content_center right'>
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
<h6>Lorem ipsum dolor sit amet</h6>
</div>
</div>
<div class='footer'>
<i class="fab fa-google-plus-g"></i>
<i class="fas fa-retweet"></i>
<i class="far fa-heart"></i>
<i class="far fa-share-square"></i>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='logo'>Fashion</div>
<div class='pagenumber'>6 7</div>
<div class='content'>
<div class='content_section'>
<h2>Super</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna, vitae eleifend velit.</p>
</div>
<div class='content_section'>
<h2>Awesome</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna, vitae eleifend velit.</p>
</div>
<div class='content_section'>
<h2>Great</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a imperdiet sapien. Nunc vehicula lorem neque, eu rutrum sapien posuere ut. Nunc eget ullamcorper turpis. Sed in vehicula magna.</p>
</div>
</div>
<div class='control'>
<label for='three'></label>
</div>
</div>
</div>
<div class='pages_page'>
<div class='pages_page__inner'>
<div class='hamburger'>
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
<div class='hamburger_part'></div>
</div>
<div class='bg'></div>
<div class='content'></div>
<div class='footer'>
<i class="fab fa-google-plus-g"></i>
<i class="fas fa-retweet"></i>
<i class="far fa-heart"></i>
<i class="far fa-share-square"></i>
</div>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Sree+Krushnadevaraya&display=swap");
@import url("https://fonts.googleapis.com/css?family=Catamaran&display=swap");
:root {
--margin: 110px;
--background: #e2e2f5;
--perspective: 1800px;
--transition: transform 1s .2s, z-index 0s 0.5s;
--yellow: #ffce14;
}
body .pages_page {
width: 50%;
position: absolute;
right: 0px;
height: 100%;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
* {
box-sizing: border-box;
}
.overlay {
background: rgba(255, 155, 0, 0.7019607843);
position: fixed;
width: 100%;
pointer-events: none;
height: 100%;
z-index: -1;
}
body {
margin: 0;
padding: 0;
background: var(--background);
height: 100vh;
overflow: hidden;
font-family: 'Sree Krushnadevaraya', serif;
}
body .logo {
font-size: 20px;
padding: 33px 30px 30px 30px;
line-height: 0;
color: var(--yellow);
}
body .pagenumber {
position: absolute;
bottom: 20px;
left: 34px;
width: 400px;
color: var(--yellow);
letter-spacing: 60px;
}
body .pagenumber:after {
height: 1px;
width: 100px;
background: var(--yellow);
content: '';
display: block;
position: absolute;
left: 20px;
top: 19px;
}
body .hamburger {
position: absolute;
top: 38px;
height: 20px;
width: 30px;
right: 30px;
z-index: 1;
}
body .hamburger_part {
width: 20px;
height: 1px;
position: absolute;
right: 0;
background: var(--yellow);
}
body .hamburger_part:nth-of-type(1) {
top: 0px;
}
body .hamburger_part:nth-of-type(2) {
top: 4.5px;
}
body .hamburger_part:nth-of-type(3) {
top: 9px;
}
body .hamburger_part:last-child {
width: 8px;
}
body .pages {
width: calc(100% - var(--margin));
height: calc(100% - var(--margin));
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-perspective: var(--perspective);
perspective: var(--perspective);
box-shadow: 0 41px 38px -20px #0a3150;
max-width: 1300px;
max-height: 650px;
}
body .pages input {
display: none;
}
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div .pagenumber,
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div + div .pagenumber {
letter-spacing: 59px;
transition: all 0.8s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div .pagenumber:after,
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div + div .pagenumber:after {
width: 100px;
transition: all 1s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div .content_centerimage,
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div + div .content_centerimage {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
transition: all 0.8s 0.5s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div .content h4, body .pages input:nth-of-type(3):checked + input + div + div + div + div + div .content h6,
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div + div .content h4,
body .pages input:nth-of-type(3):checked + input + div + div + div + div + div + div .content h6 {
transition: all 1.5s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(3):not(checked) + input + div + div + div + div + div .pagenumber,
body .pages input:nth-of-type(3):not(:checked) + input + div + div + div + div + div + div .pagenumber {
letter-spacing: 0;
transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):not(checked) + input + div + div + div + div + div .pagenumber:after,
body .pages input:nth-of-type(3):not(:checked) + input + div + div + div + div + div + div .pagenumber:after {
width: 0px;
transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):not(checked) + input + div + div + div + div + div .content_centerimage,
body .pages input:nth-of-type(3):not(:checked) + input + div + div + div + div + div + div .content_centerimage {
-webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
transition: all 0.8s 0s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(3):not(checked) + input + div + div + div + div + div .content h4, body .pages input:nth-of-type(3):not(checked) + input + div + div + div + div + div .content h6,
body .pages input:nth-of-type(3):not(:checked) + input + div + div + div + div + div + div .content h4,
body .pages input:nth-of-type(3):not(:checked) + input + div + div + div + div + div + div .content h6 {
transition: all 1.5s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);
-webkit-transform: translateZ(200px);
transform: translateZ(200px);
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .pagenumber,
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .pagenumber {
letter-spacing: 59px;
transition: all 0.8s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .pagenumber:after,
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .pagenumber:after {
width: 100px;
transition: all 1s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .content_section,
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .content_section {
transition: all 0.8s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .content_section:nth-of-type(1),
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .content_section:nth-of-type(1) {
left: 100px;
transition: all 0.8s 0.3s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .content_section:nth-of-type(2),
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .content_section:nth-of-type(2) {
left: 230px;
transition: all 0.8s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div .content_section:nth-of-type(3),
body .pages input:nth-of-type(4):checked + div + div + div + div + div + div + div + div .content_section:nth-of-type(3) {
left: 130px;
transition: all 0.8s 0.5s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .pagenumber,
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .pagenumber {
letter-spacing: 0;
transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .pagenumber:after,
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .pagenumber:after {
width: 0px;
transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .content_section,
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .content_section {
-webkit-filter: blur(20px);
filter: blur(20px);
transition: all 0.8s 0.5s cubic-bezier(0.6, 0.045, 0.165, 1);
opacity: 0;
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .content_section:nth-of-type(1),
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .content_section:nth-of-type(1) {
left: 0;
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .content_section:nth-of-type(2),
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .content_section:nth-of-type(2) {
left: 0;
}
body .pages input:nth-of-type(4):not(checked) + div + div + div + div + div + div + div .content_section:nth-of-type(3),
body .pages input:nth-of-type(4):not(:checked) + div + div + div + div + div + div + div + div .content_section:nth-of-type(3) {
left: 0;
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span {
transition: all 1.5s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(1),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(1) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(2),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(2) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(3),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(3) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(4),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(4) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(5),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(5) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div h5 span:nth-of-type(6),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div h5 span:nth-of-type(6) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .pagenumber,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .pagenumber {
letter-spacing: 59px;
transition: all 0.8s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .pagenumber:after,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .pagenumber:after {
width: 100px;
transition: all 1s 0.7s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
transition: all 1s .5s;
-webkit-perspective: var(--perspective);
perspective: var(--perspective);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content_picture,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content_picture {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
transition: all 1s 0.8s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span,
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span {
transition: all 1.5s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(1),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(1) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(2),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(2) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(3),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(3) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(4),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(4) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(5),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(5) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(6),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(6) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(7),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(7) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(8),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(8) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(9),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(9) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(10),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(10) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(11),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(11) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(12),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(12) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(13),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(13) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(14),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(14) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(15),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(15) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(16),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(16) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(17),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(17) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(18),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(18) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(19),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(19) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(20),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(20) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(21),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(21) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(22),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(22) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(23),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(23) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(24),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(24) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(25),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(25) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(26),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(26) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(27),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(27) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(28),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(28) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(29),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(29) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(30),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(30) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(31),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(31) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(32),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(32) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(33),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(33) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(34),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(34) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(35),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(35) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(36),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(36) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(37),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(37) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(38),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(38) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(39),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(39) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):checked + input + input + div + div + div .content h1 span:nth-of-type(40),
body .pages input:nth-of-type(2):checked + input + input + div + div + div + div .content h1 span:nth-of-type(40) {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span {
transition: all 1.5s 0.4s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(1),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(1) {
-webkit-transform: translateZ(315px);
transform: translateZ(315px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(2),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(2) {
-webkit-transform: translateZ(65px);
transform: translateZ(65px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(3),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(3) {
-webkit-transform: translateZ(74px);
transform: translateZ(74px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(4),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(4) {
-webkit-transform: translateZ(326px);
transform: translateZ(326px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(5),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(5) {
-webkit-transform: translateZ(439px);
transform: translateZ(439px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div h5 span:nth-of-type(6),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div h5 span:nth-of-type(6) {
-webkit-transform: translateZ(162px);
transform: translateZ(162px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .pagenumber,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .pagenumber {
letter-spacing: 0;
transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .pagenumber:after,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .pagenumber:after {
width: 0px;
transition: all 0.5s 0.2s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content {
-webkit-filter: blur(10px);
filter: blur(10px);
opacity: 0;
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
transition: all 1s .2s;
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content_picture,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content_picture {
transition: all 0.4s 0s cubic-bezier(0.6, 0.045, 0.165, 1);
-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span,
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span {
transition: all 1.5s 0s cubic-bezier(0.6, 0.045, 0.165, 1);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(1),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(1) {
-webkit-transform: translateZ(751px);
transform: translateZ(751px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(2),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(2) {
-webkit-transform: translateZ(688px);
transform: translateZ(688px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(3),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(3) {
-webkit-transform: translateZ(745px);
transform: translateZ(745px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(4),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(4) {
-webkit-transform: translateZ(195px);
transform: translateZ(195px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(5),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(5) {
-webkit-transform: translateZ(520px);
transform: translateZ(520px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(6),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(6) {
-webkit-transform: translateZ(610px);
transform: translateZ(610px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(7),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(7) {
-webkit-transform: translateZ(626px);
transform: translateZ(626px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(8),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(8) {
-webkit-transform: translateZ(685px);
transform: translateZ(685px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(9),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(9) {
-webkit-transform: translateZ(367px);
transform: translateZ(367px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(10),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(10) {
-webkit-transform: translateZ(636px);
transform: translateZ(636px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(11),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(11) {
-webkit-transform: translateZ(324px);
transform: translateZ(324px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(12),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(12) {
-webkit-transform: translateZ(644px);
transform: translateZ(644px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(13),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(13) {
-webkit-transform: translateZ(285px);
transform: translateZ(285px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(14),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(14) {
-webkit-transform: translateZ(333px);
transform: translateZ(333px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(15),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(15) {
-webkit-transform: translateZ(344px);
transform: translateZ(344px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(16),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(16) {
-webkit-transform: translateZ(649px);
transform: translateZ(649px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(17),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(17) {
-webkit-transform: translateZ(493px);
transform: translateZ(493px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(18),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(18) {
-webkit-transform: translateZ(258px);
transform: translateZ(258px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(19),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(19) {
-webkit-transform: translateZ(599px);
transform: translateZ(599px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(20),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(20) {
-webkit-transform: translateZ(227px);
transform: translateZ(227px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(21),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(21) {
-webkit-transform: translateZ(198px);
transform: translateZ(198px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(22),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(22) {
-webkit-transform: translateZ(687px);
transform: translateZ(687px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(23),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(23) {
-webkit-transform: translateZ(392px);
transform: translateZ(392px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(24),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(24) {
-webkit-transform: translateZ(360px);
transform: translateZ(360px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(25),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(25) {
-webkit-transform: translateZ(480px);
transform: translateZ(480px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(26),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(26) {
-webkit-transform: translateZ(585px);
transform: translateZ(585px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(27),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(27) {
-webkit-transform: translateZ(587px);
transform: translateZ(587px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(28),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(28) {
-webkit-transform: translateZ(441px);
transform: translateZ(441px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(29),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(29) {
-webkit-transform: translateZ(211px);
transform: translateZ(211px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(30),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(30) {
-webkit-transform: translateZ(233px);
transform: translateZ(233px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(31),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(31) {
-webkit-transform: translateZ(451px);
transform: translateZ(451px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(32),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(32) {
-webkit-transform: translateZ(480px);
transform: translateZ(480px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(33),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(33) {
-webkit-transform: translateZ(416px);
transform: translateZ(416px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(34),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(34) {
-webkit-transform: translateZ(712px);
transform: translateZ(712px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(35),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(35) {
-webkit-transform: translateZ(371px);
transform: translateZ(371px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(36),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(36) {
-webkit-transform: translateZ(332px);
transform: translateZ(332px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(37),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(37) {
-webkit-transform: translateZ(209px);
transform: translateZ(209px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(38),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(38) {
-webkit-transform: translateZ(667px);
transform: translateZ(667px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(39),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(39) {
-webkit-transform: translateZ(706px);
transform: translateZ(706px);
}
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div .content h1 span:nth-of-type(40),
body .pages input:nth-of-type(2):not(:checked) + input + input + div + div + div + div .content h1 span:nth-of-type(40) {
-webkit-transform: translateZ(394px);
transform: translateZ(394px);
}
body .pages_page {
pointer-events: none;
float: right;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body .pages_page:nth-of-type(1) {
z-index: 7;
transition: var(--transition);
}
body .pages_page:nth-of-type(2) {
z-index: 6;
transition: var(--transition);
}
body .pages_page:nth-of-type(3) {
z-index: 5;
transition: var(--transition);
}
body .pages_page:nth-of-type(4) {
z-index: 4;
transition: var(--transition);
}
body .pages_page:nth-of-type(5) {
z-index: 3;
transition: var(--transition);
}
body .pages_page:nth-of-type(6) {
z-index: 2;
transition: var(--transition);
}
body .pages_page:nth-of-type(7) {
z-index: 1;
transition: var(--transition);
}
body .pages_page:nth-of-type(8) {
z-index: 0;
transition: var(--transition);
}
body .pages_page:nth-of-type(1) {
left: 0;
z-index: 0;
-webkit-transform: rotateY(0deg) !important;
transform: rotateY(0deg) !important;
pointer-events: none;
}
body .pages_page:nth-of-type(1) .pages_page__inner {
-webkit-transform: rotateY(0deg) !important;
transform: rotateY(0deg) !important;
}
body .pages_page:nth-of-type(2) {
pointer-events: all;
}
body .pages_page:nth-of-type(odd) .pages_page__inner {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
body .pages_page:nth-of-type(1) .pages_page__inner {
background-size: 880px !important;
background-position: center !important;
background: url("http://cdn.lightgalleries.net/4d80d92265da9/images/Arielle16-01_51088-3.jpg");
}
body .pages_page:nth-of-type(2) .pages_page__inner {
background-size: 870px !important;
background-position: center !important;
background: url("http://cdn.lightgalleries.net/4d80d92265da9/images/CJ19-02_40732-1.jpg");
}
body .pages_page:nth-of-type(2) .pages_page__inner h4 {
color: black;
z-index: 3;
}
body .pages_page:nth-of-type(3) .pages_page__inner {
background: url("https://iso.500px.com/wp-content/uploads/2014/12/fashion_1.jpg");
background-position: 0 0;
}
body .pages_page:nth-of-type(3) .pages_page__inner .content {
-webkit-clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);
clip-path: polygon(0% 0%, 50% 0, 50% 100%, 0% 100%);
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200%;
position: absolute;
}
body .pages_page:nth-of-type(6) .pages_page__inner {
background: #4a5f5c;
}
body .pages_page:nth-of-type(4) .pages_page__inner .content {
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);
height: 100%;
width: 200%;
position: absolute;
left: -100%;
}
body .pages_page:nth-of-type(4) .pages_page__inner .bg {
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);
height: 100%;
width: 200%;
position: relative;
background: url("https://iso.500px.com/wp-content/uploads/2014/12/fashion_1.jpg");
background-size: 1400px !important;
left: -100%;
}
body .pages_page:nth-of-type(5) .pages_page__inner {
background: url("http://cdn.lightgalleries.net/4d80d92265da9/images/Tayna16-12_90574-2.jpg");
background-size: 870px !important;
background-position: center !important;
}
body .pages_page:nth-of-type(7) .pages_page__inner {
background: url("http://ruthrose.co.uk/wp-content/uploads/2018/04/lingerie-fashion-photographer-photography-shoot-fitness-swimwear-shoot180317_POCKET9661-f1.jpg");
background-position: 0 0;
background-size: 1400px !important;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section {
position: absolute;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section h2 {
margin: 0;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section h2,
body .pages_page:nth-of-type(7) .pages_page__inner .content_section p {
margin: 0;
color: var(--yellow);
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section p {
line-height: 18px;
opacity: 0.95;
font-size: 13px;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section:nth-of-type(1) {
top: 100px;
width: 200px;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section:nth-of-type(2) {
top: 274px;
width: 300px;
}
body .pages_page:nth-of-type(7) .pages_page__inner .content_section:nth-of-type(3) {
top: 410px;
width: 260px;
}
body .pages_page:nth-of-type(8) .pages_page__inner {
background: url("http://ruthrose.co.uk/wp-content/uploads/2018/04/lingerie-fashion-photographer-photography-shoot-fitness-swimwear-shoot180317_POCKET9661-f1.jpg");
background-position: 0 0;
}
body .pages_page:nth-of-type(8) .pages_page__inner .content {
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);
height: 100%;
width: 200%;
position: absolute;
left: -100%;
}
body .pages_page:nth-of-type(8) .pages_page__inner .bg {
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 100%);
height: 100%;
width: 200%;
position: relative;
background: url("http://ruthrose.co.uk/wp-content/uploads/2018/04/lingerie-fashion-photographer-photography-shoot-fitness-swimwear-shoot180317_POCKET9661-f1.jpg");
background-size: 1400px !important;
left: -100%;
}
body .pages_page__inner {
background: url("https://www.colorfusionstudio.com/wp-content/uploads/2015/07/cfs-models-003-683x1024.jpg");
background-size: 1400px !important;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body .pages_page__inner .control {
position: absolute;
z-index: 1;
width: 31px;
height: 31px;
border: 1px solid var(--yellow);
border-radius: 100px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 30px;
cursor: pointer;
transition: all .23s;
box-shadow: 0 0 0 0px #bf9726;
}
body .pages_page__inner .control:hover {
box-shadow: 0 0 0 10px rgba(191, 151, 38, 0.3);
left: 34px;
}
body .pages_page__inner .control:hover:before {
width: 40px;
left: -40px;
}
body .pages_page__inner .control.next {
left: auto;
right: 30px;
}
body .pages_page__inner .control.next:hover {
right: 34px;
}
body .pages_page__inner .control.next:hover:before {
width: 40px;
right: -40px;
}
body .pages_page__inner .control.next:before {
left: auto;
right: -33px;
}
body .pages_page__inner .control.next:after {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
top: 5px;
left: 11px;
pointer-events: none;
}
body .pages_page__inner .control label {
z-index: 2;
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
}
body .pages_page__inner .control:after {
content: '\f104';
display: block;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: var(--yellow);
position: absolute;
left: 10px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
transition: all .2s;
}
body .pages_page__inner .control:before {
content: '';
position: absolute;
display: block;
width: 32px;
height: 1px;
background: var(--yellow);
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: -32px;
transition: all .2s;
}
body .pages_page__inner .footer {
position: absolute;
bottom: 26px;
z-index: 2;
color: var(--yellow);
right: 30px;
font-size: 12px;
}
body .pages_page__inner .footer i {
margin: 0 10px;
}
body .pages_page__inner .content {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
width: 100%;
height: 100%;
}
body .pages_page__inner .content_centerimage {
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 50%;
text-align: center;
width: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
max-width: 300px;
}
body .pages_page__inner .content_centerimage img {
width: 100%;
}
body .pages_page__inner .content_center {
position: absolute;
text-align: center;
width: 260px;
right: -130px;
padding-bottom: 10px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}
body .pages_page__inner .content_center img {
width: 300px;
}
body .pages_page__inner .content_center .logo {
font-size: 30px;
}
body .pages_page__inner .content_center h4,
body .pages_page__inner .content_center h6 {
color: var(--yellow);
font-size: 38px;
font-weight: normal;
margin: 0;
line-height: 38px;
}
body .pages_page__inner .content_center h4 {
color: var(--yellow);
font-size: 38px;
font-weight: normal;
margin: 0;
line-height: 38px;
border-top: 1px solid;
border-bottom: 1px solid;
padding: 15px 20px 29px;
}
body .pages_page__inner .content_center h6 {
font-size: 20px;
margin: 0;
opacity: 0.5;
}
body .pages_page__inner .content_center h6:nth-of-type(2) {
font-size: 16px;
margin-top: 10px;
}
body .pages_page__inner .content_center.right {
right: auto;
left: -130px;
-webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}
body .pages_page__inner .content_picture {
width: 220px;
position: absolute;
left: 50%;
-webkit-transform: translateX(-40px);
transform: translateX(-40px);
top: 294px;
}
body .pages_page__inner .content_picture img {
width: 100%;
margin: 0;
display: inline-block;
}
body .pages_page__inner .content_quote {
position: absolute;
left: calc(50% + 250px);
bottom: 100px;
width: 200px;
}
body .pages_page__inner .content_quote h5 span {
display: block;
color: var(--yellow);
font-size: 34px;
font-weight: normal;
line-height: 24px;
}
body .pages_page__inner .content_quote h5 span.name, body .pages_page__inner .content_quote h5 span.auth {
font-size: 13px;
opacity: 0.7;
margin: 22px 0 0 0;
position: Relative;
left: 140px;
}
body .pages_page__inner .content_quote h5 span.auth {
margin: -7px 0;
}
body .pages_page__inner .content_quote h5 span.quo {
font-family: 'Catamaran', sans-serif;
font-size: 80px;
position: absolute;
left: 195px;
top: 90px;
}
body .pages_page__inner .content_quote h5 span.quo:nth-of-type(1) i {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
left: -226px;
top: -100px;
display: block;
font-style: normal;
position: relative;
}
body .pages_page__inner .content_offset {
position: absolute;
width: 280px;
top: 260px;
left: 50%;
-webkit-transform: translateX(-350px);
transform: translateX(-350px);
color: var(--yellow);
}
body .pages_page__inner .content_offset h2,
body .pages_page__inner .content_offset p {
margin: 0;
}
body .pages_page__inner .content_offset h2 {
color: var(--yellow);
font-size: 16px;
text-transform: uppercase;
letter-spacing: 2px;
margin: 20px 0 8px 0;
}
body .pages_page__inner .content_offset p {
font-size: 13px;
line-height: 20px;
color: var(--yellow);
}
body .pages_page__inner .content h1 {
font-size: 53px;
color: var(--yellow);
text-transform: uppercase;
padding: 120px;
margin: 0;
font-weight: normal;
letter-spacing: -6px;
line-height: 51px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
body .pages_page__inner .content h1 span {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display: inline-block;
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div {
pointer-events: none;
z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(2):checked + input + input + div + div {
pointer-events: none;
z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div {
pointer-events: none;
z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div {
pointer-events: none;
z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div {
pointer-events: none;
z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(3):checked + input + div + div + div + div {
pointer-events: none;
z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div {
pointer-events: none;
z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div {
pointer-events: none;
z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div {
pointer-events: none;
z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div {
pointer-events: none;
z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div {
pointer-events: none;
z-index: 9;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div + div {
pointer-events: all;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
z-index: 10;
transition: var(--transition);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div + div .control {
box-shadow: 0 0 0 200px rgba(0, 0, 0, 0);
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div + div + div {
pointer-events: all;
}
body .pages input[type="radio"]:nth-of-type(4):checked + div + div + div + div + div + div {
pointer-events: none;
z-index: 9;
}
