@font-face {
	font-family: "light";
	src: url("data/tilda-sans_light.ttf");
}

@keyframes fadeout{0% {opacity: 0} 100%{opacity: 1;}}
@keyframes sizeout {0% {transform: scale(0);opacity: 0;} 100% {transform: scale(1.0);opacity: 1;}}
@keyframes slidedown {0% {transform: translate(0px, -100px);opacity: 0;} 100% {transform: translate(0px, 0px);opacity: 1;}}
@keyframes slideleft {0% {transform: translate(150%, 0px);opacity: 0;} 100% {transform: translate(0px, 0px);opacity: 1;}}
@keyframes bounceIn {0% {transform: scale(0.9);} 60% {transform: scale(1.1);opacity: 1;} 100% {transform: scale(1);}}
@keyframes zoomOutSlider {0% {transform: scale(1.0);} 100% {transform: scale(1.2);}}
@keyframes sizePopping {0% {transform: scale(1.05);} 50% {transform: scale(1.3);} 100% {transform: scale(1.05);}}

@keyframes slideright {
    0% {transform: translate(-150%, 0px);opacity: 0;} 
    20% {transform: translate(0px, 0px);opacity: 0.5;}
    60% {opacity: 1;}
    90% {transform: translate(0px, 0px);opacity: 1;}
    99% {transform: translate(200%, 0px);opacity: 0;}}

@keyframes slider_ltr {
    0% {transform: translate(-150%, 0px);opacity: 0;} 
    25% {transform: translate(0px, 0px);opacity: 1;}
    75% {transform: translate(150px, 0px);opacity: 0;}
} 



.credentials > .p3 {	animation-duration: 1s;  animation-name: slideleft;}
.credentials > .p4 {	animation-duration: 1.5s;  animation-name: slideleft;}
.credentials > .p5 {	animation-duration: 2s;  animation-name: slideleft;}
h2 {animation-duration: 1.5s;  animation-name: slideleft;}
#blocktextbody, #imglist{	animation-duration: 2s;animation-name: fadeout;}
.logo-top-left img {	max-width: 250px;	animation-duration: 1s;    animation-name: sizeout;}

body
{
	margin: 0;
	padding: 0;
	background-color: rgb(0, 0, 0);
	color: #404040;
	font-family: "light";
}

.back-img {  position: fixed;  width: 100vw;  height: 100vh;  background-image: url("data/2.jpg");  z-index: -1;  background-size: 100%;  background-repeat: no-repeat; filter: blur(10px); background-position-y: 100%;}



hr{	border: none;	border-bottom: 1px dotted darkgray;}
a{	text-decoration: none;	color: #1d6dbf;}

@media only screen and (min-aspect-ratio: 1/1){
.doc-root{width: 1000px; }
}

.middle{    padding: 10px;}
.middle h2 b {    width: 100%;}

.doc-root
{
	margin: 0 auto;
	border-bottom: none;
	padding-left: 0px;
	background-color: #f8f8f8;
	-webkit-box-shadow: 0px 0px 27px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 27px 0px rgba(0,0,0,0.45);
	box-shadow: 0px 0px 27px 0px rgba(0,0,0,0.45);
	border-radius: 0px 0px 10px 10px;
}

.header{ height: 162px; background-color: rgb(255, 143, 0);     border-bottom: 1px solid rgba(0, 0, 0, 0.11);    padding: 10px;} 

.logo-top-left{	float: left;}
.credentials{	float: right;	text-align: right;}
.center{	text-align: center;}

.footer
{
	border: none;
	border-top: 0px dotted darkgray;
	margin-top: 30px;
	padding-top: 20px;
	color:     rgb(255, 143, 0);
}

.pg{	margin: 0;	margin-bottom: 5px;}
.p3{	font-weight: bold;	font-size: 27px;}
.p4{	font-weight: bold;	font-size: 25px;}
.p5{	font-size: 25px;}
.p6b{	font-weight: bold;	font-size: 23px;}
.p6{	font-size: 23px;}
.mb-2{	margin-bottom: 2px;}
.mt-2{	margin-top: 2px;}
.mb-5{	margin-bottom: 5px;}
.mt-5{	margin-top: 5px;}
.mt-15{	margin-top: 15px;}
.mb-15{	margin-bottom: 15px;}
.mt-30{	margin-top: 30px;}
.mb-30{	margin-bottom: 30px;}
.text-right{	text-align: right;}

table {    border: 0px !important;}
td {    border: 0px !important; border-bottom: 1px solid rgb(181, 181, 181) !important; padding: 4px;}
td:nth-child(1), td:nth-child(3) {  text-align: center;}
tr {background-color: rgb(232, 232, 232); height: 16px;}

#commentText {    display: block;    height: 139px; width: 660px;}

#u-form {
    display: flex;
    flex-wrap: wrap;
}
#u-form .block, #u-form .block2 {display: block; width: 260px;}

