/*
1920x1080 (Full HD / 1080p) - абсолютный стандарт для большинства домашних и офисных мониторов
2560x1440 (Quad HD / 2K / 1440p) - стандарт для игровых и рабочих мониторов 27"
3840x2160 (Ultra HD / 4K / 2160p) = стандарт для больших мониторов (от 27 - 32"), профессиональная графика, премиум гейминг
1280x720 (HD / 720p) - устаревающий стандарт, бюджетные старые мониторы

2560x1080 (21:9) - UltraWide
3440x768 (21:9) - UltraWide QHD
5120x1440 (Dual QHD 32:9) -эквивалент двух мониторов 2К
*/

@media (width < 1024px){
	/*.container {
		background-color: lightcoral;
	}*/
}


@font-face {
    font-family: 'Roboto-Condensed';
    src: url('./font/Roboto-Condensed.ttf');
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('./font/Roboto-Regular.ttf');
}


:root {
  --body-color: #FFFFFF;
  --figure-card-color: #FFFFFF;
  --text-body-color: #004b85;
  
  --footer-color: #fafafa;
  --footer-border-color: #e2e2e2;
  
  --desktop-width: 100%;
  --desktop-width-72: 72%;
  --desktop-width-86: 86%;
  
  --text-menu-color: #004b85;
  --text-menu-color-hover: #19AA75;

  --white-color-ff: #ffffff;
  --grey-color-e2: #e2e2e2;
  
  --min-div-container-width: 1024px;
  
}


html {
    height: 100%;
	margin: auto;
}
body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background-color: var(--silver-dark);
	font-family: Roboto-Regular, sans-serif;
	/*color: #333;*/
	color: var(--text-body-color);
	scrollbar-face-color: #f5f5f5;
	scrollbar-shadow-color: #ccc;
	scrollbar-highlight-color: #f5f5f5;
	scrollbar-3dlight-color: #ccc;
	scrollbar-darkshadow-color: #f5f5f5;
	scrollbar-track-color: #f5f5f5;
	scrollbar-arrow-color: #ccc;
}

.container {
	width: 100%;
	max-width: 2560px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 260px;
	padding-right: 200px;
	/*padding-left: 10%;
	padding-right: 7%;*/
	box-sizing: border-box; /* Чтобы padding не увеличивал общую ширину блока */
}

a {
	text-decoration: none;
	color: var(--text-menu-color);
	transition: color 0.2s ease;
}
a:hover {
  text-decoration: none;
  color: var(--text-menu-color-hover);
}

/* -------------------------------------------------------------------------------------------- */

.header_block{
	clear:both;
	background-color: var(--body-color);
	width: var(--desktop-width);
	height: 60px;
	padding: 0;
	margin:24px 0 80px 0;
	flex-shrink: 0; /* do not allow block compression */
	font-family: Roboto-Condensed, sans-serif;
	font-size: 18px;
	/*font-stretch: condensed;*/
	/*border:1px solid red;*/
}
.header_block table{
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
	height: 100%;
	margin: 0;
	/*border:1px solid blue;*/
}
.header_block td,th{
	height: 50px;
	padding: 0;
	margin: 0;
	text-align: center;
	/*border:1px solid green;*/
}

/* -------------------------------------------------------------------------------------------- */

.footer_block{
	clear:both;
	background-color: var(--footer-color);
	width: var(--desktop-width);
	padding: 40px 200px 100px 260px ;
	box-sizing: border-box; /* Чтобы padding не увеличивал общую ширину блока */
	border: none;
	border-top: 1px solid var(--footer-border-color);
	margin:120px 0 0 0;
	flex-shrink: 0; /* do not allow block compression */
	font-family: Roboto-Condensed, sans-serif;
	font-size: 18px;
	/*font-stretch: condensed;*/
	/*border:1px solid red;*/
}
.footer_block table{
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
	height: 100%;
	margin: 0;
	/*border:1px solid blue;*/
}
.footer_block td,th{
	height: 50px;
	padding: 0;
	margin: 0;
	text-align: center;
	vertical-align: top;
	/*border:1px solid green;*/
}

.footer_left_block {
	width:360px;
	font-family: Roboto-Regular, sans-serif; 
	text-align: left;
	font-size:16px; 
	font-weight: bold;
}
.footer_left_block a{
	text-align: left;
	font-weight: normal;
	cursor: pointer;
	display: inline-block;
	margin: 2px 0 4px 0;
}
.footer_left_block td,th{
	text-align: left;
}

.footer_right_block {
	width:160px;
	font-family: Roboto-Condensed, sans-serif;
	text-align: left;
	font-size:12px; 
	vertical-align: top;
}
.footer_right_block td,th{
	height: 34px;
	text-align: left;
}

/* -------------------------------------------------------------------------------------------- */

