/*
 * ntcms.ru
 * Developed by Zadorozhniy (Jinn) Alexandr
 */

/*@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i,900,900i');*/
@import url('font/style_font.css');

/***** Переменные *****/

:root {
	--lsidebar_width: 20%;
	--footer_height: 30px;

	--top_menu_height: 8%;
	--top_menu_border: 4px;

	--logo_height: 15%;
	--main_top_padding: 60px;

	--main_blue: #2b3c8e;
	--main_blue_trans: rgba(45, 60, 142, 0.75);
	--green: #a5d232;
}

html {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	position: relative;
	margin: 0;
	padding: 0;
	height: auto!important;
	height: 100%;
	min-height: 100%;
	font-family: 'Roboto', sans-serif;
	font-size: 1.6vh;
	color: #333;
	/*min-width:  1024px;*/

	-o-background-size:      cover;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	-khtml-background-size:  cover;
	background-size:         cover!important;

	-webkit-transition: background 0.5s ease;
	-moz-transition:    background 0.5s ease;
	-ms-transition:     background 0.5s ease;
	-o-transition:      background 0.5s ease;
	transition:         background 0.5s ease;
}

h1 {
	font-size: 3vh;
	margin-top: 0;
	color: #800000;
	text-transform: uppercase;
}

li {
	line-height: 1.5em;
}

#logo {
	position: relative;
	height: var(--logo_height);
}

#logo_img,
#logo_square {
	width: 100%;
}

#logo_square,
#trapezoid {
	z-index: 0;
}

#logo_img {
	display: block;
	z-index: 900;
	position: absolute!important;
	background: url(img/logo_w.png) center center no-repeat;
	height: 60%;
	top: 15%;
	z-index: 10;

	-o-background-size:      80% auto;
	-webkit-background-size: 80% auto;
	-moz-background-size:    80% auto;
	-khtml-background-size:  80% auto;
	background-size:         80% auto;
}

#logo_square {
	background: var(--main_blue);
	height: 76%;
}

#trapezoid {
	border-top: 3.6vh solid var(--main_blue);
	border-left: 0 solid transparent;
	border-right: 3vh solid transparent;
	height: 0;
	width: 28%;
	bottom: 0;
	left: 0;
}

#text_container,
#logo_square,
#logo_img,
#trapezoid,
#container,
#footer,
#content,
#subcontent,
#lsidebar ul li svg,
#lsidebar {
	position: absolute;
}

#container,
#footer {
	width: 100%;
}

#container {
	height: 100%;
}

#lsidebar {
	width: var(--lsidebar_width);
	height: calc(100% - var(--footer_height));
	background: var(--main_blue_trans);
}

#lsidebar ul,
#lsidebar a,
#top_menu div {
	font-size: 2vh;
}

#lsidebar ul {
	list-style: none;
	margin-top: 22%;
	padding-left: 5%;
}

#top_menu a,
#lsidebar a,
#lsidebar li:hover > svg line {
	display: block;
}

#top_menu a,
#lsidebar,
#lsidebar a {
	color: #fff;
}

#lsidebar a {
	text-decoration: none;
	position: relative;
}

#lsidebar ul li {
	margin: 4px 0 16px;
	padding: 7px 10px 4px 21px;
	position: relative;
	border-bottom: 2px solid transparent;
	line-height: 1;
}

.nobpadding {
	padding-bottom: 0!important;
}

.nobborder {
	border-bottom: none!important;
}

#lsidebar ul li ul {
	margin-top: 20px;
	padding-left: 0;
}

#lsidebar ul li ul li:last-child {
	padding-bottom: 0;
}

#lsidebar ul li svg {
	width: 100%;
	left: 0;
	top: 0;
}

.circle,
.line_45,
.line_horizontal {
	stroke: var(--green);
}

.circle {
	stroke-width: 3;
	fill: none;
}

.line_45 {
	stroke-width: 2;
}

.line_horizontal {
	stroke-width: 4;
}

#content {
	width: calc(100% - var(--lsidebar_width));
	left: calc(var(--lsidebar_width));
	height: calc(100% - var(--footer_height));
}

#subcontent {
	width: 86%;
	height: 82%;
	top: 11.5%;
	left: 7%;
	max-height: 100%;
}

