/*--------------------------------------------background: red;*/
@font-face {
  font-family: 'socseti';
  src: url('/css/fonts/socseti.ttf');
  font-weight: normal;
  font-style: normal;
}

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "socseti";
  font-style: normal;
  font-weight: normal;
  font-size: 18pt;
  text-decoration: inherit;
  display: inline-block;
  font-variant: normal;
  text-transform: none;
  z-index: 0;
}
.icon-vk:before { content: '\e800'; } /* '' */
.icon-youtube-1:before { content: '\e801'; color: #ed2524;} /* '' */
.icon-vkontakte:before { content: '\e802'; color: #526e8f;} /* '' */
.icon-fast-food:before { content: '\e815'; } /* '' */
.icon-twitter-circled:before { content: '\f057'; } /* '' */
.icon-facebook:before { content: '\f300'; color: #425497;} /* '' */
.icon-facebook-rect:before { content: '\f301'; } /* '' */
.icon-twitter-bird:before { content: '\f303'; color: #00b7ec;} /* '' */
.icon-odnoklassniki:before { content: '\f30c'; color: #f6903b;} /* '' */
.icon-odnoklassniki-rect:before { content: '\f30d'; } /* '' */
.icon-youtube:before { content: '\f313'; } /* '' */
.icon-instagram:before { content: '\f31e'; color: #c536a4;} /* '' */
.icon-instagram-filled:before { content: '\f31f'; } /* '' left: 0.2vw;top: 0.2vw;*/
/*#seti > div {padding: 0.2vw;}*/
.sc__icon2:hover { background: LightCyan; }
.sc__icon2 {display: inline-block;width:2.5rem;height: 2rem;border:1px solid #ccc;border-radius: 0.2rem;margin: 0.4rem 0 0.5rem 0;padding-top:0.5rem;text-align:center;}
.st_content:hover { background: LightCyan; }
.st_twitter:hover { background: #bbf7fc;}
.st_odnoklassniki:hover { background: #f6f09b;}
.st_yotube:hover { background: PapayaWhip;}
.st_instagram:hover { background: Lavender;}
.seti_bl {display: grid;grid-auto-flow: column;justify-content: start;gap: 10px;}
.seti_item {width: 2.5rem;}

/*--установить блоку высоту в процентном отношении от его ширины--*/
.item-responsive {
  position: relative; /* относительное позиционирование */
  z-index: -1;
  opacity: .99;
}
.item-responsive:before {
  display: block; /* отображать элемент как блок */
  content: ""; /* содержимое псевдоэлемента */
  width: 100%; /* ширина элемента */
}
.item-responsive>.st_content {
  position: absolute; /* абсолютное положение элемент */
  /* положение элемента */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
}
.st_content {
  display: grid;
  justify-items: center;
  align-items: center;
  border:1px solid #ccc;
  border-radius: 2px;
  cursor: pointer;
  
}
/* При необходимости (для блоков, имеющих данные классы) */
.item-16by9 {
  padding-top: 56.25%; /* (9:16)*100% */
}
.item-4by3 {
  padding-top: 75%; /* (3:4)*100% */
}
.item-2by1 {
  padding-top: 50%; /* (1:2)*100% */
}
.item-1by1 {
  padding-top: 100%; /* (1:1)*100% */
}
/*--установить блоку высоту в процентном отношении от его ширины--*/
/*--footer grid--*/
.footer-grid {
  display: grid;
  grid-template-areas:
    "dom"
    "mosTizer"
    "end";
  position: relative;
  z-index: 5;
}
#myDom {grid-area: dom;}
#mosTizer {grid-area: mosTizer;}
#myEnd {grid-area: end;}
.end-grid {
  display: grid;
  grid-template-areas:
    "seti find"
    "zag ocen"
    "metrik podel"
    "copr copr";
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.2vw;
  align-items: center;
}
#mSeti {grid-area: seti;}
#yaFind {grid-area: find;}
#endName {grid-area: zag;}
#oKach {grid-area: ocen;}
#mMail {grid-area: mail;}
#yaSeti {grid-area: podel;}
#oCorp {grid-area: copr;}
#yaMet {grid-area: metrik;}
/*--footer grid end--*/
#oKach img { width: 60%;}
.seti_bl,.endName-bl,.mMail-bl,.oCorp-bl {margin-left:10px;}
#yaSeti .seti_bl {margin-left:0px;}
#yaSeti .seti_item {width: 1.8rem;}
#yaSeti [class^="icon-"]:before, [class*=" icon-"]:before { font-size: 1rem;}
.social {display: inline-block;}
.social a {
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 10px 10px 0;
	text-align: center;
	color: #000;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
/*	box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);*/
}
.social a:hover {color: #fff;}
.social svg {
	margin-top: 7px;
	width: 32px;
	height: 32px;
}
.odnoklassniki a:hover {background: #f93;}
.telegram a:hover {background: #249bd7;}
.vk a:hover {background: #4a76a8;}
.max a:hover {background: linear-gradient( to right top,#44ccff, #2533ba, #9933dd);;}
@media screen and (max-width: 420px) {
[class^="icon-"]:before, [class*=" icon-"]:before {
 font-size: 1rem;
 z-index: 1;
 }
.seti_item {width: 2rem;}
.seti_bl { margin:0px; justify-content: center;}
.end-grid {
  display: grid;
  grid-template-areas:
    "find"
    "zag"
    "seti"
    "podel"
    "metrik"
    "copr";
  grid-template-columns: 1fr;
  grid-gap: 0.2vw;
  align-items: center;
  justify-content: center;
}
#yaSeti p {margin-left:10px;}
.fvw  { display: none;}
}