*{
	margin: 0;
	padding: 0;
}


html{
	height: 100%;
}


body{
	height: 100%;
}



img.hous{
	position: fixed;
	z-index: 99;
	top: 35%;
	margin-top: -267px;
	right: 0;
}

img.agr{
	position: fixed;
	z-index: 99;
	top: 35%;
	margin-top: -216px;
	left: 0;
}

img.kirk{
	position: fixed;
	z-index: 79;
	top: 35%;
	margin-top: -120px;
	left: 20px;
	display: none;
}



div.trub_water{
	position: fixed;
	z-index: 79;
	top: 35%;
	margin-top: 9px;
	right: 215px;
	left: 80px;
	height: 5px;
	background:
	url('../img/left.gif') repeat-x;
	border-top: 3px solid black;
	border-bottom: 3px solid black;
	box-shadow: 0 0 5px 1px black;
	display: none;
}





div.fon{
	position: fixed;
	z-index: 19;
	background: #239CEF;
	width: 100%;
	height: 35%;
	top: 0;
	margin-top: -15px;
	left: 0;
}



.header{
	position: fixed;
	z-index: 20;
	width: 100%;
	height: 35%;
	background:
	url('../img/fon_gro.png') repeat-x;
    background-position:bottom;
}



div.bur{
	position: absolute;
	z-index: 9;
	left: 35px;
	top: 50px;
	height: 35%;
	margin-top: -60px;
	width: 6px;
	background: url('../img/trub.png');
	border-radius: 0 0 15px 15px;
	border-left: 2px solid black;
	border-right: 2px solid black;
	box-shadow: 0 0 5px 1px black;
}

img.bur_img{
	width: 6px;
	position: absolute;
	bottom: 0;
	margin-bottom: 0px;
}


.box_0{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 67%;
	background: url('../img/glin.png');
}


.box_1{
	position: fixed;
	z-index: 199;
	bottom: 0;
	width: 100%;
	height: 67%;
}



.vid_bur{
	position: relative;
	width: 40%;
	max-width: 350px;
	margin: 170px 0 0 10%;
	box-shadow: 5px 5px 10px 0px black;
	border: 2px solid #239CEF;
	border-radius: 5px;
}

.vid_mont{
	position: relative;
	width: 40%;
	max-width: 350px;
	margin: 170px 0 0 5%;
	box-shadow: 5px 5px 10px 0px black;
	border: 2px solid #239CEF;
	border-radius: 5px;
}






.text {
  position: fixed;
  z-index: 99;
  width: 90%;
  left: 10%;
  top: 35%;
  margin-top: 40px;
}

p {
  display: inline-block;
  font-size: 2.5rem;
}

.word {
  	position: absolute;
  	opacity: 0;
	color: white;
	text-shadow:
	5px 5px 2px black,
	4px 4px 2px black,
	3px 3px 2px black,
	2px 2px 2px black,
	1px 1px 2px black;
}

.tter {
  display: inline-block;
  position: relative;
  transform-origin: 50% 50% 25px;
}

.tters {
  display: inline-block;
  position: relative;
  transform-origin: 50% 50% 25px;
  width: 15px;
}

.tter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.tter.behind {
  transform: rotateX(-90deg);
}

.tter.in {
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}





.menu{
	position: fixed;
	top: -1px;
	left: -1px;
	z-index: 99;
	width: 70%;
	max-width: 800px;
	height: 110px;
	/*background: #67B6EA;
	border-radius: 0 0 30px 0;
	border: 2px solid black;
	box-shadow:
	inset 2px 2px 10px 3px black,
	0 0 0 10px #239CEF,
	10px 10px 15px 10px black;*/
}

.menu h1.logo_h{
	font-size: 4rem;
	color: white;
	margin: 0 0 0 10px;
	text-shadow:
	5px 5px 2px black,
	4px 4px 2px black,
	3px 3px 2px black,
	2px 2px 2px black,
	1px 1px 2px black;
}

.menu h1.logo_h span.red{

}

.menu h1.logo_h span{
	animation: 3s logo infinite;
}

@keyframes logo {

  	33% {
    	color: blue;
  	}

  	66% {
    	color: red;
  	}
}



.menu p.city{
	position: absolute;
	font-size: 1.8rem;
	top: 65px;
	left: 20px;
	text-shadow:
	2px 2px 2px white,
	1px 1px 2px white;
}



