h1{
font-size: 46px;
}
.nav {
position: fixed;
top: 0;
display: inline;
}
/*CЛАЙДШОУ*/
.demo {
position: relative;
padding-top: 50%;
overflow: hidden;
top: 0;
}
.demo input {
display: none;
}
.demo img {
position: absolute;
left: 50%;
top: 50%;
max-width: 1500px;
max-height: 500px;
transform: translate(-50%, -50%);
}
.demo label {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: 3s;
}
.demo label, .demo #on1:checked ~ [for="on1"], .demo #on2:checked ~ [for="on2"], .demo #on3:checked ~ [for="on3"], .demo #on4:checked ~ [for="on4"], .demo #on5:checked ~ [for="on5"] {
transform: translateX(-60%) scale(.7);
z-index: 2;
}
.demo #on1:checked ~ [for="on3"], .demo #on2:checked ~ [for="on4"], .demo #on3:checked ~ [for="on5"], .demo #on4:checked ~ [for="on1"], .demo #on5:checked ~ [for="on2"] {
transform: translateX(60%) scale(.7);
z-index: 2;
}
.demo #on1:checked ~ [for="on4"], .demo #on2:checked ~ [for="on5"], .demo #on3:checked ~ [for="on1"], .demo #on4:checked ~ [for="on2"], .demo #on5:checked ~ [for="on3"], .demo #on1:checked ~ [for="on5"], .demo #on2:checked ~ [for="on1"], .demo #on3:checked ~ [for="on2"], .demo #on4:checked ~ [for="on3"], .demo #on5:checked ~ [for="on4"] {
z-index: 1;
}
.demo #on1:checked ~ [for="on2"], .demo #on2:checked ~ [for="on3"], .demo #on3:checked ~ [for="on4"], .demo #on4:checked ~ [for="on5"], .demo #on5:checked ~ [for="on1"] {
transform: translateX(0);
z-index: 4;
visibility: visible;
}
.demo {
background-attachment: fixed;
background-position: center;
}
/*CЛАЙДШОУ*/
/*МАССА*/
.wrapper {
height: 450px;
text-align: center;
margin-top: 50px;
}
.wrapper2 {
height: 420px;
}
.wrapper3 {
height: 610px;
}
.wrapper4 {
height: 530px;
}
.parallax-img, .parallax-img_2, .parallax-img_3, .parallax-img_4 {
height: 100px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax-img {
background-image: url('images/1.jpg');
height: 400px;
}
.parallax-img_2 {
background-image: url('images/1.jpg');
height: 200px;
}
.parallax-img_3 {
background-image: url('images/1.jpg');
height: 600px;
}
.parallax-img_4 {
background-image: url('images/1.jpg');
height: 530px;
margin-top: 600px;
}
body {
margin: 0;
background: #000;
}
* {
font-family: Candara;
color: white;
font-size: 40px;
text-align: center;
}
h2 {
padding: 20px;
}
p {
margin: 5%;
font-size: 1.1rem;
}
.yourself{
	margin-top: 70px;
}
.text4 {
display: block;
width: 650px;
margin: 20px;
}
.text4 {
display: block;
width: 650px;
}
.text5 {
position: absolute;
left: -28.5em;
transition: left 0.5s ease-out;
display: block;
width: 1200px;
height: 250px;

}
.text5:hover {
left: 100px;
height: 250px;
width: 1200px;
}
.text6{
font-size: 50px;
position: absolute;
left:1130px;
bottom: 0px;
width: 600px;
height: 100px;
}
.text56:hover {
left: 120px;

}

/*МАСССА ^ */
/*ФОТОГАЛЕРЕЯ*/
.photos{
	margin-top: 20px;
}
.photo {
width: 700px;
margin: 0px auto;
}
.photo img {
width: 150px;
height: 150px;
}
.photo a {
display: block-inline;
background: pink;
margin-right: 10px;
margin-top: 5px;
padding: 5px;
float: left;
}
.photo a:hover {
background: violet;
}
.pressbox {
width: 0;
position: fixed;
overflow: auto;
left: 0;
top: 0;/* Поверх всех остальных элементов */
z-index: 9999;
text-align: center;/* Полупрозрачный серый фон */
background: rgba(0, 0, 0, 0.7);
}
.foto {
margin: 0px auto;
position: relative;
}
.pressbox img {
/* изначально полностью прозрачная картинка */
opacity: 0;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
margin: 0 auto;
transition: opacity .25s ease-in-out;
border-bottom: 55px solid rgba(0, 0, 0, 0.5);
width: 400px;
height: 400px;
box-shadow: 0px 0px 15px #fff;
}
.pressbox:target {
width: auto;
height: auto;
bottom: 0;
right: 0;
}
.pressbox:target img {
opacity: 1;
}
/*ФОТОГАЛЕРЕЯ ^ */
/*ПОВОРОТ*/
#container {
position: relative;
margin: 100px auto;
margin-top: 20px;
width: 1px;
height: 1px;
z-index: 1;
perspective: 1000px;
}
#card {
width: 100%;
height: 100%;
box-shadow: 5px 5px 5px #aaa;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#container:hover #card {
transform: rotateY(160deg);
}
#card img {
width: 450px;
}
.front {
position: absolute;
backface-visibility: hidden;
}
.back {
backface-visibility: hidden;
transform: rotateY(160deg);
}