@media screen and (max-width: 1100px) { 
    .e>h2{
        font-size: 3rem !important;
        margin-top:2.2rem!important; 
    }
}
@media screen and (max-width: 800px) { 
    .e>h2{
        font-size: 2rem !important;
        margin-top:2.9rem!important; 
    }
       .c>a{
    font-size: 1.5rem!important;
}
}
@media screen and (max-width: 500px) { 
    .e>h2{
        font-size: 1.5rem !important;
        margin-top:2.9rem!important; 
    }
    .centre img{
        width:22rem!important;
    }
    ul.slider li.slides {
    width:20rem !important;
    }
	ul.slider li.track {
	width:20rem !important;
	margin-left:2.5rem !important;
	}
    ul.slider li.lArrow {
	left:0rem !important;
}
ul.slider li.rArrow {
	left:0rem !important;
}
    .c>a{
    font-size: 1.2rem!important;
}
footer{
    font-size: 1.2rem !important;
}
footer>p{
    font-size: 0.8rem!important;
    padding-left: 1rem;!important;
}
}
body{
    overflow-x: hidden;
    background: lightyellow;
}
footer{
    text-align: center;
    font-size: 1.4rem;
    padding:5px;
    border-radius:0.5rem;
    color:rgba(255, 255, 255, 0.6);;
    background: rgba(36, 36, 36, 0.85);
    margin-top: 5px;
    clear: both;
}
footer>p{
    text-align: left;
    font-size: 0.98rem!important;
    padding-left: 4rem;
}
.centre p{
    font-size: 1.2rem;
    text-indent: 2rem;
    padding: 0 1rem;
}
.centre h2{
    font-size: 2.7rem;
}
.nazv{
    background: rgba(94, 92, 92, 0.8);
}
.nazv p{
    font-size: 2rem;
}
.center{
    margin:0 auto;
    text-align: center;
}
/*Для 3D----------------------*/
.block{
    height:10rem;
}
.verh{
    perspective: 90000px;
    float: left;
    width: 30%;
    height:100%;
    margin: 1%;
    margin-top:-10rem;
    /*для класса verh адаптивный дизайн*/
    }