#text_container {
	overflow-y: auto;
	max-height: calc(100% - var(--top_menu_height));
	width: 100%;
}

.text {
	padding: 4% 5%;
	background: rgba(255, 255, 255, 0.95);
	display: none;
	width: 90%;
	font-size: 1.6vh;
	text-align: justify;
	overflow: hidden;
	line-height: 1.5em;
}

.text a {
	color: #333;
	font-weight: bold;
}

.columns {
	-webkit-column-count: 2;
	-moz-column-count:    2;
	column-count:         2;

	-webkit-column-gap: 3em;
	-moz-column-gap:    3em;
	column-gap:         3em;
}

.columns ul:first-child,
.columns ul li:first-child,
.columns p:first-child {
	margin-top: 0;
}

#footer {
	background: #333;
	height: var(--footer_height);
	bottom: 0;
	text-align: center;
	line-height: var(--footer_height);
	font-size: 1vh;
	color: #fff;

	-ms-line-height:20px;
	-webkit-column-gap: 20px;
}

#top_menu {
	display: flex;
	width: 100%;
	height: var(--top_menu_height);
	background: var(--main_blue_trans);
}

#top_menu a {
	text-decoration: none;
}

#top_menu div {
	flex: 1 1 30em;
	margin-left: 5%;
	text-align: center;
	line-height: 320%;
	border-bottom: var(--top_menu_border) solid #fff;

	-webkit-transition: all 0.5s ease;
	-moz-transition:    all 0.5s ease;
	-ms-transition:     all 0.5s ease;
	-o-transition:      all 0.5s ease;
	transition:         all 0.5s ease;
}

#top_menu div:last-child {
	margin-right: 5%;
}

#top_menu div.active {
	border-bottom-color: var(--green);
}

.info {
	background: url(img/info.png) center center no-repeat;
	display: inline-block;
	width: 1vh;
	height: 1vh;
	position: relative;
	cursor: help;

	-o-background-size:      100% auto;
	-webkit-background-size: 100% auto;
	-moz-background-size:    100% auto;
	-khtml-background-size:  100% auto;
	background-size:         100% auto;
}

#menu_toggle {
	display: none;
}

/***********************************************************************
 * СТРАНИЦЫ
 **********************************************************************/

#hpc:target,
#scada:target,
#fpga:target,
#gpu:target,
#cooling:target,
#org40:target,
#blockchain:target,
#lifecycle:target,
#about:target,
#partners:target,
#drivers:target,
#driver-ru-htcp-02-01-001:target,
#driver-ru-htcp-02-01-002:target,
#contacts:target {
	display: block;
}

#partners table {
	width: 100%;
	border-spacing: 15px;
}

#partners table td {
	text-align: center;
	vertical-align: middle;
	background: #fff;
}

.partner_link {
	display: block;
	height: 150px;
	width: 100%;
	padding: 20px 0;
	margin: 0 auto;
	text-decoration: none;
	font-size: 2vh;
	color: #333;

	-webkit-box-shadow: inset 0 0 15px 0 #A6A6A6;
	box-shadow:         inset 0 0 15px 0 #A6A6A6;

	-webkit-transition: all 300ms ease;
	-moz-transition:    all 300ms ease;
	-ms-transition:     all 300ms ease;
	-o-transition:      all 300ms ease;
	transition:         all 300ms ease;
}

.partner_link:hover {
	-webkit-box-shadow: inset 0 0 15px 0 #868686;
	box-shadow:         inset 0 0 15px 0 #868686;
}

.emit {
	background: #fff url(img/logo_emit.png) 50% 60% no-repeat;
}

.solmix {
	background: #fff url(img/logo_solmix.png) 50% 60% no-repeat;
}

.vetrf {
	background: url(img/vetis_1.png) 30% 60% no-repeat,
				url(img/vetis_2.png) 62% 60% no-repeat;
}

.mniipu {
	background: #fff url(img/logo-mniipu.jpg) 50% 60% no-repeat;
}

#contacts table {
	width: 100%;
}

#contacts table td {
	vertical-align: top;
}

/**********************************************************************/

@media only screen and (max-width : 1920px) {
	.circle {
		stroke-width: 2;
	}

	.line_45 {
		stroke-width: 2;
	}

	.line_horizontal {
		stroke-width: 2;
	}

	p {
		line-height: 2;
	}

	.line_45 {
		transform: translate(1px, 1px);
	}
}