.header-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  /*display: flex;
  gap: 40px;*/
  text-align: right;
}

.header-menu li {
  display: inline-block;
  margin-left: 40px;
}

.header-menu a {
	text-decoration: none;
	color: var(--text-menu-color);
	font-family: Roboto-Condensed, sans-serif;
	font-size: 18px;
	transition: color 0.2s ease;
}

.header-menu a:hover {
	color: var(--text-menu-color-hover);
}

/* -------------------------------------------------------------------------------------------- */

.path-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.path-menu li {
  display: inline-block;
}

.path-menu a {
	text-decoration: none;
	color: var(--text-menu-color);
	font-family: Roboto-Condensed, sans-serif;
	font-size: 16px;
	transition: color 0.2s ease;
}

.path-menu a:hover {
	color: var(--text-menu-color-hover);
}

/* -------------------------------------------------------------------------------------------- */


/*
.footer_block{
	background-color: var(--silver-dark);
	width: var(--desktop-width);
	height: 240px;
	padding: 40px 14% 0 14%;
	margin-top: auto;
}
*/




/* -------------------------------------------------------------------------------------------- */
/*
figure.card * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}            
figure.card {
    position: relative;
    max-width: 100%;
    display: inline-block;
    border: 4px solid var(--figure-card-color);
    background: var(--figure-card-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    overflow: hidden;
    margin: 15px 0;
    font-size: 0;
	
	border-radius:24px;
}
figure.card img {
    transition: all 300ms;
    position: relative;
    top: 0;
    left: 0;
	width: 400px;
	height: 240px;
}
figure.card:hover img {
    transition: all 700ms;
    transform: scale(1.1);
}
figure.card figcaption {
    position: absolute;
    background: var(--figure-card-color);
    transition: transform 300ms;
    padding: 12px;
}
figure.card:hover figcaption {
    transform: translateY(0);
}
figure.info-bottom:hover img {
    top: -40px;
}
figure.info-bottom figcaption {
    bottom: 0;
    transform: translateY(100%);
    border-top: 6px solid var(--figure-card-color);
}
figure.info-top:hover img {
    top: 40px;
}
figure.info-top figcaption {
    top: 0;
    transform: translateY(-100%);
    border-bottom: 6px solid var(--figure-card-color);
}
figure.info-bottom figcaption, 
figure.info-top figcaption {
    width: 100%;
}
figure.info-left:hover img {
    left: 90px;
}
figure.info-left figcaption {
    left: 0;
    top: 0;
    transform: translateX(-180px);
    border-right: 6px solid var(--figure-card-color);
}
figure.info-right:hover img {
    left: -90px;
}
figure.info-right figcaption {
    right: 0;
    top: 0;
    transform: translateX(180px);
    border-left: 6px solid var(--figure-card-color);
}
figure.info-left figcaption, 
figure.info-right figcaption {
    width: 180px;
    height: 100%;
}
figure.card figcaption .info span {
    font-size: 13px;
    font-family: Verdana, sans-serif;  
    display: block;
}
figure.card figcaption .info h3 {
    font-size: 18px;
    display: inline-block;
    font-weight: normal;
    font-family: Roboto-Regular, sans-serif;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #337AB7;
}


figure.card .captext {
	position: absolute;
	top: 20%;
	left: 100%;
	transform: translate(-110%, -50%);
	color: #fff;
    font-weight: bold;
    font-family: Roboto-Regular, sans-serif;
	font-size: 28px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
	white-space: nowrap;
}
*/


figure.card * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}            
figure.card {
    position: relative;
    max-width: 100%;
    display: inline-block;
    border: 4px solid var(--figure-card-color);
    background: var(--figure-card-color);
    /*box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);*/
    overflow: hidden;
    margin: 15px 0;
    font-size: 0;
	
	border-radius:4px;
	cursor: pointer;
}
figure.card img {
    transition: all 300ms;
    position: relative;
    top: 0;
    left: 0;
	width: 400px;
	height: 240px;
}
figure.card:hover img {
    transition: all 700ms;
    transform: scale(1.1);
}
figure.card figcaption {
    position: absolute;
    background: var(--figure-card-color);
    transition: transform 300ms;
    padding: 12px;
}
figure.card:hover figcaption {
    transform: translateY(0);
}
figure.info-bottom:hover img {
    top: -40px;
}
figure.info-bottom figcaption {
    bottom: 0;
    transform: translateY(100%);
    border-top: 6px solid var(--figure-card-color);
}
figure.info-top:hover img {
    top: 40px;
}
figure.info-top figcaption {
    top: 0;
    transform: translateY(-100%);
    border-bottom: 6px solid var(--figure-card-color);
}
figure.info-bottom figcaption, 
figure.info-top figcaption {
    width: 100%;
}
figure.info-left:hover img {
    left: 90px;
}
figure.info-left figcaption {
    left: 0;
    top: 0;
    transform: translateX(-180px);
    border-right: 6px solid var(--figure-card-color);
}
figure.info-right:hover img {
    left: -90px;
}
figure.info-right figcaption {
    right: 0;
    top: 0;
    transform: translateX(180px);
    border-left: 6px solid var(--figure-card-color);
}
figure.info-left figcaption, 
figure.info-right figcaption {
    width: 180px;
    height: 100%;
}
figure.card figcaption .info span {
    font-size: 13px;
    font-family: Verdana, sans-serif;  
    display: block;
}
figure.card figcaption .info h3 {
    font-size: 18px;
    display: inline-block;
    font-weight: normal;
    font-family: Roboto-Regular, sans-serif;
    margin-bottom: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid #337AB7;
}


