* {
			box-sizing: border-box;
			font-family: 'Open Sans', sans-serif;
		}

		body {
			margin: 0;
		}

		.map-wrapper {
			position: relative;
			overflow: hidden;
		}
		
		#personal-map-element {
			height: 100vh;
		}

		.overlay {
			position: absolute;
			height: 100vh;
			width: 100%;
			top: 0;
			left: 0;
			opacity: 1;
		    pointer-events: none;
		}

		@supports (mix-blend-mode: overlay) {
			.overlay {
				background-color: #6f8b87;
				mix-blend-mode: overlay;
			}
		}

		.clouds1 {
			position: absolute;
			  left: 0;
			  top: 0;
			  bottom: 0;
			  width: 100%;
			  background-image: url(../img/clouds1.png);
			  /*background-size: auto 100%;*/
			  pointer-events: none;
			  animation-name: clouds1;
			  animation-duration: 45s;
			  animation-iteration-count: infinite;
			  animation-timing-function: linear;
			  opacity: 0.25;
			  transition: all 1s;
			}

			.clouds1.hide {
			opacity: 0;
			}

			@keyframes clouds1 {
			  from {background-position-x: 1920px;}
			  to {background-position-x: 0;}
			}

			.clouds2 {
			position: absolute;
			  left: 0;
			  top: 0;
			  bottom: 0;
			  width: 100%;
			  background-image: url(../img/clouds2.png);
			  /*background-size: auto 100%;*/
			  pointer-events: none;
			  animation-name: clouds2;
			  animation-duration: 20s;
			  animation-iteration-count: infinite;
			  animation-timing-function: linear;
			  opacity: 0.25;
			  transition: all 1s;
			}

			.clouds2.hide {
			opacity: 0;
			}

			@keyframes clouds2 {
			  from {background-position-x: 1920px;}
			  to {background-position-x: 0;}
			}


		.static-noise {
			position: absolute;
			  left: 0;
			  top: 0;
			  bottom: 0;
			  width: 100%;
			  background-image: url(../img/static-noise.png);
			  opacity: 0.75;
			  background-repeat: repeat;
			  pointer-events: none;
			  -webkit-animation: grain 1s steps(2) infinite;
			  -moz-animation: grain 1s steps(2) infinite;
			  -ms-animation: grain 1s steps(2) infinite;
			  animation: grain 1s steps(2) infinite;
		}

		@keyframes grain {
		  0%, 100% {
		    background-position: 0% 0%;
		  }
		  10% {
		    background-position: 5% 10%;
		  }
		  20% {
		    background-position: 15% -5%;
		  }
		  30% {
		    background-position: -7% 25%;
		  }
		  40% {
		    background-position: 5% -25%;
		  }
		  50% {
		    background-position: 15% -10%;
		  }
		  60% {
		    background-position: -15% 0%;
		  }
		  70% {
		    background-position: 0% -15%;
		  }
		  80% {
		    background-position: -3% -35%;
		  }
		  90% {
		    background-position: 10% -10%;
		  }
		}

		.content-block-wrapper {
			width: 50%;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			background: -moz-linear-gradient(left,rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    		background: -webkit-linear-gradient(left,rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    		background: linear-gradient(to left,rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000',endColorstr='#000',GradientType=0);
    		pointer-events: none;
    		transition: 0.6s all;
		}

		.content-block-wrapper.active {
			background: -moz-linear-gradient(left,rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
    		background: -webkit-linear-gradient(left,rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
    		background: linear-gradient(to left,rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 100%);
    		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000',endColorstr='#000',GradientType=0);
		}

		.content-block-wrapper * {
    		pointer-events: initial;
		}

		.content-block {
			width: 66%;
			position: absolute;
			top: 50%;
			/*bottom*/: 48px;
			left: 0;
			max-height: calc(100vh - 96px);
			overflow: auto;
			transform: translateY(-50%);
			padding: 0 32px;
			color: #fff;
			font-family: sans-serif;
			pointer-events: initial;
		}

		.content-block::-webkit-scrollbar {
		    width: 4px;
		}

		.content-block::-webkit-scrollbar-track {
		    background-color: rgba(255,255,255,0.15);
		}

		.content-block::-webkit-scrollbar-thumb {
		    background-color: rgba(255,255,255,0.85);
		}

		.content-block .additional-info {
			visibility: hidden;
			transition: 0.6s all;
			max-height: 0;
			overflow: hidden;
			opacity: 0;
		}

		.content-block .additional-info.show {
			opacity: 1;
			visibility: visible;
		}

		@media only screen and (max-width: 1200px) {
		    .content-block {
				width: 75%;
			}
		}

		@media only screen and (max-width: 992px) {
		    .content-block {
				width: 100%;
			}
		}

		@media only screen and (max-width: 768px) {
		    .content-block-wrapper {
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
	    		background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
	    		background: linear-gradient(to top,rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
	    		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000',endColorstr='#000',GradientType=0);
			}

			.content-block-wrapper::before {
				width: 100%;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				content: '';
				display: block;
				background-color: rgba(0,0,0,0);
				transition: 0.6s all;
				pointer-events: none;
			}

			.content-block-wrapper.active {
				background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
	    		background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
	    		background: linear-gradient(to top,rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
	    		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000',endColorstr='#000',GradientType=0);
			}

			.content-block-wrapper.active::before {
				background-color: rgba(0,0,0,0.5);
			}

			.content-block {
				width: 100%;
				top: 52px;
				left: 0;
				max-height: calc(100vh - 68px);
				transform: translateY(0%);
				padding: 0px 16px 0 16px;
				pointer-events: initial;
			}
		}

		.social-links {
			position: absolute;
			top: 32px;
			left: 32px;
			opacity: 1;
			transition: 0.3s all;
		}

		.social-links.hide {
			top: -32px;
			opacity: 0;
		}

		.social-links .fa-facebook-official {
			color: #fff;
			opacity: 0.75;
			transition: 0.3s all;
		}

		.social-links .fa-facebook-official:hover {
			opacity: 1;
		}

		.fb_iframe_widget {
		    margin-left: 16px;
		    bottom: 2px;
		}

		@media only screen and (max-width: 768px) {
			.social-links {
				top: auto;
				bottom: 16px;
				left: auto;
				right: 16px;
			}

			.social-links.hide {
				top: auto;
				bottom: -32px;
				opacity: 0;
			}
		}


		@media only screen and (max-width: 640px) {
			.social-links {
				top: auto;
				bottom: 16px;
				left: 50%;
				right: auto;
				transform: translate(-50%, 0%);
			}

			.social-links .fa-facebook-official {
				font-size: 22px;
			}
		}

		.header {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
		}
	
		.logo-wrapper {
			position: absolute;
			top: 20px;
			left: 50%;
			transform: translateX(-50%);
		}

		.logo {
			height: 128px;
		}

		.menu-item {
			display: inline-block;
			vertical-align: middle;
			padding: 16px 32px;
			position: relative;
		}
		
		.menu-item a {
			text-decoration: none;
		}

		.menu-item i  {
			font-size: 0px;
		    opacity: 0.25;
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    color: #02213a;
		    transition: 0.5s all;
		}

		.menu-item span {
			position: relative;
			font-size: 16px;
			opacity: 1;
			transition: 0.5s all;
			transform: scale(1);
			text-decoration: none;
			color: #02213a;
			font-weight: bold;
		}

		.menu-item:hover i {
			font-size: 64px;
		    opacity: 1;
		}

		.menu-item:hover span {
			transform: scale(0.5);
			opacity: 0;
		}

		.info-wrapper {
			position: absolute;
			right: 32px;
			top: 32px;
		}

		.info-wrapper i {
			font-size: 32px;
			transition: 0.5s all;
			color: #02213a;
		}

		.info-wrapper i:hover {
			color: #fff;
		}

		.back-wrapper {
			position: absolute;
			left: 32px;
			top: 32px;
		}

		.back-wrapper i {
			font-size: 32px;
			transition: 0.5s all
		}

		.back-wrapper i:hover {
			color: #fff;
		}



		@media screen and (max-width: 1200px) {
			
			.logo {
				height: 112px;
			}
		}

		@media screen and (max-width: 992px) {
			
			.logo {
				height: 88px;
			}

			.menu-item {
				padding: 16px 24px;
			}

			.menu-item:hover i {
				font-size: 48px;
			}
		}

		@media screen and (max-width: 768px) {
			
			.logo {
				height: 64px;
			}

			.logo-wrapper {
			    padding-top: 96px;
			}

			.menu-item-logo {
				position: absolute;
				top: 0px;
				left: 50%;
				transform: translateX(-50%);
			}

			.menu-item {
				padding: 12px 14px;
			}

			.menu-item:first-child {
				padding-left: 0;
			}

			.menu-item:last-child {
				padding-right: 0;
			}

			.menu-item:hover i {
				font-size: 32px;
			}

			.menu-item span {
				font-size: 14px;
			}
		}


		.live-text {
			font-size: 16px;
			font-family: 'Montserrat', sans-serif;
			font-weight: 400;
			background: #F44336;
			padding: 2px 16px;
			position: absolute;
			top: 32px;
			right: 32px;
/*			transform: translateX(-50%);*/
			color: #fff;
			animation-name: liveblink;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}

		@keyframes liveblink {
			  0%, 100% {
			    background: #F44336;
			  }
			  25% {
			    background: transparent;
			  }
			  75% {
			    background: #F44336;
			  }
		}

		@media only screen and (max-width: 768px) {
		    .live-text {
				display: none;
			}
		}



		.content-block h2 {
			font-size: 44px;
			font-family: 'Montserrat', sans-serif;
			font-weight: 900;
			text-transform: uppercase;
			line-height: 1;
			margin-top: 0px;
		}

		.content-block h2 > span {
			font-size: 22px;
			font-family: 'Montserrat', sans-serif;
			font-weight: 400;
			text-transform: none;
		}

		@media only screen and (max-width: 768px) {
			.content-block h2 {
				margin-top: -8px;
				text-align: center;
				font-size: 24px;
				margin-bottom: 16px;
			}

			.content-block h2 > span {
				font-size: 12px;
			}
		}

		.content-block p {
			font-size: 16px;
			line-height: 1.5;
			font-family: 'Montserrat', sans-serif;
			font-weight: 300;
		}

		@media only screen and (max-width: 768px) {
		    .content-block p {
				font-size: 14px;
				line-height: 1.3;
				margin: 8px 0;
			}
		}

		.post {
			width: auto;
			max-width: 480px;
			position: absolute;
			top: 0;
			left: 0;
			transform: translate(-50%, -50%) scale(0.5);
			transition: 0.3s all ease-out;
			opacity: 0;
			box-shadow: 8px 16px 32px rgba(0,0,0,0.25);
			visibility: hidden;
			padding: 12px;
    		background-color: #fff;
		}

		.post.duoble-gif {
			max-width: 580px;
		}

		@media only screen and (max-width: 768px) {
			.post {
				width: calc(100% - 32px);
				max-width: 768px;
			}
		}

		.post.active {
			transform: translate(-50%, -50%) scale(1);
			opacity: 1;
			visibility: visible;
		}

		.post .post-image-wrapper {
			position: relative;
			font-size: 0px;
		}

		.post .post-img {
			width: auto;
			height: auto;
			max-width: 456px;
			max-height: 456px
		}

		.post.duoble-gif .post-img {
			max-width: 50%;
		}

		.post .close-x {
			position: absolute;
			top: 20px;
			right: 20px;
			color: #fff;
    		cursor: pointer;
    		text-shadow: 1px 2px 4px rgba(0,0,0,0.75);
		}

		.post p.title {
			position: absolute;
			bottom: 16px;
			right: 16px;
			margin: 0;
			color: #fff;
			text-shadow: 1px 2px 4px rgba(0,0,0,0.75);
    		font-size: 24px;
    		font-weight: 900;
    		text-align: right;
    		line-height: 1;
		}

		.post p.title span.day {
			text-shadow: 1px 2px 4px rgba(0,0,0,0.75);
    		font-size: 16px;
    		font-weight: 300;
		}

		.post p.title span.date {
			text-shadow: 1px 2px 4px rgba(0,0,0,0.75);
    		font-size: 12px;
    		font-weight: 300;
		}

		.post p.message {
			margin: 12px 0 0 0;
			color: #000;
    		font-size: 16px;
    		font-weight: 300;
    		text-align: left;
    		line-height: 1.5;
		}

		.post.no-photo .close-x {
			position: absolute;
			top: 16px;
			right: 16px;
			color: #404040;
    		cursor: pointer;
    		text-shadow: none;
		}

		.post.no-photo p.title {
			position: relative;
			bottom: auto;
			right: auto;
			margin: 0;
			color: #000;
			text-shadow: 1px 2px 4px rgba(0,0,0,0.75);
    		font-size: 24px;
    		font-weight: 900;
    		text-align: left;
    		line-height: 1;
		}

		.post.no-photo p.title span.day {
			text-shadow: none;
    		font-size: 18px;
    		font-weight: 400;
		}

		.post.no-photo p.title span.date {
			text-shadow: none;
    		font-size: 14px;
    		font-weight: 400;
		}

		.post.no-photo p.message {
			margin: 16px 0 0 0;
			color: #000;
    		font-size: 16px;
    		font-weight: 300;
    		text-align: left;
    		line-height: 1.5;
		}

		.margin-t-0 {
			margin-top: 0px;
		}

		.margin-t-16 {
			margin-top: 16px;
		}

		.margin-t-32 {
			margin-top: 32px;
		}

		.margin-b-0 {
			margin-bottom: 0px;
		}

		.margin-b-8 {
			margin-bottom: 8px;
		}

		.margin-b-32 {
			margin-bottom: 32px;
		}

		@media only screen and (max-width: 768px) {
			.margin-t-16 {
				margin-top: 8px;
			}

			.margin-b-8 {
				margin-bottom: 4px;
			}
		}

		.btn {
			outline: none;
			border: 2px solid #fff;
			background: transparent;
			padding: 8px 32px;
			color: #fff;
			line-height: 1;
			transition: 0.3s all;
			cursor: pointer;
			font-size: 16px;
		}

		.btn:hover {
			background: #fff;
			color: #000;
		}

		.btn-small {
			border: 2px solid #fff;
			padding: 4px 16px;
		}

		@media only screen and (max-width: 768px) {
			.btn {
				font-size: 14px;
    			padding: 6px 24px;
			}

			.btn-small {
				font-size: 12px;
				border: 2px solid #fff;
				padding: 4px 8px;
			}
		}

		@media only screen and (max-width: 768px) {
			.main-btns-wrapper {
				text-align: center;
			}
		}

		.subscribe-wrapper {
			position: absolute;
			bottom: 32px;
			left: 32px;
			color: #fff;
			opacity: 0.75;
			transition: 0.3s all;
		}

		.subscribe-wrapper:hover {
			opacity: 1;
		}

		.subscribe-wrapper.hide {
			bottom: -54px;
			opacity: 0;
		}

		.subscribe-wrapper p {
			font-size: 14px;
			line-height: 1.5;
			font-family: 'Montserrat', sans-serif;
			font-weight: 300;
		}

		.subscribe-wrapper .fields-wrapper {
			transform: translate(0%, 0%);
			transition: 0.3s all;
		}

		.subscribe-wrapper .fields-wrapper.hide {
			transform: translate(0%, 100%);
			opacity: 0;
		}

		.subscribe-wrapper .subscribe-field {
			height: 26px;
			outline: none;
			border: none;
			width: 250px;
			padding-left: 8px;
			padding-right: 8px;
			transition: 0.3s all;
			border: 2px solid transparent;
		}

		.subscribe-wrapper .subscribe-field.correct {
			border: 2px solid #4CAF50;
		}

		.subscribe-wrapper .subscribe-field.wrong {
			border: 2px solid #F44336;
		}

		.subscribe-wrapper .btn {
			font-size: 14px;
		}

		@media only screen and (max-width: 768px) {
			.subscribe-wrapper .subscribe-field {
				height: 24px;
			}

			.subscribe-wrapper .btn {
				font-size: 12px;
			}
		}

		.subscribe-wrapper .form-message {
			position: absolute;
			bottom: 0px;
			left: 0;
			transform: translate(-100%, 0%);
			transition: 0.3s all;
			opacity: 0;
			line-height: 25px;
		}

		.subscribe-wrapper .form-message.show {
			transform: translate(0%, 0%);
			opacity: 1;
		}

		@media only screen and (max-width: 992px) {
		    .subscribe-wrapper .subscribe-field {
				width: 200px;
			}
		}

		@media only screen and (max-width: 768px) {
			.subscribe-wrapper {
				position: absolute;
				bottom: 16px;
				left: 16px;
				padding-right: 0;
			}

			.subscribe-wrapper p {
				font-size: 12px;
				line-height: 1.3;
			}

			.subscribe-wrapper .subscribe-field {
				width: 150px;
			}
		}

		@media only screen and (max-width: 640px) {
			.subscribe-wrapper {
			    bottom: 52px;
			    left: 16px;
			    right: 16px;
			    text-align: center;
			}
		}

		.map-zoom-wrapper {
			position: absolute;
			bottom: 32px;
			right: 32px;
		}

		@media only screen and (max-width: 768px) {
			.map-zoom-wrapper {
				display: none;
			}
		}

		.map-zoom-wrapper .zoom-in, .map-zoom-wrapper .zoom-out {
			color: #fff;
			background-color: transparent;
			border: 2px solid #fff;
			padding: 4px;
			width: 32px;
			height: 32px;
			text-align: center;
			margin-top: 8px;
			cursor: pointer;
			transition: 0.3s all;
		}

		.map-zoom-wrapper .zoom-in:hover, .map-zoom-wrapper .zoom-out:hover {
			color: #000;
			background-color: #fff;
		}

		.map-zoom-wrapper .zoom-in i, .map-zoom-wrapper .zoom-out i {
			line-height: 20px;
		}

		/*.city-moscow {
			font-size: 48px;
			transform: translate(-50%, 0%);
			font-weight: 300;
			color: rgba(255,255,255,1);
		}*/


		/*#markersLayer img[src='dot_marker.png'] {
		    transform: scale(2);
		}*/


		.small-marker {
			transform: scale(0.25);
		}

		.medium-marker {
			transform: scale(0.5);
		}

		.big-marker {
			transform: scale(0.75);
		}

		.large-marker {
			transform: scale(1);
		}

		.current-location-marker {
			overflow: visible!important;
		}

		.current-location-marker::after {
			content: '';
			position: absolute;
			display: inline-block;
			top: 0;
			bottom: 0;
			width: 100%;
			border-radius: 50%;
			/*border: 8px solid #fff;*/
			animation-name: currentLocation;
			animation-duration: 2s;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}

		@-webkit-keyframes currentLocation {
		  0% {
		    -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0.75);
		  }
		  70% {
		      -webkit-box-shadow: 0 0 0 24px rgba(255,255,255, 0);
		  }
		  100% {
		      -webkit-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
		  }
		}
		@keyframes currentLocation {
		  0% {
		    -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0.75);
		    box-shadow: 0 0 0 0 rgba(255,255,255, 0.75);
		  }
		  70% {
		      -moz-box-shadow: 0 0 0 24px rgba(255,255,255, 0);
		      box-shadow: 0 0 0 24px rgba(255,255,255, 0);
		  }
		  100% {
		      -moz-box-shadow: 0 0 0 0 rgba(255,255,255, 0);
		      box-shadow: 0 0 0 0 rgba(255,255,255, 0);
		  }
		}


		#markersLayer img {
			border-radius: 50%;
			box-shadow: 0px 0px 8px rgba(0,0,0,0.75);
		}