/**************** Portrait tablets and small desktops *******************/

@media screen and (max-width: 1024px) {
	:root {
		--topbar_height: 8%;
		--foooter_height: 2%;
	}

	#content {
		width: 100%;
		height: calc(100% - var(--topbar_height) - var(--foooter_height));
		top: calc(var(--topbar_height));
		left: 0%;
	}

	#subcontent {
		width: 100%;
		height: 100%;
		top: 0%;
		left: 0%;
	}

	#text_container {
		max-height: 100%;
	}

	#footer {
		height: var(--foooter_height);
		line-height: 200%;
	}

	#trapezoid {
		display: none;
	}

	#lsidebar {
		position: absolute;
		width: 100%;
		height: var(--topbar_height);
		z-index: 1;
		background-color: #2b3c8e;
	}

	#lsidebar ul,
	#lsidebar a {
		font-size: 2.5vh;
	}

	.partner_link {
		height: 100px;
		width: 100%;
		padding: 5% 0;
	}

	#logo {
		position: absolute;
		right: 3%;
		height: 100%;
	}

	#logo_img, #logo_square {
		position: absolute;
	}

	#logo_square {
		width: 100%;
		height: 100%;
	}

	#logo_img {
		height: 100%;
		top: 0;
		right: 1%;
		z-index: 1000;
	}

	#menu_display {
		opacity: 0;
	}

	.menu_btn {
		background: url(img/butns6.png) 50% 50%/contain no-repeat;
		width: 11%;
		height: 50%;
		cursor: pointer;
		position: absolute;
		align-items: center;
		top: 25%;
		left: 3%;
		z-index: 1000;
	}

	#menu_toggle:checked ~ #menu_box {
		visibility: visible;
	}

	#menu_box {
		background: -moz-linear-gradient(top, 	 rgba(43, 60, 142, 1) 0%, rgba(45, 60, 142, 1) 10%, rgba(45, 60, 142, 0.95) 100%);
		background: -webkit-linear-gradient(top, rgba(43, 60, 142, 1) 0%, rgba(45, 60, 142, 1) 10%, rgba(45, 60, 142, 0.95) 100%);
		background: -linear-gradient(to bottom,  rgba(43, 60, 142, 1) 0%, rgba(45, 60, 142, 1) 10%, rgba(45, 60, 142, 0.95) 100%);
		position: absolute!important;
		display: block!important;
		width: 65%;
		padding-bottom: 7%;
		padding-top: 20%;
		padding-left: 0!important;

		visibility: hidden;
	}

	#lsidebar ul {
		margin-top: 0;
	}

	#lsidebar ul li svg {
		left: -5%;
	}

	#lsidebar ul li {
		margin: 0% 3% 5% ;
		padding: 5% 3% 0% 7%;
	}

	.columns {
		-webkit-column-count: 1;
		-moz-column-count:    1;
		column-count:         1;

	}

	#subcontent h1 {
		font-size: 2.5vh;
	}

	#subcontent p,
	#subcontent li {
		font-size: 2.5vh;
		text-align: justify;
	}

	.emit {
		background-position: 50% 65%;
		background-size: 55% 35%;
	}

	.solmix {
		background-position: 50% 70%;
		background-size: 80% 30%;
	}

	.vetrf {
		background: url(img/vetis_1.png) 8% 70%/20% auto no-repeat,
					url(img/vetis_2.png) 90% 70%/70% auto no-repeat;
	}

	.mniipu {
		background-position: 50% 60%;
		background-size: 30% 40%;
	}

	#partners table {
		border-spacing: 0;
	}

	#partners table td a {
		padding-bottom: 5%;
	}

	.text {
		text-align: left;
	}

	#right-column,
	#left-column {
		display: inline-block;
		width: 100%;
	}

	#left-column a,
	#right-column a{
		height: 20vh;
	}

	#partners h1,
	#contacts h1 {
		margin-bottom: 1%;
	}

	#contacts p {
		margin: 1%;
		line-height: 135%;
	}

	#contacts_left,
	#contacts_right {
		display: inline-block;
	}

	#contacts iframe {
		width: 90vw;
		height: 52vh;
	}

	#partners {
		padding: 4% 5%;
	}

