html {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
body {
	color: #fff;
	font-family: HelveticaNeueCyr;
	font-size: 16px;
	font-weight: 100;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #84b7e4; /* Old browsers */
	background: -moz-linear-gradient(15deg, #84b7e4 0%, #2989d8 30%, #1e3f88 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(15deg, #84b7e4 0%,#2989d8 30%,#1e3f88 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(15deg, #84b7e4 0%,#2989d8 30%,#1e3f88 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84b7e4', endColorstr='#1e3f88',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
a, a:visited {
	outline: none;
	color: #dedde2;
	font-weight: 500;
	text-decoration: none;
  -webkit-transition: all .9s ease-in-out;
          transition:         all .6s ease-in-out;
}
h2 {
	font-weight: 100;
}
a:hover, a:active {
	color: #dedde2;
	text-decoration: none;
}
::selection {
	background-color: rgba(104, 79, 158, 0.6);
}
::-moz-selection {
	background-color: rgba(104, 79, 158, 0.6);
}
div.logo-menu {
	position: relative;
	min-width: 150px;
	min-height: 150px;
	margin: calc(50vh - 75px) 85px;
	width: 11%;
}
div.logo-menu:before {
	content: "";
	opacity: 0.4;
	position: absolute;
	top: 85%;
	left: 70%;
	display: block;
	background: url(../img/hint.png) 0 0 no-repeat transparent;
	background-size: contain;
	width: 200px;
	height: 43px;
}
div.logo-menu.menu-open:before,
div.logo-menu:hover:before {
	display: none;
}

div.logo-menu > .animate {
	animation: pulse 2s infinite;
	position: absolute;
	display: block;
	height: 100%;
	width: 100%;
}
div.logo-menu .img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

  -webkit-transition: all .8s ease-in-out;
          transition:         all .8s ease-in-out;

  background-size: contain !important;
  background: url('../img/layer1.png') 0 0 no-repeat transparent;
}
div.logo-menu .img#layer2 {
  -webkit-transition: all .9s ease-in-out;
          transition:         all .9s ease-in-out;
  background: url('../img/layer2.png') 0 0 no-repeat transparent;
}
div.logo-menu .img#layer3 {
  -webkit-transition: all .6s ease-in-out;
          transition:         all .6s ease-in-out;
  background: url('../img/layer3.png') 0 0 no-repeat transparent;
}
div.logo-menu .img#layer4 {
  -webkit-transition: all .6s ease-in-out;
          transition:         all .6s ease-in-out;
  background: url('../img/layer4.png') 0 0 no-repeat transparent;
}
div.logo-menu:hover .animate {
	animation: none;
}
div.logo-menu:hover #layer1,
div.logo-menu:hover #layer3 {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
div.logo-menu:hover #layer1 {
	top: -100%;
}
div.logo-menu:hover #layer2 {
}
div.logo-menu:hover #layer3 {
	top: 100%;
}
div.logo-menu:hover #layer2 {
  -webkit-transform: rotate(-360deg);
          transform: rotate(-360deg);
}
div.logo-menu:hover #layer4 {
	top: -180%;
}
div.logo-menu .img > a {
	display: none;
	font-size: 12px;
	text-decoration: none;
	color: #fff;
	width: 100%;
	line-height: 150px;
  text-align: center;
  -webkit-transition: all 1.5s ease-in-out;
          transition:         all 1.5s ease-in-out;
}
div.logo-menu .img > a > span {
	font-weight: 300;
	font-size: 13px;
	font-family: HelveticaNeueCyr;
	padding-left:4px;
}
a[data-panel="tools"]:before,
a[data-panel="tools"] span {
	position: relative;
	top: -7px;
}
div.logo-menu .img#layer3 > a {
	margin-left: -10px;
}
div.logo-menu:hover .img > a {
	display: block;
}
@keyframes appear {
	0% {
		opacity: 0;
		width: 0;
	}
	100% {
		opacity: 1;
		width: auto;
	}
}
.info-panel {
	position: absolute;
	right: 0;
	top: 0;
	width: 60%;
	height: 100%;
}
.info-panel .slide-out {
	position: absolute;
	right: 0;
	top: 0;
	width: 0;
	height: 100%;
	opacity: 0;
  -webkit-transition: all 1.2s ease-in-out;
          transition:         all 1.2s ease-in-out;
  padding: 60px 50px;
}
.info-panel .slide-out > * {
	*display: none;
	width: calc(50vw - 100px);
}
.info-panel .slide-out.active {
	width: 100%;
	z-index: 100;
	opacity: 1;
	border-left: 1px solid rgba(5, 27, 45, 0.2);
	-webkit-box-shadow: -4px 0px 13px 0px rgba(17,83,138,1);
	-moz-box-shadow: -4px 0px 13px 0px rgba(17,83,138,1);
	box-shadow: -4px 0px 13px 0px rgba(17,83,138,1);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.slide-out > .close {
	position: absolute;
  right: 16px;
  top: 16px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
  -webkit-transition: all .8s ease-in-out;
          transition:         all .8s ease-in-out;
	cursor: pointer;
}
.slide-out > .close:hover {
  opacity: 1;
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
.slide-out > .close:before, .slide-out > .close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #84b7e4;
}
.slide-out > .close:before {
  transform: rotate(45deg);
}
.slide-out > .close:after {
  transform: rotate(-45deg);
}

.slide-out > h2 {
	margin-bottom: 60px;
	font-family: Klementina;
	font-weight: 100;
}
.social-block > span {
	font-size: 22px;
	font-weight: 300;
	display: inline-block;
	border-bottom: 1px solid transparent;
}
.social-block:hover > span {
	border-bottom-color: #904c9e;
}
a.social {
	display: inline-block;
	margin-right: 10px;
}
a.social.facebook {
	margin-right: 16px;
}
a.social:before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	background-image: url('../img/social-sprite.png');
	background-repeat: no-repeat;
}
a.facebook:before {
	background-position: 0 0;
	width: 20px;
	margin-left: 6px;
}
.social-block:hover a.facebook:before,
a.facebook:hover:before {
	background-position: 0 -38px;
}
a.telegram:before {
	background-position: -199px 0;
}
.social-block:hover a.telegram:before,
a.telegram:hover:before {
	background-position: -199px -38px;
}
a.messenger:before {
	background-position: -31px 0;
}
.social-block:hover a.messenger:before,
a.messenger:hover:before {
	background-position: -31px -38px;
}
a.email:before {
	background-position: -117px -6px;
	height: 20px;
}
.social-block:hover a.email:before,
a.email:hover:before {
	background-position: -117px -44px;
	height: 20px;
}
a.skype:before {
	background-position: -74px 0;
}
.social-block:hover a.skype:before,
a.skype:hover:before {
	background-position: -74px -38px;
}
a.phone:before {
	background-position: -160px 0;
}
.social-block:hover a.phone:before,
a.phone:hover:before {
	background-position: -160px -38px;
}

