@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;}
} 

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

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

@media only screen and (max-aspect-ratio: 1/1){

.slider__item {	max-height: 104px;}
.slider__control {display: none!important;}
}
@media only screen and (min-aspect-ratio: 1/1){
.doc-root{width: 1000px; }
}


.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;
}


.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;}

.middle{    padding: 10px; background-color: rgb(241, 252, 255);}

hr{	border: none;	border-bottom: 1px dotted rgb(0, 183, 255);}
a{	text-decoration: none;	color: #1d6dbf;}


.header {
  height: 125px;
  padding: 10px;
  background-color: rgb(176, 240, 255);
  color: rgb(35, 99, 155) !important;
  background: url('data/top.png');
  background-position-x: 0%;
  background-position-y: 0%;
  background-position: top;
  display: flex;
  flex-wrap: wrap;
}

.logo-top-left {
  float: left;
  z-index: 10;
  flex: 1 0;
  position: relative;
  display: block;
  max-width: 250px;
}

.logo-top-left img {
  animation-duration: 1s;
  animation-name: sizeout;
  max-width: 100%;
  display: block;
}

.credentials {
  text-align: right;
  z-index: 10000 !important;
  display: block;
  position: relative;
  float: right;
  flex: 1 0;
  max-height: 114px;
}

.center{	text-align: center;}

.footer {
  border: none;
  border-top: 0px dotted rgb(169, 169, 169);
  padding: 20px;
  background-color: rgb(0, 160, 198);
}
.footer .pg {color: rgb(220, 248, 255); }

.pg{	margin: 0;	margin-bottom: 5px; rgb(176, 240, 255) !important}
.p3{	font-weight: bold;	font-size: 17px;}
.p4{	font-weight: bold;	font-size: 15px;}
.p5{	font-size: 15px;}
.p6b{	font-weight: bold;	font-size: 13px;}
.p6{	font-size: 13px;}
.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;}
#price{width: 100%;}
table {    border: 0px !important;}
td {    border: 0px !important; border-bottom: 1px solid rgb(142, 206, 221) !important; padding: 4px; font-size: 10px;}
td:nth-child(1), td:nth-child(3) {  text-align: center;}
tr {background-color: rgb(220, 248, 255); height: 16px;}

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

#u-form {
    display: flex;
    flex-wrap: wrap;
}
#u-form .block, #u-form .block2 {display: block; flex: auto;  flex-wrap: nowrap;}

#summary {
    width: 100%;
    background-color: 
	rgba(255,255,255,0);
	border: none;
	resize: none;
	overflow: hidden;
	min-height: 30px;
	height: 30px;
	max-height: 100px;
	outline: none;
	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: 10px 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(0, 183, 255);
	}

#submit {
		padding: 10px;
		border-radius: 10px;
		border: 0px;
		background-color: 	rgb(24, 211, 255);
	color:		rgb(10, 10, 10);
}
#submit:hover {
	background-color: rgb(0, 183, 255);
	color: white;
}
input {
    border: 0px;
    border-bottom: 1px solid rgb(0, 183, 255);
	background-color: rgb(176, 240, 255);
	text-align: center;
	border-radius: 6px;
	color: rgb(0, 183, 255);
	  outline: none;
}

textarea
{
    border: 0px;
    border: 1px solid rgb(0, 183, 255);
	background-color: rgb(176, 240, 255);
	border-radius: 6px;
}


#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);
}
.block-information p {
  border-bottom: 1px dotted rgb(0, 183, 255);
  padding-bottom: 8px;
  padding-top: 4px;
}
#submit:hover,input:hover,textarea:hover {    cursor: pointer;}
#summary, p, td, h1 {    cursor: default!important; color: rgb(0, 52, 72)}
h1{font-size: 0px;}
h2, h2 a {text-align: right; color: rgb(0, 160, 198) !important; font-weight: normal;}


@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;}