﻿@import "/fonts/hattori/hattori.css";
@import "/fonts/djserif/djserif.css";
  @import "/fonts/ubuntu/ubuntu.css";
  
  html, body {
  min-height: 100%;
  height: 100%;
 width: 100%;
 margin: 0px;
 padding: 0px;
 text-align: center;
}

#content{
margin:0 0;
background-color: white;
}
	
	
  #page {min-height: 100%;
    height: auto !important;
    height: 100%;
    #background-image: url(/images/background.png); /* Путь к фоновому изображению */
    background-color: white; /* Цвет фона */
	 background-attachment:fixed;	
	display: block;
	    touch-action: none;

}
  #wrap {
   display: block;
min-height: 100%;
   height: auto !important;
    height: 100%;
touch-action: none;
}


#nav {
left:132px;
height:66px;
position:fixed;
}


#content {
margin: 0px;
padding:0px;
background-color: white;
border: 0px;
min-height: 1836px;
height: auto !important;
height: 1836px;
display: inline-block;
position:relative; 
text-align: center;
width: 1080px;
font-size: 0px;
touch-action: none;
}

#overlay{
	background:rgba(55,46,60, 0.7);
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	overflow:hidden;
	opacity: 0;
	animation: ani .3s forwards;
	touch-action: none;
}

@keyframes ani {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#block1, #block2, #block3, #block4, #block5 {
	width: 885px;
	height: auto;
	background-color: white;
	position:fixed;
	top:448px;
	left:100px;
	#overflow:hidden;
	opacity: 0;
	animation: ani .3s forwards;
	touch-action: none;
}

#block2 {
	height: 1000px;
	overflow: auto;
}

#block3 {
	height: 1200px;
	#overflow: auto;
}

#block4 {
	height: 891px;
	#overflow: auto;
	width: 800px;
	left:140px;
	top: 250px;
	
}


.sub-button {
	width: 100%;
	#border: 1px solid black;
}

.content-hide {
	display: none;
	opacity: 0;
}
  
a.button, a.main-button {
 border: 0px;
 padding: 0px;
 text-decoration: none;
 margin: 0px;
 display: inline-block;
 color: #FFF;
 line-height: normal;
 width:100%;
text-align: left;
outline: none; 
 } 
 
a.button{ 
height: 184px;
}
a.main-button {
	height: 916px;
}
 
 #main-button {
	background: url(/images/kultura.png) no-repeat;
	background-size: 100% 100%;  
  }
 #button-1 {
	 background: url(/images/katalog.png) no-repeat;
	 background-size: 100% 100%;
 }
 #button-2 {
	 background: url(/images/pravila.png) no-repeat;
	 background-size: 100% 100%;
 }
  #button-3 {
	 background: url(/images/afisha.png) no-repeat;
	 background-size: 100% 100%;
 }
  #button-4 {
	 background: url(/images/konkurs.png) no-repeat;
	 background-size: 100% 100%;
 }
  #button-5 {
	 background: url(/images/zonirovanie.png) no-repeat;
	 background-size: 100% 100%;
 }
 
 
a.button:active { background-image: -moz-linear-gradient(top,  #53377a 0%, #7587d9 50%, #a496f2);
 #text-shadow: 0px -2px 2 rgba(255, 255, 255, 0.5);
 #margin-top: 2px;
#box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.4);
 }

#close {
	position: absolute;
	width: 50px;
	right: 45px;
	top: 405px;
}

/*Аккордион*/

*, *::after, *::before{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
body{
  font-family: "Poppins", sans-serif;
}
div.c{
  position: relative;
  #margin:2em;
}
input{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity:0;
  visibility: 0;
}
h1{
  background:steelblue;
  color:white;
  #padding:1em;
  position: relative;
}
label::before{
  #content:"";
  #display: inline-block;
  #border: 15px solid transparent;
  #border-left:20px solid white;
}
label{
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}
div.p{
  max-height:0px;
  height: 167px;
  overflow: hidden;
  transition:max-height 0.5s;
  background-color: #7A6DB2;
  box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2);
  color: white;
  font-size: 30px;
  position: relative;
  border-bottom: 1px solid black;
border-top: 1px solid black;
}
div.p p {
  padding:0 20px;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

#p1{height: 34px;} #p2{height: 68px;} #p3{height: 102px;} #p4{height: 68px;} #p5{height: 102px;} #p6{height:102px;}
input:checked ~ h1 label::before{
  border-left:15px solid transparent;
  border-top:20px solid white;
  margin-top:12px;
  margin-right:10px;
}
input:checked ~ h1 ~ div.p{
  max-height:167px;
}
a{
  color:steelblue;
}