#tools p {
	padding-left: 40px;
	position: relative;
}
#tools p:before {
	content: "";
	width: 30px;
	height: 30px;
	display: inline-block;
	position: absolute;
	left: 0;
	top: 0;
	background: url('../img/gear-white.png') 0 0 no-repeat transparent;
	background-size: cover;
  -webkit-transition: all 1.2s ease-in-out;
          transition:         all 1.2s ease-in-out;
}
#tools p:hover:before {
	background-image: url('../img/gear.png');
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
#tools p:nth-of-type(1):before,
#tools p:last-child:before {
	display: none;
}

p.social-block {
	display: flex;
	align-items: center;
}
.tooltip {
	font-family: HelveticaNeueCyr;
	font-weight: 100;
}
.tooltip-inner {
	background-color: rgba(144, 76, 158, 0.6);
	padding: 3px 5px;
	text-align: left;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    border-right-color: rgba(144, 76, 158, 0.6);
    border-left-color: rgba(144, 76, 158, 0.6);
}
.tooltip.bs-tether-element-attached-left .tooltip-inner::before {
	border-right-color: #5e5299;
}
.social-block span {
	font-size: 18px;
}

footer {
	position: fixed;
	top: calc(100vh - 60px);
	display: block;
	width: 26%;
	height: 40px;
	text-align: center;
	margin-left: -15px;
}
footer > p {
	margin: 0;
}
@keyframes pulse {
  0% {
  	transform: scale(1);
  }
  50% {
      transform: scale(.9);
  }
  100% {
      transform: scale(1);
  }
}

