@font-face {
font-family: 'Rubik-Medium';
src: url('fonts/Rubik-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Rubik-Italic';
src: url('fonts/Rubik-Italic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Rubik-Regular';
src: url('fonts/Rubik-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Rubik-LightItalic';
src: url('fonts/Rubik-LightItalic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Rubik-MediumItalic';
src: url('fonts/Rubik-MediumItalic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'PoiretOne-Regular';
src: url('fonts/PoiretOne-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Montserrat-Regular';
src: url('fonts/Montserrat-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Montserrat-ExtraLight';
src: url('fonts/Montserrat-ExtraLight.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Montserrat-Bold';
src: url('fonts/Montserrat-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

.karusel
{
position:absolute;
border-style:solid;
border-width:0px;
height:1600px;
width:260px;
left: 213px;
top: 12px;
}

.square
{
position:absolute;
top:0px;
left:0px;
height:186px;
width:330px;
background-color:white;
/*border-radius: 5px;*/
box-shadow: 0 4px 4px rgba(202,202,202,0.6);
border-style:solid;
border-width:0px;
background-size: cover;
background-position: center center;
z-index:2;
cursor: pointer;
}

.s1
{
	height:100%;
	width:100%;
/*	border-radius: 5px;*/
	background-image: url(images/light1.webp);
	background-size: cover;
	background-position: center center;
}

.s1:hover
{
  background-image: url(images/or1.webp);
}

.s2
{
	height:100%;
	width:100%;
/*  border-radius: 5px;*/
	background-image: url(images/light2.webp);
	background-size: cover;
	background-position: center center;
}

.s2:hover
{
  background-image: url(images/or2.webp);
}

.s3
{
	height:100%;
	width:100%;
/*  border-radius: 5px;*/
	background-image: url(images/light3.webp);
	background-size: cover;
	background-position: center center;
}

.s3:hover
{
  background-image: url(images/or3.webp);
}

.s4
{
	height:100%;
	width:100%;
/*  border-radius: 5px;*/
	background-image: url(images/light4.webp);
	background-size: cover;
	background-position: center center;
}

.s4:hover
{
  background-image: url(images/or4.webp);
}

.s5
{
	height:100%;
	width:100%;
/*  border-radius: 5px;*/
	background-image: url(images/light5.webp);
	background-size: cover;
	background-position: center center;
}

.s5:hover
{
  background-image: url(images/or5.webp);
}

.s6
{
	height:100%;
	width:100%;
/*  border-radius: 5px;*/
	background-image: url(images/light6.webp);
	background-size: cover;
	background-position: center center;
}

.s6:hover
{
  background-image: url(images/or6.webp);
}

.s7
{
	height:100%;
	width:100%;
/*  border-radius: 5px;*/
	background-image: url(images/light7.webp);
	background-size: cover;
	background-position: center center;
}

.s7:hover
{
  background-image: url(images/or7.webp);
}

.s8
{
	height:100%;
	width:100%;
/*  border-radius: 5px;*/
	background-image: url(images/light8.webp);
	background-size: cover;
	background-position: center center;
}

.s8:hover
{
  background-image: url(images/or8.webp);
}

.s9
{
	height:100%;
	width:100%;
/*  border-radius: 5px;*/
	background-image: url(images/light9.webp);
	background-size: cover;
	background-position: center center;
}

.s9:hover
{
  background-image: url(images/or9.webp);
}

.s10
{
	height:100%;
	width:100%;
/*  border-radius: 5px;*/
	background-image: url(images/light10.webp);
	background-size: cover;
	background-position: center center;
}

.s10:hover
{
  background-image: url(images/or10.webp);
}

.vk
{
  position: absolute;
  top: 28px;
  left: 845px;
  width: 30px;
  height: 30px;
  background-image: url(images/l_vk_a.svg);
  background-size: cover;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
  opacity: 50%;
}

.vk:hover
{
  background-image: url(images/l_vk_a.svg);
  cursor: pointer;
  opacity: 100%;
}

.tg
{
  position: absolute;
  top: 28px;
  left: 920px;
  width: 30px;
  height: 30px;
  background-image: url(images/l_telegram_a.svg);
  background-size: cover;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
  opacity: 50%;
}

.tg:hover
{
  background-image: url(images/l_telegram_a.svg);
  cursor: pointer;
  opacity: 100%;
}

.wa
{
  position: absolute;
  top: 28px;
  left: 995px;
  width: 30px;
  height: 30px;
  background-image: url(images/l_whatsapp_a.svg);
  background-size: cover;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
  opacity: 50%;
}

.wa:hover
{
  background-image: url(images/l_whatsapp_a.svg);
  cursor: pointer;
  opacity: 100%;
}

.va
{
  position: absolute;
  top: 28px;
  left: 1070px;
  width: 30px;
  height: 30px;
  background-image: url(images/l_viber_a.svg);
  background-size: cover;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
  opacity: 50%;
}

.va:hover
{
  background-image: url(images/l_viber_a.svg);
  cursor: pointer;
  opacity: 100%;
}

.podlozhka
{
position: absolute;
top:420px;
left:20px;
height:150px;
width:788px;
background-image: url(images/podlozhka.png);
background-size: cover;
background-position: center center;
}

.group-1
{
  position: absolute;
 /* top: 228px;
  left: 470px;*/
  width: 54px;
  height: 54px;
  background-image: url(images/Group-01.png);
  background-size: contain;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
}

.group-2
{
  position: absolute;
 /* top: 228px;
  left: 470px;*/
  width: 50px;
  height: 50px;
  background-image: url(images/Group-02.png);
  background-size: contain;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
}

.group-3
{
  position: absolute;
 /* top: 228px;
  left: 470px;*/
  width: 54px;
  height: 52px;
  background-image: url(images/Group-04.png);
  background-size: contain;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
}

.group-4
{
  position: absolute;
 /* top: 228px;
  left: 470px;*/
  width: 48px;
  height: 54px;
  background-image: url(images/Group-03.png);
      ​​​​​​​background-repeat: no-repeat;
  background-size: contain;

  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
}

.polygon
{
  position: absolute;
 /* top: 228px;
  left: 470px;*/
  width: 50px;
  height: 50px;
  background-image: url(images/polygon-1.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
}

.subtract
{
  position: absolute;
  width: 98px;
  height: 30px;
  background-image: url(images/Subtract.png);
  background-size: cover;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
  z-index:6;
}

.rectangle
{
  position: absolute;
  width: 422px;
  height: 50px;
  background-image: url(images/Rectangle-25.png);
  background-size: cover;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
  z-index:6;
}

.mob-wer
{
  position: absolute;
  top: 18px;
  width: 140px;
  height: 30px;
  font-family: Montserrat-Bold;
  font-size: 18;
  letter-spacing: 0.05em;
  text-align: center;
  z-index:6;
}

.ellipse
{
  position: absolute;
  left: 61px;
  width: 10px;
  height: 10px;
  background-image: url(images/ellipse.png);
  background-size: cover;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
}

.treug
{
  position: absolute;
  left: 61px;
  width: 14px;
  height: 72px;
  background-image: url(images/markers.png);
  background-size: cover;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
}

.kv1
{
  position: absolute;
  top: -70px;
  left: 17px;
  width: 168px;
  height: 201px;
  background-image: url(images/kv1.png);
  background-size: cover;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
}

.kv2
{
  position: absolute;
  top: 264px;
  left: 514px;
  width: 168px;
  height: 201px;
  background-image: url(images/kv2.png);
  background-size: cover;
  background-position: center center;
  ​​​​​​​background-repeat: no-repeat;
}

.menu
{
	position: absolute;
 	top: 18px;
 	width: 100px;
 	height: 30px;
 	font-family: Montserrat-Regular;
 	font-size: 14;
 	letter-spacing: 0.05em;
 	cursor: pointer;
  z-index:6;
}

.cherta
{
	position: absolute;
 	left: 605px;
 	width: 76px;
 	height: 2px;
	background-image: url(images/ellipse.png);
  	background-size: cover;
  	background-position: center center;
}

.pm
{
	float: right;
	opacity: 0.5;
}

.pm:hover
{
	font-size: 16;
  font-family: Montserrat-Bold;
	opacity: 0.75;
}

/*Комментарий*/

.bd
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 20px;

  background-image: url(images/light_bg.webp);
  background-size: cover;
  background-position: center center;
}

.header
{
  position: fixed;
  top: 0px;
  width: 100%;
  height: 90px;
  background-color:#F9FCFF;
  opacity: 0.95;
  box-shadow: 0 5px 5px rgba(180,202,222,1);
 /* background-image: url(images/header.png);*/
  background-size: cover;
  background-position: center center;
  z-index:6;
}

.header-1
{
  position: fixed;
  top: 90px;
  width: 100%;
  height: 50px;
  background-color:#F9FCFF;
  opacity: 0.85;
  box-shadow: 0 5px 5px rgba(180,202,222,0.2);
 /* background-image: url(images/header.png);*/
  background-size: cover;
  background-position: center center;
  z-index:5;
}

.bd1
{
  position: fixed;
  top: 0px;
  width: 100%;
  height: 55px;
  background-color:white;
  background-size: cover;
  background-position: center center;
  z-index:4;
}

.footer
{
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 60px;
  background-color:#F9FCFF;
  opacity: 0.8;
  box-shadow: 0 -5px 5px rgba(180,202,222,0.5);
  background-size: cover;
  background-position: center center;
  z-index:5;
}

.footer-content
{
position: absolute;
top:0px;
left: 50%;
margin-left: -560px;
height:100%;
width:1120px;
z-index:10;
}

.logo
{
width: 104px;
height: 60px;
position: absolute;
top: 15px;
left: 18px;
background-image: url(images/Horizontal_logo.svg);
background-size: cover;
background-position: center center;
z-index:12;
}

.knopka-p
{
position: absolute;
top:426px;
left: 17px;
height:60px;
width:300px;
background-image: url(images/LightButtonBGActive.svg);
background-size: cover;
background-position: center center;
z-index:10;
cursor: pointer;
}

.knopka-p:hover
{
  background-image: url(images/LightButtonBGHover.png);
}

.content
{
position: absolute;
left: 50%;
height:600px;
width:820px;
z-index:1;
}

.popup_container{
  position: fixed;
  top: 100;
  left: 50%;
  margin-left: -590px;
  background: white;
  opacity: 1;
  width: 1180; /*Посмотрите на скролл*/
  height: 80%;
  overflow: scroll;
  overflow-x: hidden;
  z-index:12;
  visibility: hidden;
  box-shadow: 0 0 5px;
}

.close_pc
{
  position: fixed;
  top: 115px;
  left: 50%;
  margin-left: 470px;
  width: 80px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  font-family: Montserrat;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  font-size: 12;
  letter-spacing: 0.1em;
  background-color: rgba(255, 255, 255, 0.35);
  border: 1px solid grey;
  border-radius: 25px;
  cursor: pointer;
}

/* ==========================================================================
   Для формы
   ========================================================================== */

.close_form
{
  position: absolute;
  top: 2px;
  left: 620px;
  width: 80px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  font-family: Montserrat;
  font-weight: 400;
  color: rgba(22, 22, 22, 0.35);
  font-size: 12;
  cursor: pointer;
}

.popup_form{
  position: absolute;
      top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  margin: auto;
/*  top: 60;
  left: 50%;
  margin-left: -590px;*/
  background: rgba(255, 255, 255, 0);
  border-radius: 0px;
  opacity: 1;
  width: 700; /*Посмотрите на скролл*/
  height: 600px;
 /* overflow: scroll;*/
  z-index:12;
/*  visibility: hidden;*/
/*  cursor: pointer;*/
  box-shadow: 0 0 5px;
}

.ramka
{
  width: 100%;
  height: 100%;
  background: rgba(225, 255, 255, 0.65);
  position: absolute;
  top: 0;
  left: 0;
  z-index:11;
  visibility: hidden;
}

/*.div-block {
  position: static;
  display: block;
  width: 700px;
  height: 600px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0px;
  background-color: #f9fcff;
  text-align: center;
}

.div-block-2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.text-field {
  width: 400px;
  height: 40px;
  margin: 2px auto 0px;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(56, 48, 44, 0.2);
  border-radius: 0px;
  background-color: #f9fcff;
  font-family: Montserrat, sans-serif;
  font-style: normal;
  font-weight: 400;
}

.text-field-2 {
  border-style: solid;
  border-width: 2px;
  border-color: #3898ec;
  border-radius: 5px;
  background-color: #fff;
  font-family: Verdana, Geneva, sans-serif;
  font-style: italic;
  font-weight: 700;
}

.form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 500px;
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.div-block-3 {
  padding-top: 34px;
  padding-bottom: 34px;
  text-align: center;
}

.div-block-4 {
  padding-top: 36px;
  padding-bottom: 36px;
  text-align: center;
}

.submit-button {
  width: 300px;
  height: 60px;
  margin-top: 30px;
  margin-right: auto;
  margin-left: auto;
  border-style: solid;
  border-width: 0px;
  border-color: #3898ec;
  border-radius: 0px;
  background-image: url("../images/5ddb7b6856a2d63f435e7e98_LightButtonBGActive.svg");
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.05em;
}

.submit-button:hover {
  background-image: url("../images/5ddb7b6805da58165ea7bddf_LightButtonBGHover.png");
}*/

.form-block {
  margin-top: 20px;
  text-align: center;
}

/*.text-block {
  margin-top: 51px;
  font-family: 'Poiret One', sans-serif;
  font-size: 30px;
  line-height: 1.2em;
  text-indent: 0em;
}

.field-label {
  width: 400px;
  margin: 20px auto 0px;
  font-family: Montserrat, sans-serif;
  color: rgba(34, 34, 34, 0.75);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
}

.textarea {
  width: 400px;
  height: auto;
  margin-top: 2px;
  margin-right: auto;
  margin-left: auto;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(56, 48, 44, 0.2);
  background-color: #f9fcff;
  font-family: Montserrat, sans-serif;
}*/

.text-block-2 {
  font-family: Montserrat, sans-serif;
  font-size: 12px;
}


/*.div-block {
  position: static;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 600px;
  height: 600px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #fd8a8a;
  text-align: left;
}

.div-block-2 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.text-field {
  border: 3px solid #000;
  background-color: #95c317;
  font-family: Rubik-Regular;
  font-weight: 700;
}

.text-field-2 {
  border: 3px solid #000;
  background-color: #95c317;
  font-family: Rubik-Regular;
  font-weight: 700;
}

.form {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}*/