@charset "utf-8";
html,body { height:100%; margin:0; padding:0;}
body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:15px;}
body{background-image:url(/tmp/img/fon.webp); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size:cover;}
a { color:#333;text-decoration: none;}
a:link,a:visited,a:active {text-decoration: none;}
a:hover {color: #555; text-decoration:none; text-shadow: 0.5px 0px 0.5px #000; }/*transition:0.4s ease-in-out;*/
ul {  list-style: none;}
li{ margin: 10px 0}
ul li:before {  /*content:  "—";*/  position: relative;  left:     5px; }
header h2{font-size: 20px; position: absolute; margin: 20px 0 0 10%;}
header h2 i{font-size: 14px; }
header p{font-size: 16px; float: right;margin: 25px 10% 0 0;}
header .telegram{ display: inline-block; margin: -10px 0px -5px -13px;  background-image: url(/tmp/img/telegram_logo.svg);background-size: 25px;width:25px; height:25px;background-repeat:no-repeat; }
.nav { margin:0;height: 700px;}
.nav .wr {position: absolute; top:40%; margin:-75px 0 0 -75px; width: 150px; height: 150px; text-align: center;  perspective: 1000px; } 
.nav .cu { margin: auto; position: relative; height: 100px; width: 100px; transform-style: preserve-3d; }
.nav .cu > div {position:absolute;box-sizing:border-box;padding:10px;height:100%;width:100%;opacity:0.9;background-color:#000; border:solid 1px #eeeeee; color: #fff; } 
.nav .fr { transform: translateZ(50px); } 
.nav .ba { transform: translateZ(-50px) rotateY(180deg); } 
.nav .ri { transform: rotateY(-270deg) translateX(50px); transform-origin: top right;} 
.nav .le { transform: rotateY(270deg) translateX(-50px); transform-origin: center left;} 
.nav .to { transform: rotateX(-270deg) translateY(-50px); transform-origin: top center;} 
.nav .bo {  transform: rotateX(270deg) translateY(50px); transform-origin: bottom center;}

.nav .cu { animation: rotate 20s infinite linear; }	
@keyframes rotate {  from {  transform: rotateX(0deg) rotateY(0deg);} to { transform: rotateX(360deg) rotateY(360deg);}}	

.nav .text { animation: rotate2 20s infinite linear; transition: scale(2);}
@keyframes rotate2 { from {  transform: rotateY(0deg) rotateX(0deg);} to { transform: rotateY(-360deg) rotateX(-360deg);}}

.nav .cu > .text {opacity:0.7;background-color:transparent; border:none; } 
.nav .text div{ margin: 3px 10px; opacity:0.9;height:100%;background-color:#fff;border:solid 1px #000;color:#000;}	
.nav .wr:hover .fr{transform:translateZ(75px);} 
.nav .wr:hover .ba{transform:translateZ(-75px) rotateY(180deg);} 
.nav .wr:hover .ri{transform:rotateY(-270deg) translateZ(20px) translateX(50px);} 
.nav .wr:hover .le{transform:rotateY(270deg) translateZ(20px) translateX(-50px);} 
.nav .wr:hover .to{transform:rotateX(-270deg) translateZ(20px) translateY(-50px);} 
.nav .wr:hover .bo{transform:rotateX(270deg) translateZ(20px) translateY(50px);} 
.nav .cu > div { transition:transform 0.5s ease-in-out;transition-delay: .1s;}
.nav .wr h4{ margin: -40px 0 40px 0; font-size: 20px;background-color:rgba(255,255,255,.8);border-radius:10px;color: #333;white-space:nowrap;}
.nav .nav1 {transform:scale(0.7); left: 20%;}
.nav .nav2 {transform:scale(0.6); left: 40%;}
.nav .nav3 {transform:scale(0.8); left: 60%;}	
.nav .nav4 {transform:scale(1.1); left: 80%;}

@media (min-width:2500px){
	.nav .nav1{left: calc(50% + 750px);}.nav .nav2{left: calc(50% + 250px);}.nav .nav3{left: calc(50% - 250px);}.nav .nav4{left: calc(50% - 750px);}}
@media (max-width:700px){
	.nav{background-size: 1000px;height:500px;} 
	.nav .wr{top:200px;text-align: center;}
	.nav .nav1,.nav .nav2,.nav .nav3,.nav .nav4 {transform:scale(1); position: inherit; display: inline-block; margin: 10%;}
	header {width: 100%; text-align: center}
	header h2{margin: 20px auto 0 auto; position:inherit;}
	header p{margin: 10px auto;float:none; }	
	}
@media (max-width:530px){.nav .nav1,.nav .nav2,.nav .nav3,.nav .nav4 {transform:scale(0.8); margin: 5%;	}}
@media (max-width:400px){.nav .nav1,.nav .nav2,.nav .nav3,.nav .nav4 {transform:scale(0.6); margin: 2%;	}}
@media (max-width:350px){
		.nav .nav1,.nav .nav2,.nav .nav3,.nav .nav4 {transform:scale(.8); margin: 60px auto;display:block;}
		.nav{background-size: 1500px;height:700px;} 
		header h1{margin: 20px 0 0 10%;font-size: 16px;}	
	}
@media (max-width:150px){.nav .nav1,.nav .nav2,.nav .nav3,.nav .nav4 {transform:scale(0.6);	}}
article {margin: 0 10px}
article .win{background-color: rgba(0,0,0,.9); max-width: 1200px; min-height: calc(100% - 200px); color: #eee;font-size: 17px; text-align: justify; margin: 20px auto; display: block; padding: 20px;letter-spacing: 1.5px; }
article .win h2,article .win h3{text-align: center}
article .win h4{ font-size: 18px;text-align: center; margin: 30px auto 5px auto}
article .win .gallery{text-align: center}	
article .win .gallery div {display: inline-block;vertical-align:top;}
article h1{text-align: center; font-size: 30px;}
article h1,article h2{color: #fff;}
article a{color: #fff;}
article  .blog {margin: 20px; text-align: justify}
article  .blog a{ display: inline-block; margin:10px; width: 250px; }
article  .blog a img{width: 100%}
article .dlog_content img{ width: 250px; float: left; margin-right: 20px; margin-bottom: 20px;}
article .dlog_content {font-size: 17px; font-weight:100;}
article .dlog_content .h_{font-size: 20px; margin: 20px 0;}
footer .index_h2{position: inherit;}
@media screen and (max-width:500px){article  .blog a{width: 90%}
	article .dlog_content img{ float: inherit; width: 90%; margin: 20px auto;}
}

nav{ bottom:0%;text-align: center; width: 100%; }
nav a{ display: inline-block;font-size: 14px; background-color: rgba(255,255,255,.8);border-radius: 2px; padding: 5px 15px; margin: 5px 1%; box-shadow: 1px 1px 2px #000;}
nav .nav_i{font-weight: bold;}
.o_nas_rekomen{ text-align: center;}
.o_nas_rekomen div{width: 160px; height: 100px; padding: 10px; margin: 20px; text-align: center; display: inline-block;}
.o_nas_rekomen .viber{ float: right; margin: 0px 0px 0px 0px;  background-image: url(/css/viber.png);background-size: 20px;width:20px; height:20px;background-repeat:no-repeat; }

#div_i_1, #div_i_2{ display:none;  margin: -40px 20px 0px 20px;}

.div1{display: block; width: 100%;text-align:center; }
.div1 a:hover{color: #fff;}
.div1 div h3{height: 40px}
.div1 div img{width: 100%}
.div1 div{display: inline-block; vertical-align:top; width:calc(33% - 40px); height: 570px; border: 1px solid #777; border-radius: 5px; padding: 10px; margin:  5px; background-color: rgba(0,0,0,0.5) }
@media screen and (max-width:1200px){.div1 div{width:calc(50% - 40px);}}
@media screen and (max-width:750px){.div1 div{display: block;width:calc(100% - 40px);margin: 20px 5px;}}
.div1 div p{text-align:left; font-size: 16px}
.div2 div{display: block; width:calc(100% - 40px); border: 1px solid #777; border-radius: 5px; margin: 20px 5px; padding: 10px;background-color: rgba(0,0,0,0.5)}

/*--------------hone callback------------------*/
.hone_img {cursor: pointer;position:fixed;width: 60px;height: 60px;right: 30px;bottom: 30px;z-index: 4;border-radius: 100%;border: 2px solid transparent;opacity: .8;animation: hone_img-anim 1s infinite ease-in-out; transform-origin: 50% 50%;}
@keyframes hone_img-anim{
	0%{transform:rotate(0) scale(1) skew(1deg);background:#333 url(/tmp/img/hone_2.svg) no-repeat center center;background-size: 80%;}
	10%{transform:rotate(-25deg) scale(1) skew(1deg)}
	20%{transform:rotate(25deg) scale(1) skew(1deg)}
	30%{transform:rotate(-25deg) scale(1) skew(1deg);background:#000 url(/tmp/img/hone_2.svg) no-repeat center center;background-size: 80%;}
	40%{transform:rotate(25deg) scale(1) skew(1deg)}
	50%{transform:rotate(0) scale(1) skew(1deg)}
	100%{transform:rotate(0) scale(1) skew(1deg);background:#333 url(/tmp/img/hone_2.svg) no-repeat center center;background-size: 80%;}
}

.hone_ph {width: 100px;height: 100px;right: 11px;bottom: 11px;position:fixed;background-color: transparent;border-radius: 100%;box-shadow: 0 0 0 2px #333;border: 1px solid #fff;opacity: .1;
   /* animation: hone_ph-anim 1.2s infinite ease-in-out;*/
	animation:hone_ph-anim 1s ease-in-out 0s infinite alternate; 
    transition: all .5s;
    transform-origin: 50% 50%;
	z-index: 4;
}
@keyframes hone_ph-anim{
	0%{transform:rotate(0) kscale(.5) skew(1deg);opacity:.1}
	30%{transform:rotate(0) scale(.7) skew(1deg);opacity:.5}
	100%{transform:rotate(0) scale(1) skew(1deg);opacity:.1}
}
.hone_ph2 {width: 100px;height: 100px;right: 11px;bottom: 11px;position:fixed;background-color: transparent;border-radius: 100%;box-shadow: 0 0 0 2px #333;border: 1px solid #fff;opacity: .1;
    /*animation: hone_ph-anim2 1.2s infinite ease-in-out;*/
	animation:hone_ph-anim 1s ease-in-out .2s infinite alternate;
    transition: all .5s;
    transform-origin: 50% 50%;
	z-index: 4;
}
@keyframes hone_ph-anim2{
	0%{transform:rotate(0) kscale(.5) skew(1deg);opacity:.1}
	30%{transform:rotate(0) scale(.7) skew(1deg);opacity:.5}
	100%{transform:rotate(0) scale(1) skew(1deg);opacity:.1}
}