#summary {
    width: 100%;
    background-color: rgba(255,255,255,0);
    border: none;
    resize: none;
    overflow: hidden;
	min-height: 30px;
	height: 30px;
	overflow-y: auto !important;
}

#final-price {
    background-color: 
    rgba(255, 255, 255, 0) !important;
    border: 0px;
    text-align: right;
	
	float: right;
}

#space{padding: 8px;}
.price-block {
    height: 60px;
}

form {
	margin-top: 10px;
	border-radius: 0px 10px 10px 10px;
	box-shadow: 0px 2px 4px 0px rgba(208, 208, 208);
	padding: 0px 10px 2px 10px;
	background-color:    rgba(250, 250, 250, 0);
	border-top: 4px solid rgb(255, 143, 0);
	}

#submit {
		padding: 10px;
		border-radius: 10px;
		border: 0px;
		background-color: 	rgb(255, 143, 0);
	color:		rgb(10, 10, 10);
}
#submit:hover {
    background-color: 
    rgb(255, 227, 0);
}
input {
	border: 0px;
	border-bottom: 1px solid rgb(255, 143, 0);
	background-color: rgb(249, 249, 249);
	text-align: center;
	outline: none;
	border-radius: 4px;
	color: rgb(255, 143, 0);
}

textarea
{
    border: 0px;
    border: 1px solid rgb(255, 143, 0);
	background-color: rgb(249, 249, 249);
		  outline: none;
}

#imglist {    display: flex;    width: 100%;    background-color: rgb(255, 254, 255); border: 1px solid rgb(255, 143, 0); border-radius: 10px;}
#imglist > img {    flex: auto;    padding: 10px;     width: 120px;}

#blocktextbody {
    text-align: left;
    float: right;
    padding: 10px;
    
    margin-bottom: 14px;
    border-radius: 10px;background-color: rgb(255, 247, 185);
}

#submit:hover,input:hover,textarea:hover {    cursor: pointer;}
#summary, p, td, h1 {    cursor: default!important;}
h1{font-size: 0px;}
h2, h2 a {text-align: right; color: rgb(83, 83, 82);}


@keyframes anim-btn-call-outer {0% {width:60px;height:60px;box-shadow: 0px 0px 0px 1px rgba(0, 255, 0, 1);} 100% {width:100px;height:100px; box-shadow: 0px 0px 5px 0px rgba(0, 255, 0, 0.1);}}
@keyframes anim-btn-call-inner {0% {box-shadow: 0px 0px 0px 0px rgba(0, 255, 0, 0.8);} 50% {box-shadow: 0px 0px 0px 10px rgba(0, 255, 0, 0);} 100% {box-shadow: 0px 0px 0px 0px rgba(0, 255, 0, 0.8);}}
@keyframes anim-btn-call-glyph {0% {transform: rotateZ(-10deg);} 20% {transform: rotateZ(30deg);} 25% {transform: rotateZ(0deg);} 30% {transform: rotateZ(40deg);} 35% {transform: rotateZ(60deg);} 100% {transform: rotateZ(0deg);}}    

.btn-call-box{
  border: 0px solid black;width: 100px; height: 100px;
  display: flex;
  justify-content: center;
  align-items: center; 
  position: fixed;
  right: 0px;  bottom: 0px;
  z-index: 9999999999!important;
}
.btn-call-outer{
  width: 60px; height: 60px;
  border: 0px solid black; border-radius: 50%;
  box-shadow: 0px 0px 1px #000; 
  display: flex;  justify-content: center;  align-items: center;
  box-shadow: 0px 0px 1px 0px rgba(0, 255, 0, 1);
  animation: anim-btn-call-outer 2s infinite;
}
.btn-call-inner{
  width: 50px; height: 50px;
  margin: 0 auto;
  vertical-align: middle;
  border: 0px solid black;  border-radius: 50%;
  box-shadow: 0px 0px 1px 0px rgb(0, 255, 0);
  background-color: rgba(0, 255, 0, 1);
  animation: anim-btn-call-inner 2s infinite;
}
.btn-call-phone{
  width: 50px; height: 50px;  margin: 0 auto;
  border-radius: 50%;
}
.btn-call-phone img {display: block; width: 50px; height: 50px; animation: anim-btn-call-glyph 1s infinite;}


@media only screen and (max-aspect-ratio: 1/1)
{
	.doc-root{width: 100%; font-size: 30px;}
	#price tr, input  {  font-size: 30px!important;}
	.middle h2 {  display: flex;  width: 100%;}
	.slider__item {	max-height: 104px;}
	.slider__control {display: none!important;}
	
	.p3{	font-size: 30px;}
	.p4{	font-size: 30px;}
	.p5{	font-size: 30px;}
	.p6b{	font-size: 30px;}
	.p6{	font-size: 30px;}
	.header{ height: 200px; }
	.btn-call-box {scale: 200%;    margin: 50% 50px; scale: 200%; }
}