figure.card .captext {
	position: absolute;
	top: 20%;
	left: 100%;
	transform: translate(-110%, -50%);
	color: #fff;
    font-weight: bold;
    font-family: Roboto-Regular, sans-serif;
	font-size: 28px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
	white-space: nowrap;
}


/* -------------------------------------------------------------------------------------------- */

/* контейнер div-ов в линию равных по ширине */
div.div-line {
	width: 100%;
	min-width: var(--min-div-container-width);
	height: auto;
    margin: 0 0 20px 0;
    padding: 0;
    box-sizing: border-box; /* чтобы padding не увеличивал общую ширину блока */
	display: flex;
	gap: 20px;
}
div.div-inner-line {
	flex: 1;
	height: auto;
	min-height: 380px;
	float: left;
	/*border: 1px solid red;*/
}

div.div-img-line {
	width: 45%;
	height: 100%;
	margin: 0;
	padding: 0;
    box-sizing: border-box;
    overflow: hidden;
	float: left;
	border-radius: 20px;
	/*border:1px solid red;*/
}
div.div-img-line img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*object-fit: fill;*/
}
div.div-text-line {
	width: 55%;
	height: 100%;
	margin: 0;
	padding: 40px;
    box-sizing: border-box;
    overflow: hidden;
	float: left;
	/*border:1px solid red;*/
}

/* -------------------------------------------------------------------------------------------- */

/* div с картинкой и наведением */
div.press-link * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
div.press-link {
    position: relative;
    max-width: 100%;
    display: grid; /* для растяжения дочерних div по высоте */
	cursor: pointer;
    border: 1px solid var(--grey-color-e2);
	transition: border-color 300ms ease;
    background: var(--white-color-ff);
    overflow: hidden;
	border-radius: 22px;
}
div.press-link img {
    transition: all 300ms;
    position: relative;
    top: 0;
    left: 0;
}
div.press-link:hover img {
    transition: all 700ms;
    transform: scale(1.1);
}
div.press-link:hover {
	border-color: var(--text-menu-color-hover);
}

div.press-link-text {
	width: 60%;
	height: 100%;
	margin: 0;
	padding: 40px;
    box-sizing: border-box;
    overflow: hidden;
	float: left;
	/*border:1px solid red;*/
}

div.press-link-img {
	width: 40%;
	height: 100%;
	margin: 0;
	padding: 0;
    box-sizing: border-box;
    overflow: hidden;
	float: left;
	/*border:1px solid red;*/
}

div.press-link-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}



/* -------------------------------------------------------------------------------------------- */

div.press-button * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
div.press-button {
    position: relative;
    max-width: 100%;
    display: inline-block;
	cursor: pointer;
    border: 1px solid var(--grey-color-e2);
	transition: border-color 300ms ease;
    background: var(--white-color-ff);
    overflow: hidden;
	border-radius: 8px;
	margin: 0 80px 0 0;
}
div.press-button img {
    transition: all 300ms;
    position: relative;
    top: 0;
    left: 0;
}
div.press-button:hover img {
    transition: all 700ms;
    transform: scale(1.1);
}
div.press-button:hover {
	border-color: var(--text-menu-color-hover);
}

div.press-button-text {
	width: 60%;
	height: 100%;
	margin: 0;
	text-align: center;
    box-sizing: border-box;
    overflow: hidden;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
  /*border:1px solid red;*/
}

div.press-button-img {
	width: 40%;
	height: 100%;
	margin: 0;
	padding: 0;
    box-sizing: border-box;
    overflow: hidden;
	float: left;
	/*border:1px solid red;*/
}

div.press-button-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* -------------------------------------------------------------------------------------------- */

img.img-tone {
  filter: grayscale(100%) opacity(50%);
  transition: filter 0.3s ease;
}

img.img-tone:hover {
  filter: grayscale(0%);
}

/* -------------------------------------------------------------------------------------------- */