.container {
perspective-origin: 50% 20%;
width: 100%; 
height: 100%;
margin: 9rem auto 0;
margin-left: 1.4rem;
transform-style: preserve-3d;
transition: all 2s;
}
.container:hover{
  transform:rotateX(-90deg);
  transition: all 2s;
}
.c{
background-size:50% 50%;
}
.e{
background-size:50% 50%;
}
.inside { 
position: absolute; 
width: 100%; 
height: 80%; 
/*border: 1px solid black;*/
opacity: 0.8; 

transform:translateX(-50%) translateY(-50%);
top:50%;
left:50%;
}
.side { 
position: absolute; 
width: 100%; 
height: 100%; 
border: 1px solid black;
opacity: 1; 
background: blue; 
}
.top { 
  transform: translateY(-50%) rotateX(90deg);
  background:orchid;
} 
.front { 
  transform: translateZ(4.6em); 
  background:lightgreen;
}
/*Основное----------------------*/
.inside>a{
text-decoration:none;
text-align: center;
color: chartreuse;
border:1px solid black;
display:block;
width:95%;
height:25%;
margin:0 0 3% 2%;
border-radius: 0.5rem;
}
.foto>.container>.side>.inside>a,.contacts>.container>.side>.inside>a{
 margin-top:3rem;   
}
.centre img{
 width:30rem;
}
h1,h2,h3{
    text-align:center;
}
h1{
    font-size: 4.5rem;
}
.e>h2{
    position:relative;
    font-size: 4rem;
    font-family: 'Yeseva One', cursive;
    margin:1.6rem auto;
}
.c>a{
    font-size: 2rem;
}
.c>a:hover{
    background:rgba(33%, 33%, 33%, 0.5);;
}
.slides{
    margin-top:1.4rem;
}
/*Слайдшоу----------------------*/
.cont {
    overflow: hidden;
    position: relative;
}
span.cap {
    display:none;
}
ul.slider {
    margin:0 auto;
    height:22rem;
    list-style:none;
    position:relative;
    width:36rem;
}
ul.slider li {
    float:left;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides {
    height:20rem;
    overflow:hidden;
    position:relative;
    width:28rem;
    z-index:10;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides img {
    display:block;
    left:50%;
    opacity:0; 
    position:absolute;
    top:0;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides img.g1,
ul.slider li.slides img.g2,
ul.slider li.slides img.g3,
ul.slider li.slides img.g4,
ul.slider li.slides img.g5 {
    margin-left:-13rem;
    width:26rem;
    height: 20rem;
}
ul.slider li.lArrow,
ul.slider li.rArrow {
    background-color:#aaa;
	top:50%;
    position:relative;
	height:40px;
	width:40px;
    z-index:5;
    text-decoration: none !important;
    border-radius: 50%;
    line-height: 2;
    border: 2px solid #aaa;
}
ul.slider li.lArrow {
	left:0.5rem;
    background-image: url(images/arrowL.jpg);
    background-size: cover;
	
}
ul.slider li.rArrow {
	left:-0.5rem;
    background-image: url(images/arrowR.jpg);
    background-size: cover;
    background-position: -3px;
}
ul.slider li.lArrow a,
ul.slider li.rArrow a {
    display:block;
    position:absolute;
    top:5px;
    width:50px;	
}
ul.slider li.lArrow a:before {
    content:"\00A0";
    margin-left:15px;
	font: bold 20px "Verdana, Arial, sans-serif";
	color:black;
}
ul.slider li.rArrow a:after {
    content:"\00A0";
    margin-left:15px;
	font:bold 20px "Verdana, Arial, sans-serif";
	color:black;
}
ul.slider li.lArrow:hover {
    background-color:#eee;
    left:2px;
}
ul.slider li.rArrow:hover {
    background-color:#eee;
    left:-2px;
}
ul.slider li.track {
    background-color:rgba(255,255,255,0.3);
    clear:left;
    height:1.5rem;
    margin-left:3.5rem;
    margin-top:-1.5rem;
    position:relative;
    text-align:center;
    width:26rem;
    z-index:20;
}
ul.slider li.track a {
    background-color:#fff;
    display:inline-block;
    height:10px;
    margin:5px;
    width:10px;
	border-radius:50%;
}
ul.slider li.track a:hover {
    background-color:#ffc;
}
span#slide1:target ~ ul.slider li.slides .g1,
span#slide2:target ~ ul.slider li.slides .g2,
span#slide3:target ~ ul.slider li.slides .g3,
span#slide4:target ~ ul.slider li.slides .g4{
    opacity:1;

}
ul.slider li.slides .g1{
    opacity:1;
}

span#slide1:target ~ ul.slider li.track .tr1, 
span#slide2:target ~ ul.slider li.track .tr2, 
span#slide3:target ~ ul.slider li.track .tr3, 
span#slide4:target ~ ul.slider li.track .tr4{
    background-color:#ff0;
}

span#slide1:target ~ ul.slider li.lArrow a,
span#slide1:target ~ ul.slider li.rArrow a {z-index:10}
span#slide1:target ~ ul.slider li.rArrow .a2 {z-index:100}
span#slide1:target ~ ul.slider li.lArrow .a4 {z-index:100}

span#slide2:target ~ ul.slider li.lArrow a,
span#slide2:target ~ ul.slider li.rArrow a {z-index:10}
span#slide2:target ~ ul.slider li.rArrow .a3 {z-index:100}
span#slide2:target ~ ul.slider li.lArrow .a1 {z-index:100}

span#slide3:target ~ ul.slider li.lArrow a,
span#slide3:target ~ ul.slider li.rArrow a {z-index:10}
span#slide3:target ~ ul.slider li.rArrow .a4 {z-index:100}
span#slide3:target ~ ul.slider li.lArrow .a2 {z-index:100}

span#slide4:target ~ ul.slider li.lArrow a,
span#slide4:target ~ ul.slider li.rArrow a {z-index:10}
span#slide4:target ~ ul.slider li.rArrow .a1 {z-index:100}
span#slide4:target ~ ul.slider li.lArrow .a3 {z-index:100}
a{
    text-decoration: none !important;
}
/*Для фотогаллереи----------------------*/
.wrap{
	width:99%;
	margin:0 auto;
}
.photos1{	
	width:82%;
	margin:0 auto;
    text-align: center;
	}
.photos1 img{
    height: 15rem;
    width:20rem;
	transition:all 1s;
}
.photos1 a{
	display:block-inline;
	background:#fff;
	margin-right:5px;
	margin-top:5px;
    margin-bottom: 5px;
	padding:5px;
	float:left;
	transition:all 1s;
}	
.photos1 a:hover img    { 
	width:15rem;
	height:15rem;
	border-radius:50%;
	transition:all 1s;
 }
.pressbox {
    width: 0;
    height: 0;
    position: fixed;
    overflow: auto;
    left: 0;
    top: 0;
    /* Поверх всех остальных элементов */
    z-index: 9999;
    text-align: center;
    /* Полупрозрачный серый фон */
    background: rgba(0,0,0,0.5);
	transition:all 1s;
    }

.fotos{
	background: #fff;
	width:32rem;
	height:20rem;
	margin:50px auto;
	color:black;
	/* тени */   
	box-shadow: 0px 0px 40px #444;
	transition:all 1s;
}
.pressbox img    {
	/* изначально полностью прозрачная картинка */
    
	opacity: 0;
	padding: 10px;
	background: #ffffff;
	margin-top: 0px;
    width:30rem;
    height:17rem;
	transition:all 1s;
	
	/* свойство прозрачности изменяется за 0.25 секунды */   
	transition: opacity .25s ease-in-out;       
	}

.pressbox:target {
    width: auto;
    height: auto;
    bottom: 0;
    right: 0;
    }
  
 .pressbox:target img {
    opacity: 1;
    }
/*----------------------*/
.forma {
    margin: 40px auto;
    width: 400px;
    margin-top: 80px;
}

input {
    display: block;
    margin: 20px auto;
}

input:focus:invalid {
    background: pink;
    outline: 2px #f00 solid;
}

input:focus:valid {
    outline: 2px #0f0 solid;
}

input:valid {
    background: white;
    outline: none;
}

input:invalid {
    background: white;
    outline: 2px #f00 solid;
}