/********************mobile new logo*********************************************************/
	#top_menu div {
		line-height: 3em;
		font-size: 1.2em;
		white-space: nowrap;
	}

	#logo_img {
		background-size: 80% auto;
	}

	#logo {
		width: 36%;
	}
}

@media only screen and (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
 	.circle {
		transform: matrix(1.5, 0, 0, 1.5, 3, -15);
	}

	.line_45 {
		transform: matrix(1, 0, 0, 1, 10, -1);
		stroke-width: 1%;
	}

	.line_horizontal {
		transform: matrix(4, 0, 0, 1, -40, -1);
		stroke-width: 1%;
	}
}

@media only screen and (orientation: portrait) and (max-width: 240px) {
	.circle {
		transform: matrix(0.6, 0, 0, 0.6, 0, 3);
	}

	.line_45 {
		transform: matrix(1, 0, 0, 1, -3, -1);
		stroke-width: 1%;
	}

	.line_horizontal {
		transform: matrix(1, 0, 0, 1, -3, -1);
		stroke-width: 1%;
	}
}

/**************** Landscape orientation *********************/

@media only screen and (orientation: landscape) and (max-width: 1024px) {
	#menu_box {
		width: 45%;
		padding-bottom: 1%;
		padding-top: 5%;
		margin-bottom: 0;
	}

	#logo {
		left: 70%;
		width: 15%;
		height: 100%;
	}

	.menu_btn {
		width: 10%;
		height: 50%;
		top: 25%;
		left: 5%;
	}

	#lsidebar ul li ul {
		margin-top: 3%;
	}

	#lsidebar ul li {
		margin: 0% 3% 0% ;
		padding: 4% 0% 0% 5%;
	}

	#subcontent h1 {
		font-size: 4vh;
	}

	#subcontent p,
	#subcontent li {
		font-size: 3vh;
	}

	#contacts iframe {
		width: 90vw;
		height: 54vh;
	}

	#right-column,
	#left-column {
		display: table-cell;
		width: 50%;
	}

	.partner_link {
		padding: 5% 0 35% 0!important;
		font-size: 4vh;
	}

	#lsidebar li,
	#lsidebar a,
	#lsidebar ul {
		font-size: 3vh;
	}

	#top_menu div {
		line-height: 200%;
		font-size: 3vh;
	}

		#top_menu div {
		line-height: 6vh;
	}

	#logo_img {
		background-size: 80% auto;
		position: absolute!important;
		background: url(img/logo_w.png) 50% 50%/contain no-repeat;
		height: 60%;
		top: 20%;
		z-index: 10;
	}

	#logo {
		width: 30%;
	}
}

@media only screen and (orientation: landscape) and (max-width: 569px) {
	.circle {
		transform: matrix(0.6, 0, 0, 0.6, 0, 3);
	}

	.line_45 {
		transform: matrix(1, 0, 0, 1, -3, -1);
		stroke-width: 1%;
	}

	.line_horizontal {
		transform: matrix(1, 0, 0, 1, -3, -1);
		stroke-width: 1%;
	}
}

/**************************************IE 11 hooks*********************/

@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
	#content {
		width: 80%;
		left: 20%;
		height: 96%;
	}

	#lsidebar {
		height: 100%;
		width: 22%;
		background: rgba(45, 60, 142, 0.75);
	}

	#logo{
		background: #2b3c8e;
		width: 100%;
		height: 13%;
	}

	#logo_img {
		left: 0%;
		top: 0%;
		height: 100%;
		background-size: contaim!important;
	}

	#top_menu {
		height: 8%;
		background: rgba(45, 60, 142, 0.75);
	}

	#top_menu div {
		border-bottom: 10px solid #fff!important;
	}

	#footer {
		height: 30px;
		line-height: 30px;
	}

	#text_container {
		max-height: 92%;
	}

	#trapezoid {
		border-top: 3.6vh solid #2b3c8e;
	}

	#mark_t {
		list-style-type: disc!important;
		color: #a5d232;
	}

	#top_menu div.active {
		border-bottom-color: #a5d232!important;
	}

	#lsidebar ul {
		margin-top: 10%;
	}

	#lsidebar ul li ul {
		margin-top: 0px;
	}

	#lsidebar ul li {
		padding: 7px 10px 4px 21px;
	}
}