@charset "UTF-8";
/*
GORODSNOV.COM Corporation (c) All Rights Reserved
Web development by Mihail M. Shitikov
-----------------------------------------------------------------------------*/

/* START of CSS Reset
-----------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section, summary {display: block;}
/* Another rules */
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
/* ----------------------------------------------------------------------------
END of CSS Reset */

html {height: 100%;} /*-webkit-overflow-scrolling - для плавной авто прокрутки для Safari*/
body {font: 12px/18px Gorodsnov, sans-serif;/*width: 100%;*/height: 100%; background: none;}
/* сбрасываем стандартное «bold», 
шрифт становится таким же как его родительский элемент */
strong, b {
font-weight: inherit; 
}

a {text-decoration: none;}
a:active, a:focus {outline: none;}
a:hover {text-decoration: underline;}

/* FRAME
-----------------------------------------------------------------------------*/

/* Blocks
-----------------------------------------------------------------------------*/
.container {padding-right: 0px;padding-left: 0px;margin-right: auto;margin-left: auto;}
.container-fluid {width: 100%; padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}
.mobile_container {margin-left:20px;margin-right:20px;}
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/* Margins
-----------------------------------------------------------------------------*/
.align-items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

#footer-gs-logo {height: 50px;width:300px;margin: 18px auto 0 -150px; left: 50%; position: absolute;}
#footer-gs-logo-white {height: 40px;width:239px;margin: 24px 25px 0 0;float: right; background-size: cover;}
#icon-gs-logo-white {width: 40px; height: 40px;}
#special-block {width:40px;height:40px;margin: 24px 25px 0 0;position:relative;display:none;}

/* Header
-----------------------------------------------------------------------------*/
#cli {width: 30px; height: 38px; position: absolute;}
#dash {width: 24px; height: 10px; position: absolute;display: block;
  -webkit-animation: blinker 1s infinite;
     -moz-animation: blinker 1s infinite;
      -ms-animation: blinker 1s infinite;
	   -o-animation: blinker 1s infinite;
          animation: blinker 1s infinite;
}

