@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500,700,800&display=swap&subset=cyrillic-ext');
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,500,700&display=swap&subset=cyrillic-ext');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900&display=swap&subset=cyrillic-ext');
video::-webkit-media-controls {
  display:none !important;
}
.zim100{z-index:-100;}
h1, .h1 {font-family: 'Montserrat', sans-serif;text-transform:uppercase;font-weight:900;}
h2,h3,h4,h5,h6{font-family: 'Alegreya Sans SC', sans-serif;font-weight:700;}
h1, .h1 {font-size: 2.0rem;}
h2, .h2 {font-size: 2.3rem;}
h3, .h3 {font-size: 1.4rem;}
h4, .h4 {font-size: 1.25rem;}
h5, .h5 {font-size: 1.12rem;}
h6, .h6 {font-size: 1.0rem;}

.lead {
    font-size: 1.16rem;
}

.text-fiol{color:#a2a2d9!important;}
.text-gray{color:#4c4f53!important;}
.text-bordo{color:#c44a6f!important;}

.bg-mydark{background:url('imgs/bg-mydark.png') center top no-repeat;}
.bg01{background:url('imgs/yellow-angle.png') top right no-repeat, 
                 url('imgs/yellow-angle2.png') bottom left no-repeat,
				 url('imgs/top-left-angle.png') top left no-repeat, 
                 url('imgs/bottom-right-angle.png') bottom right no-repeat;
	  min-height:780px;
z-index:-10;	  
}
.bg02{background:url('imgs/white-angle.png') top right no-repeat, 
                 url('imgs/white-angle2.png') bottom left no-repeat,
				 url('imgs/top-left-angle.png') top left no-repeat, 
                 url('imgs/bottom-right-angle.png') bottom right no-repeat;
	  min-height:780px;
z-index:-10;	  
}

.angle-title{
  position:absolute;top:32px;right:103px;
  font-family: 'Oswald', sans-serif;font-size: 2rem;font-weight:400;line-height:2.1rem;
  color:#fff;text-transform:uppercase;
  -webkit-transform: rotate(14deg);
  -moz-transform: rotate(14deg);
  -ms-transform: rotate(14deg);
  -o-transform: rotate(14deg);
  transform: rotate(14deg);
  }

.angle-title2{
  position:absolute;top:30px;right:155px;
  font-family: 'Oswald', sans-serif;font-size: 2rem;font-weight:400;line-height:2.4rem;
  text-transform:uppercase;
  -webkit-transform: rotate(353deg);
  -moz-transform: rotate(353deg);
  -ms-transform: rotate(353deg);
  -o-transform: rotate(353deg);
  transform: rotate(353deg);
  }
  
header a{font-family: 'Alegreya Sans SC', sans-serif;font-size: 1.32rem;font-weight:700;}
header a:hover{text-decoration:none;}
header a.nav-link{font-weight:500;font-size: 1rem;color:#111!important;text-transform:uppercase;}
header a.nav-link:hover{color:#555!important;}
header img.toplogo{margin-top:0.24rem;margin-right:1px;}
header video {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18rem;
    height: auto;
	z-index:-999;
}

#main, #about, #service, #why, #footer{min-height:450px;}
#about, #service, #why, #footer{padding-top:2rem;}

.xmenu{cursor:pointer;}

.polygon{clip-path: polygon(1% 9%, 100% 19%, 98% 86%, 3% 92%);
 padding:50px;
}

.fa-stack{float:left;}
#main .fa-stack i {color:#c44a6f;}
#main .fa-stack i.number{font-style:normal;font-weight:700;color:#a2a2d9;}

.step-arrow{position:absolute;top:1rem;right:-0.5rem;}
.step-arrow-down{position:absolute;bottom:0;left:49%;}
.how-work i{position:absolute;top:1px;right:-8px;}
.how-work div{border-color:#c44a6f!important;}
.how-work a{color:#666;border-bottom:1px dotted #888;text-decoration:none;}
.how-work a:hover{color:#333;border-bottom:1px dotted #444;text-decoration:none;}

.inwork{
	
	position:absolute;
	right:-30px;
	bottom:60px;
}

#sitetype .card-body {
    padding: 0.7rem 1.05rem 0.4rem 1.05rem!important;
}
#sitetype .form-group {
    margin-bottom: 0.25rem;
}
#sitetype .calctitle{
	display:block;
	font-weight:500;
	color:#2e3951;
}

.corner-4-box {
    display:block;
    position: relative;
    width: 90%; 
    margin: 30px;
    padding: 30px;
    background-color: #fff;     
    background: 
    linear-gradient(45deg,  transparent 10px, #fff 10px), 
    linear-gradient(315deg, transparent 10px, #fff 10px),
    linear-gradient(225deg, transparent 10px, #fff 10px),
    linear-gradient(135deg, transparent 10px, #fff 10px);
    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);            
}
[class*='corner-4-']::before,
[class*='corner-4-']::after {
    content: '';
    position: absolute;
    height: 20px; 
    width: 80px;
    box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
}
.corner-4-box::before,
.corner-4-box::after {
    top: -10px;
}
.corner-4-textbox::before,
.corner-4-textbox::after {
    bottom: -10px;
}        
.corner-4-box::before,
.corner-4-textbox::before {
    left: -42px;
}
.corner-4-box::after,
.corner-4-textbox::after {
    right: -42px;
}
.corner-4-box::before {
    transform: rotate(-45deg);
}
.corner-4-box::after {
    transform: rotate(45deg);            
}
.corner-4-textbox::before {
    transform: rotate(-135deg);
}
.corner-4-textbox::after {
    transform: rotate(135deg);
}


@media (max-width: 991px) {

  h1 {margin-top:10px;}
   .bg01{background-image:none;}
   .bg02{background-image:none;}	
   .navbar-collapse {
	padding-top: 20px;
   }
   .lead {
    font-size: 1.0rem;
   }  
   .polygon{
	    clip-path: polygon(0 1%, 96% 2%, 98% 92%, 0 93%);
        padding:20px;
   }   
}

@media (max-width: 768px) {

   h1, .h1 {font-size: 1.4rem;}
   h2, .h2 {font-size: 1.4rem;}
   h3, .h3 {font-size: 1.2rem;}
   header video {
    width: 14rem;
   }
   .view {
    top: 20px!important;
    left: 30%!important; 
   }


}

.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 48px;
  height: 48px;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
 
.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 20px;
  left: 9px;
  right: 9px;
  height: 4px;
  background: white;
}
 
.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  content: "";
}
 
.c-hamburger span::before {
  top: -10px;
}
 
.c-hamburger span::after {
  bottom: -10px;
}

.c-hamburger--htx {
  background-color: #ff3264;
}
 
.c-hamburger--htx span {
  transition: background 0s 0.3s;
}
 
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}
 
.c-hamburger--htx span::before {
  transition-property: top, transform;
}
 
.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}
 
/* состояние active при открытом меню  */
.c-hamburger--htx.is-active {
  background-color: #cb0032;
}
 
.c-hamburger--htx.is-active span {
  background: none;
}
 
.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}
 
.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}
 
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}


.yamap{
	
	position:relative;
}

.yamap div span{
	
	display:inline-block;width:28px;text-align:center;
	font-size:1.1rem;
}
.yamap div a{font-size:1.0rem;color:#666;font-weight:700;}
.yamap div a:hover{text-decoration:none;}



.site-footer
{

  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#737373;
}
.site-footer hr
{
  border-top-color:#bbb;
  opacity:0.5
}
.site-footer hr.small
{
  margin:20px 0
}
.site-footer h6
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links
{
  padding-left:0;
  list-style:none
}
.footer-links li
{
  display:block
}
.footer-links a
{
  color:#737373
}
.footer-links a:active,.footer-links a:focus,.footer-links a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.footer-links.inline li
{
  display:inline-block
}
.site-footer .social-icons
{
  text-align:right
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:#33353d
}
.copyright-text
{
  margin:0
}
@media (max-width:991px)
{
  .site-footer [class^=col-]
  {
    margin-bottom:30px
  }
}
@media (max-width:767px)
{
  .site-footer
  {
    padding-bottom:0
  }
  .site-footer .copyright-text,.site-footer .social-icons
  {
    text-align:center
  }
}
.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none
}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons li.title
{
  margin-right:15px;
  text-transform:uppercase;
  color:#96a2b2;
  font-weight:700;
  font-size:13px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
  background-color:#29aafe
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}
.social-icons a.facebook:hover
{
  background-color:#3b5998
}
.social-icons a.twitter:hover
{
  background-color:#00aced
}
.social-icons a.linkedin:hover
{
  background-color:#007bb6
}
.social-icons a.dribbble:hover
{
  background-color:#ea4c89
}
@media (max-width:767px)
{
  .social-icons li.title
  {
    display:block;
    margin-right:0;
    font-weight:600
  }
}

/* animashka */

.view {
  position: absolute;
    top: 70px;
    left: 36%;
	z-index:-9;
  -webkit-perspective: 400;
          perspective: 400;
}

.plane {
  width: 120px;
  height: 120px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.plane.main {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: rotateX(60deg) rotateZ(-30deg);
          transform: rotateX(60deg) rotateZ(-30deg);
  -webkit-animation: rotate 20s infinite linear;
          animation: rotate 20s infinite linear;
}
.plane.main .circle {
  width: 120px;
  height: 120px;
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 60px #a2a2d9, inset 0 0 60px #a2a2d9;
}
.plane.main .circle::before, .plane.main .circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 10%;
  height: 10%;
  border-radius: 100%;
  background: #a2a2d9;
  box-sizing: border-box;
  box-shadow: 0 0 60px 2px #a2a2d9;
}
.plane.main .circle::before {
  -webkit-transform: translateZ(-90px);
          transform: translateZ(-90px);
}
.plane.main .circle::after {
  -webkit-transform: translateZ(90px);
          transform: translateZ(90px);
}
.plane.main .circle:nth-child(1) {
  -webkit-transform: rotateZ(72deg) rotateX(63.435deg);
          transform: rotateZ(72deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(2) {
  -webkit-transform: rotateZ(144deg) rotateX(63.435deg);
          transform: rotateZ(144deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(3) {
  -webkit-transform: rotateZ(216deg) rotateX(63.435deg);
          transform: rotateZ(216deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(4) {
  -webkit-transform: rotateZ(288deg) rotateX(63.435deg);
          transform: rotateZ(288deg) rotateX(63.435deg);
}
.plane.main .circle:nth-child(5) {
  -webkit-transform: rotateZ(360deg) rotateX(63.435deg);
          transform: rotateZ(360deg) rotateX(63.435deg);
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
            transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
            transform: rotateX(0) rotateY(0) rotateZ(0);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}