a.call{
	position: absolute;
	z-index: 99;
	top: 100px;
	right: 400px;
	padding: 10px 20px;
	font-size: 40px;
	background: green;
	text-decoration: none;
	color: white;
	text-shadow: 3px 3px 3px black;
	box-shadow:
	inset 2px 2px 5px 2px black,
	5px 5px 10px 3px black;
	cursor: pointer;
	border-radius: 50%;
	border: 2px solid white;
	display: inline-block;
    animation: blura linear infinite;
    animation-duration: 3s;
}

a.call:hover{
	background: red;
}



.footer{
	position: fixed;
	width: 100%;
	z-index: 8;
	width: 100%;
	height: 150px;
	bottom: 0px;
	margin-top: -150px;
	background:
	url('../img/footer.png') no-repeat,
	url('../img/footer_left.png') repeat-x;
	background-position: left;
}

a.calll{
	position: fixed;
	z-index: 299;
	bottom: 13px;
	right: 50px;
	font-size: 40px;
	text-decoration: none;
	color: white;
	text-shadow:
	1px 1px 1px black,
	2px 2px 2px black,
	3px 3px 3px black;
    animation: blurt linear infinite;
    animation-duration: 1s;
}


.down{
	position: fixed;
	z-index: 99;
	bottom: 100px;
	right: 150px;
	cursor: pointer;
	display: none;
}








@media (max-width: 600px) {


	.header{
		position: fixed;
		z-index: 20;
		width: 100%;
		background:
		url('../img/fo_gro.png') repeat-x;
	    background-position: bottom;
	}



	.text {
	  z-index: 99;
	  width: 85%;
	  left: 10%;
	  margin-top: 25px;
	}



	p {
	  display: inline-block;
	  font-size: 1rem;
	}

	div.fon{
		position: fixed;
		z-index: 19;
		background: #239CEF;
		width: 100%;
		top: 0;
		left: 0;
	}



	img.hous{
		position: fixed;
		z-index: 99;
		margin-top: -113px;
		width: 200px;
	}

	img.agr{
		position: fixed;
		z-index: 99;
		margin-top: -98px;
		width: 70px;
	}

	img.kirk{
		margin-top: -60px;
		left: 10px;
		width: 40px;
	}



	div.trub_water{
		margin-top: 8px;
		right: 90px;
		left: 36px;
		height: 2px;
		background:
		url('../img/left.gif') repeat-x;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
	}


	.menu{
		height: 60px;
		border-radius: 0 0 10px 0;
	}

	.menu h1.logo_h{
		font-size: 2.5rem;
	}

	a.call{
		padding: 10px 15px;
		font-size: 25px;
		top: 75px;
		right: 180px;
	}

	.menu p.city{
		font-size: 1.2rem;
		top: 45px;
	}

	div.bur{
		left: 15px;
		top: 50px;
		margin-top: -60px;
		width: 4px;
		background-image: url('../img/trub.png');
		border-radius: 0 0 15px 15px;
		border-left: 1px solid black;
		border-right: 1px solid black;
	}

	img.bur_img{
		width: 4px;
		bottom: 0;
		margin-bottom: 0px;
	}

	.box_0{
		position: fixed;
		bottom: 0;
		width: 100%;
		background: url('../img/glin_min.png');
	}



	.vid_bur{
		margin: 30% 0 0 9%;
		border-radius: 5px;
	}




	.vid_mont{
		margin: 30% 0 0 5%;
		border-radius: 5px;
	}




	.footer{
		height: 75px;
		background:
		url('../img/footer_min.png') no-repeat,
		url('../img/footer_left_min.png') repeat-x;
		background-position: left;
	}

	a.calll{
		bottom: 8px;
		right: 20px;
		font-size: 1.2rem;
		text-shadow:
		1px 1px 1px black,
		2px 2px 2px black,
		3px 3px 3px black;
	}


}











@keyframes blura {

  	from {
  		background: green;
		text-shadow:
		3px 3px 3px black;
		box-shadow:
		inset 2px 2px 5px 2px black,
		5px 5px 10px 3px black;
      	color: white;
      	border-color: white;
  	}

  	50% {
    	background: white;
		text-shadow:
		3px 3px 3px black;
		box-shadow:
		inset 2px 2px 5px 2px black,
		5px 5px 10px 3px black;
      	color: green;
      	border-color: green;
  	}

  	to {
    	background: green;
		text-shadow:
		3px 3px 3px black;
		box-shadow:
		inset 2px 2px 5px 2px black,
		5px 5px 10px 3px black;
      	color: white;
      	border-color: white;
    }

}



@keyframes blurt {

  	from {
  		color: red;
  	}

  	50% {
    	color: white;
    }

  	to {
    	color: red;
    }

}