@-webkit-keyframes blinker {  0% {background-color: #f03e6c;} 50% {background-color: #f03e6c;} 51% {background-color: #000;} 100% {background-color: #000;}  }
   @-moz-keyframes blinker {  0% {background-color: #f03e6c;} 50% {background-color: #f03e6c;} 51% {background-color: #000;} 100% {background-color: #000;}  }
	@-ms-keyframes blinker {  0% {background-color: #f03e6c;} 50% {background-color: #f03e6c;} 51% {background-color: #000;} 100% {background-color: #000;}  }
     @-o-keyframes blinker {  0% {background-color: #f03e6c;} 50% {background-color: #f03e6c;} 51% {background-color: #000;} 100% {background-color: #000;}  }
        @keyframes blinker {  0% {background-color: #f03e6c;} 50% {background-color: #f03e6c;} 51% {background-color: #000;} 100% {background-color: #000;}  }

#red_block {width: 500px; height: 158px; position: absolute; z-index: 1000;margin: 60px 0 0 30%;}

.blink {fill: #eb0b5a; mask-image:url("../img/cli.svg");}

#issue_message {width: 100%; height: 96px;position:relative;float:left;}
#issue_description {width:100%;height:40px;position:relative;float:left;border-top:3px solid #dffd12;border-bottom:3px solid #dffd12;}

.footer > div > div p {margin-left:25px; font-size:13px; line-height: 1.3;color: #ffffff;}


#gorodsnov-landscape {
	background-image: url("../img/liana-gvaniya-ie.jpg");
	background-size: cover;
	
	width: 120%;
	height: calc(100vh - 229px);
	
	/*background-size: 100% auto;*/
	margin-left: -10%;
	/*margin-top: 40px;*/
	position: relative;
	float: left;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	    -ms-background-size: cover;
	     -o-background-size: cover;
	pointer-events: none;
}


/* Ruls for screen
-----------------------------------------------------------------------------*/

/* Too small devices/windows */
@media (min-width: 150px) and (max-width: 271px) {
	header {height: calc(100vh - 89px);background-color: #FFF;}
	#cli {display: none;}
	#dash {display: none;}
	#issue_message {height: auto;}
	#issue_description {height: auto;margin-top: 9px;border-top: 3px solid #9e9e9e;border-bottom: 3px solid #9e9e9e;}
	.content {display: none;}
	footer {height: 89px;}
	#footer-text div {display: table;}
	#footer-text div div {display: table-cell; vertical-align: middle; height: 89px; width: 100%;}
	.footer > div > div p {margin:0 20px 0 20px;}
	#footer-logo {display: none;}
	#footer-gs-logo-white {display: none;}

/*			  ______          _       
			 |  ____|        | |      
			 | |__ ___  _ __ | |_ ___ 
			 |  __/ _ \| '_ \| __/ __|
			 | | | (_) | | | | |_\__ \
			 |_|  \___/|_| |_|\__|___/			*/
	
			h1 {font-size:2.6em; position: relative; margin:12px 20px 0 20px;color: #000;}
			#issue_description span {color:#0b73b5;}
			#issue_description p {font-size:1.25em;margin:5px 20px 5px 20px;position: relative;color: #000;}
	
			@media (max-width: 221px) {
				#footer-text {height: 40px;}
				#special-block {display:block; margin-left: auto; margin-right: auto;}
				#footer-text div {display: none;}
				#footer-gs-logo-white {display: none;}
			}
	
			@media (min-width: 150px) and (max-width: 210px) {
				h1 {margin:12px 10px 0 10px;}
				#issue_description p {font-size:1.25em;margin:5px 10px 5px 10px;}
				@media (max-width: 180px) {h1 {font-size:2em;font-weight:bolder;}}
			}
	
	@media (max-height: 287px) {.wrapper {height: auto;padding-bottom: 0;}} /* Убераем наезжание друг под друга футера и хедера на маленьких экранах, высоту берем "условно хитро", просто беря за основу самый широкий #issue_description */
}

/* iPhone 5/SE */
@media (min-width: 272px) and (max-width: 344px) {
	#cli {width: 18px; height: 22px;margin: 14px 0 0 25px;}
	#dash {width: 12px; height: 6px;margin: 30px 0 0 45px;}
	#issue_message {height: 79px;}
	#issue_description {height: 55px;}
	
	footer {min-height: 178px;}
	#footer-text div {display: table;}
	#footer-text div div {display: table-cell; vertical-align: middle; height: 89px; width: 100%;}
	#footer-gs-logo-white {display: none;}
	#footer-gs-logo {width:80%; margin: 0 auto 0 -40%;
	  top: 54%;
	  -webkit-transform: translate(0%, -50%);
	  -moz-transform: translate(0%, -50%);
	  -ms-transform: translate(0%, -50%);
	  -o-transform: translate(0%, -50%);
	  transform: translate(0%, -50%);}
	
/*			  ______          _       
			 |  ____|        | |      
			 | |__ ___  _ __ | |_ ___ 
			 |  __/ _ \| '_ \| __/ __|
			 | | | (_) | | | | |_\__ \
			 |_|  \___/|_| |_|\__|___/			*/
	
			h1 {font-size:2.6em;text-indent:40px;margin:12px 24px 0 25px;} /* Тут margin right уменьшен на 1px для кроссбраузерности Google Chrome MacOS & Windows, чтобы на размере экрана 272px в Windows заголовок не делился на три строки. */
			#issue_description p {font-size:1.25em;margin:5px 25px 0 25px;letter-spacing: 0.04px;} /* letter-spacing решил проблему кросбраузерности Google Chrome MacOS & Windows, решен вопрос деления абзатца на три строки в размере окна width: 344px, пздц канешн :0) */
			.footer > div > div p {margin-right:25px;}
	
	@media (max-height: 229px) {.wrapper {height: auto;padding-bottom: 0;}.content {display: none;}} /* Убераем наехжание друг под друга футера и хедера на маленьких экранах */
	
}

/* мобильник - вертикально [iPhone 6/7/8 Plus] */
@media (min-width: 345px) and (max-width: 575px) and (min-height: 501px) {
	.container {width: 100%;}
	#cli {width: 21px;height: 26px;margin-top: 18px; margin-left: 25px;}
	#dash {width: 15px; height: 7px;margin-top: 37px; margin-left: 50px;}
	#issue_message {height: 94px;}
	#issue_description {height: 40px;}
	
	#footer-gs-logo-white {display: none;}
	footer {min-height: 178px;}
	.footer > div > div p {margin: 22px 25px 0 25px;}
	#special-block {display:block;float: right;}
	
	
	
/*			  ______          _       
			 |  ____|        | |      
			 | |__ ___  _ __ | |_ ___ 
			 |  __/ _ \| '_ \| __/ __|
			 | | | (_) | | | | |_\__ \
			 |_|  \___/|_| |_|\__|___/			*/

			h1 {font-size:3em;text-indent: 50px;margin:15px 25px 0 25px;}
			#issue_description p {font-size:1.25em;margin:5px 21px 0 25px; padding: 0;letter-spacing: -0.24px;} /* letter-spacing решил проблему кросбраузерности Google Chrome MacOS & Windows, решен вопрос деления абзатца на три строки в размере окна width: 345px, пздц канешн :0) */
			
	@media (min-width: 514px) and (max-width: 575px) {
			#cli {margin-top: 33px;}
			#dash {margin-top: 52px;}
			#issue_message {height: 94px;}
			#issue_description {height:40px;}
			
			/* FONTS */
			h1 {letter-spacing: -0.25px; margin-right: 15px; margin-top: 31px; word-spacing:-0.7px;}
	}
	
}

@media (min-width: 345px) and (max-width: 644px) and (max-height: 500px) {
	header {height:125px;}
	.content {height: calc(100vh - 214px);}
	#gorodsnov-landscape {height: calc(100vh - 214px);} /* Важный блок, он убирает пустое место под картинкой, растягивает на 100% по вертикали */
	#issue_message {height: 79px;}
	#cli {width: 18px; height: 22px;margin: 14px 0 0 25px;}
	#dash {width: 12px; height: 6px;margin: 30px 0 0 45px;}
	#issue_description {height: 40px;}
	.footer > div > div p {margin: 22px 25px 0 25px;}
	#footer-gs-logo-white {display: none;}
	#special-block {display:block;float: right;}
	
	/*			  ______          _       
			 |  ____|        | |      
			 | |__ ___  _ __ | |_ ___ 
			 |  __/ _ \| '_ \| __/ __|
			 | | | (_) | | | | |_\__ \
			 |_|  \___/|_| |_|\__|___/			*/
	
			h1 {font-size:2.6em;text-indent:40px;margin:12px 24px 0 25px;} /* Тут margin right уменьшен на 1px для кроссбраузерности Google Chrome MacOS & Windows, чтобы на размере экрана 272px в Windows заголовок не делился на три строки. */
			#issue_description p {font-size:1.25em;margin:5px 25px 0 25px;}
	
		@media (min-width: 345px) and (max-width: 359px) {#issue_description p {word-spacing:-0.7px;letter-spacing: -0.2px;margin-left: 24px;}} /* для кроссбраузерности Google Chrome MacOS & Windows */
	
		@media (min-width: 362px) and (max-width: 644px) {
			#issue_message {height: 79px;}
			#issue_description {height:40px;}
			@media (min-width: 448px) and (max-width: 464px) {h1 {margin-right: 44px;}} /* для кроссбраузерности Google Chrome MacOS & Windows */
			
			@media (min-width: 465px) and (max-width: 644px) {
				header {height:100px;}
				#issue_message {height: 54px;}
				#issue_description {height:40px;}
				#issue_description p {font-size:1.25em;margin:5px 25px 0 25px;letter-spacing: 0.19px;}
				.content {height: calc(100vh - 189px);}
				#gorodsnov-landscape {height: calc(100vh - 189px);} /* Важный блок, он убирает пустое место под картинкой, растягивает на 100% по вертикали */
			}
		}
	@media (max-height: 188px) {.wrapper {height: auto;padding-bottom: 0;}.content {display: none;}} /* Убераем наехжание друг под друга футера и хедера на маленьких экранах */
}

@media (min-width: 645px) and (max-width: 767px) and (max-height: 500px) {
	header {height:95px;}
	#issue_message {height: 60px;}
	#issue_description {height: 29px;}
	#cli {width: 21px; height: 26px; position: absolute; margin-top: 18px; margin-left: 25px;}
	#dash {width: 15px; height: 7px;margin-top: 37px; margin-left: 50px;}
	.content {height: calc(100vh - 184px);}
	#gorodsnov-landscape {height: calc(100vh - 184px);} /* Важный блок, он убирает пустое место под картинкой, растягивает на 100% по вертикали */
	h1 {font-size:3em;line-height:1;text-indent: 50px;margin:15px 10px 0 25px;}
	#issue_description p {font-size:1.25em;margin:7px 25px 0 25px;}
	#footer-gs-logo-white {display: none;}
	#special-block {display:block;float: right;}
	.footer > div > div p {margin: 22px 25px 0 25px;}
	@media (max-height: 183px) {.wrapper {height: auto;padding-bottom: 0;}.content {display: none;}} /* Убераем наехжание друг под друга футера и хедера на маленьких экранах */
}

/* SM */
@media (min-width: 576px) and (max-width: 767px) and (min-height: 501px) {
	.container{width: 100%;}
	#issue_message {height: 82px;}
	#cli {margin-left: 35px;margin-top: 22px;}
	#dash {margin-left: 72px;margin-top: 50px;}
	#issue_description {height:52px;}
	#special-block {display:block;float: right;}
	
	
		@media (min-width: 576px) and (max-width: 606px) {
			
			#issue_message {height: 86px;}
			#issue_description {height:48px;}
			#cli {width: 21px; height: 26px; position: absolute; margin-top: 18px; margin-left: 35px;}
			#dash {width: 15px; height: 7px;margin-top: 37px; margin-left: 60px;}
			
		}
		@media (min-width: 607px) and (max-width: 713px) {
			#cli {width: 26px; height: 33px; margin-left: 35px;margin-top: 26px;}
			#dash {width: 15px; height: 7px; margin-left: 64px;margin-top: 52px;}
			#issue_message {height: 86px;}
			#issue_description {height:48px;}
			
		}
	footer {min-height: 89px;}
	#footer-gs-logo-white {display: none;}

/*			  ______          _       
			 |  ____|        | |      
			 | |__ ___  _ __ | |_ ___ 
			 |  __/ _ \| '_ \| __/ __|
			 | | | (_) | | | | |_\__ \
			 |_|  \___/|_| |_|\__|___/			*/
	
			h1 {font-size:4em;margin: 22px 35px 0 110px;}
			#issue_description p {margin: 6px 35px 0 35px;}
				@media (min-width: 576px) and (max-width: 606px) {
					#cli {margin-top: 33px;}
					#dash {margin-top: 52px;}
					h1 {font-size:3em;text-indent:50px;margin:31px 35px 0 35px;}
					#issue_description p {font-size:1.5em;}
				}
				@media (min-width: 607px) and (max-width: 713px) {
					h1 {font-size:3.5em;text-indent:54px;margin:26px 26px 0 35px;word-spacing:-0.7px;letter-spacing: -0.24px;} /* letter-spacing, word-spacing и margin-right решил проблему кросбраузерности Google Chrome MacOS & Windows, решен вопрос деления абзатца на три строки в размере окна width: 345px, пздц канешн :0) */
					#issue_description p {font-size:1.5em;}
				}
			.footer > div > div p {margin: 22px 25px 0 25px;}
}


@media (min-width: 768px) and (max-width: 991px) and (max-height: 500px) {
	header {height:95px;}
	#issue_message {height: 60px;}
	#issue_description {height: 29px;}
	#cli {width: 21px; height: 26px; position: absolute; margin-top: 18px; margin-left: 25px;}
	#dash {width: 15px; height: 7px;margin-top: 37px; margin-left: 50px;}
	.content {height: calc(100vh - 184px);}
	#gorodsnov-landscape {height: calc(100vh - 184px);} /* Важный блок, он убирает пустое место под картинкой, растягивает на 100% по вертикали */
	h1 {font-size:3em;line-height:1;text-indent: 50px;margin:15px 10px 0 25px;}
	#issue_description p {font-size:1.25em;margin:7px 25px 0 25px;}
	#footer-gs-logo-white {display: none;}
	#special-block {display:block;float: right;}
	.footer > div > div p {margin: 22px 25px 0 25px;}
	@media (max-height: 183px) {.wrapper {height: auto;padding-bottom: 0;}.content {display: none;}} /* Убераем наехжание друг под друга футера и хедера на маленьких экранах */
}

/* MD */
@media (min-width: 768px) and (max-width: 991px) and (min-height: 501px) {
	#issue_message {height: 94px;}
	.container{width:100%;}
	#cli {margin-left: 35px;margin-top: 30px;}
	#dash {margin-left: 72px;margin-top: 58px;}
	footer {min-height: 89px;}
	#footer-logo {display:none;}
	
		@media (min-width: 768px) and (max-width: 855px) {
			#issue_message {height: 82px;}
			#cli {margin-top: 22px;}
			#dash {margin-top: 50px;}
			#issue_description {height:52px;}
			#issue_description p {margin: 6px 35px 0 35px;}
		}

/*			  ______          _       
			 |  ____|        | |      
			 | |__ ___  _ __ | |_ ___ 
			 |  __/ _ \| '_ \| __/ __|
			 | | | (_) | | | | |_\__ \
			 |_|  \___/|_| |_|\__|___/			*/	
	
			h1 {font-size:4em;margin: 22px 0 0 110px;}
		
	@media (min-width: 856px) and (max-width: 991px) {
		h1 {font-size:4em;margin: 30px 0 0 110px;}
		#issue_description p {margin: 10px 35px 0 35px;}	
	}
			
				
			.footer > div > div p {margin-top:22px; margin-left:25px;}
}
/* LG */
@media (min-width: 992px) and (max-width: 1199px){
	#issue_message {height: 96px;}
	.container{width: 960px;}
	#cli {margin-left: 100px;margin-top: 30px;}
	#dash {margin-left: 137px;margin-top: 58px;}
	footer {min-height: 89px;}
	#footer-logo {display:none;}
	
/*			  ______          _       
			 |  ____|        | |      
			 | |__ ___  _ __ | |_ ___ 
			 |  __/ _ \| '_ \| __/ __|
			 | | | (_) | | | | |_\__ \
			 |_|  \___/|_| |_|\__|___/			*/

			h1 {font-size:4em;margin: 30px 0 0 180px;}
			#issue_description p {font-size:1.7em;margin-top:10px;margin-left:100px;}
			.footer p {margin: 22px 25px 0 25px;}
	
	@media (max-height: 228px) {.wrapper {height: auto;padding-bottom: 0;}.content {display: none;}} /* Убераем наезжание друг под друга футера и хедера на маленьких экранах */
}

/* XL */
@media (min-width: 1200px){
	#issue_message {height: 96px;}
	.container{width: 1170px;}
	#cli {margin-left: 100px;margin-top: 30px;}
	#dash {margin-left: 137px;margin-top: 58px;}
	footer {min-height: 89px;}
	#footer-logo {display:none;}
	
/*			  ______          _       
			 |  ____|        | |      
			 | |__ ___  _ __ | |_ ___ 
			 |  __/ _ \| '_ \| __/ __|
			 | | | (_) | | | | |_\__ \
			 |_|  \___/|_| |_|\__|___/			*/
	
			h1 {font-size:4em;margin: 30px 0 0 180px;}
			#issue_description p {font-size:1.7em;margin-top:10px;margin-left:100px;}
			.footer > div > div p {margin: 22px 25px 0 25px;}
	
	@media (max-height: 228px) {.wrapper {height: auto;padding-bottom: 0;}.content {display: none;}} /* Убераем наехжание друг под друга футера и хедера на маленьких экранах */
}