@media only screen and (min-width: 1921px) {
	body {
		font-size: 32px;
	}
	h2 {
		font-size: 56px;
	}
	div.logo-menu {
		width: 250px;
		height: 250px;
		margin: 400px;
		margin-top: calc(50vh - 125px);
		margin-left: calc(20% - 125px);
	}
	div.logo-menu .img > a {
		line-height: 250px;
    font-size: 24px;
	}
	div.logo-menu .img > a > span {
    font-size: 28px;
    padding-left: 6px;
	}
	.info-panel .slide-out {
    padding: 60px 120px;
	}
	.info-panel .slide-out > *:not(.close) {
		width: calc(50vw - 240px);
	}
}
@media only screen and (min-width: 1441px) and (max-width: 1920px) {
	body {
		font-size: 20px;
	}
	h2 {
		font-size: 56px;
	}
	div.logo-menu {
		width: 170px;
		height: 170px;
		margin: 300px 0 300px 150px;
	}
	div.logo-menu .img > a {
		line-height: 170px;
    font-size: 22px;
	}
	div.logo-menu .img > a > span {
    font-size: 16px;
    padding-left: 6px;
	}
	footer {
		width: 520px;
	}
	.info-panel .slide-out {
    padding: 60px 80px;
	}
	.info-panel .slide-out > *:not(.close) {
		width: calc(50vw - 160px);
	}
}
@media only screen and (min-width: 1024px) and (max-width: 1440px) {
	div.logo-menu {
	}
	div.logo-menu:before {
		width: 120px;
		height: 32px;
	}
	div.logo-menu .img > a.fas:before {
		*content: "";
	}
	div.logo-menu .img > a {
		line-height: 190px;
    font-size: 18px;
	}
	div.logo-menu .img > a > span {
    font-size: 16px;
    padding-left: 6px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    /* tablets and desktop */
	div.logo-menu .img > a > span{
		display: none;
	}
	div.logo-menu .img > a {
    font-size: 22px;
    line-height: 120px;
	}
	.container-fluid {
		padding: 0;
	}
	div.logo-menu {
		min-width: 120px;
		min-height: 120px;
		width: 120px;
		height: 120px;
		margin: 20px 20px;
		z-index: 20;
	}
	div.logo-menu:hover #layer1 {
		top: 0;
		left: 100%;
	}
	div.logo-menu:hover #layer2 {
		top: 0;
		left: 200%;
	}
	div.logo-menu:hover #layer3 {
		top: 0;
		left: 300%;
	}
	div.logo-menu:hover #layer4 {
		top: 0;
		left: 0;
	}
	div.logo-menu:before {
    top: 65%;
    left: 95%;
	}
	.info-panel {
		width: 100%;
		top: 170px;
		height: calc(100% - 290px);
	}
	.info-panel .slide-out > * {
    width: 100%;
	}
	.info-panel .slide-out {
		width: 100%;
		height: 0;
		opacity: 1;
		overflow: hidden;
		margin-top: 100%;
  -webkit-transition: all .8s ease-in-out;
          transition:         all .8s ease-in-out;
	}
	.info-panel .slide-out.active {
		height: 100%;
		margin-top: 0;
		border-top: 1px solid rgba(5, 27, 45, 0.2);
	}
	footer {
		width: 100%;
		text-align: center;
		bottom: 40px;
	}
}

@media only screen and (max-width: 767px) {
    /* phones */
	div.logo-menu {
		min-width: 80px;
		min-height: 80px;
		width: 80px;
		height: 80px;
		margin: 20px 10px;
		z-index: 20;
	}
	.info-panel {
		z-index: 10;
		width: 100vw;
		overflow: hidden;
		top: 150px;
		height: 100%;
		-webkit-transition: all .8s ease-in-out;
		transition:         all .8s ease-in-out;
	}
	.info-panel.panel-active {
		z-index: 25;
	}
	div.logo-menu .img > a {
    line-height: 80px;
    font-size: 12px;
	}
	.info-panel .slide-out > *:not(.close) {
    width: 100%;
	}
	.info-panel .slide-out {
		width: 100%;
		height: 0;
		opacity: 1;
		overflow-y: auto;
		margin-top: 100vh;
		-webkit-transition: all .8s ease-in-out;
		transition:         all .8s ease-in-out;
		padding: 0 50px;
		background: #84b7e4; /* Old browsers */
		background: -moz-linear-gradient(15deg, #84b7e4 0%, #2989d8 30%, #1e3f88 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(15deg, #84b7e4 0%,#2989d8 30%,#1e3f88 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(15deg, #84b7e4 0%,#2989d8 30%,#1e3f88 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#84b7e4', endColorstr='#1e3f88',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}
	.slide-out > .close {
		right: 16px;
	}
	.info-panel .slide-out.active {
		padding: 30px 20px 80px;
		z-index: 25;
		height: 100%;
		margin-top: 0px;
		max-width: 100%;
		left: 0;
		justify-content: space-between;
	}
	.info-panel .slide-out > p:last-child {
		margin-bottom: 100px;
	}
	div.logo-menu:hover #layer1 {
		top: 0;
		left: 100%;
	}
	div.logo-menu:hover #layer2 {
		top: 0;
		left: 200%;
	}
	div.logo-menu:hover #layer3 {
		top: 0;
		left: 300%;
	}
	div.logo-menu:hover #layer4 {
		top: 0;
		left: 0;
	}
	div.logo-menu .img > a > span {
		display: none;
	}

	footer {
		width: 100%;
		text-align: center;
		top: auto;
		bottom: 0;
    background-color: #1e418a;
    z-index: 100;
    margin: 0 -15px;
    padding-top: 8px;
		-webkit-box-shadow: -4px 0px 13px 0px rgba(17,83,138,1);
		-moz-box-shadow: -4px 0px 13px 0px rgba(17,83,138,1);
		box-shadow: -4px 0px 13px 0px rgba(17,83,138,1);
	}
	.slide-out > h2 {
    margin-bottom: 30px;
	}
	div.logo-menu .img#layer3 > a {
		margin-left: -5px;
	}
	div.logo-menu:before {
    width: 150px;
    height: 33px;
	}
	a[data-panel="tools"]:before,
	a[data-panel="tools"] span {
		top: 0px;
	}
}