<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Style");
?>.super
{
display: grid;
grid-template-columns: [c-start] auto [c2] auto [c3] 50px [c4] auto [c5] auto [c-end];
grid-template-rows: [r-start] auto [r2] auto [r3] auto [r4] auto [r5] auto [r6] auto [r7] auto [r-end];
}

.super
{
display: -ms-grid;
display: grid;
-ms-grid-columns: [c-start] auto [c2] auto [c3] 50px [c4] auto [c5] auto [c-end];
-ms-grid-rows: [r-start] auto [r2] auto [r3] auto [r4] auto [r5] auto [r6] auto [r7] auto [r-end];
grid-template-columns: [c-start] auto [c2] auto [c3] 50px [c4] auto [c5] auto [c-end];
grid-template-rows: [r-start] auto [r2] auto [r3] auto [r4] auto [r5] auto [r6] auto [r7] auto [r-end];
}

.part1
{
  padding-right: 20px;
  text-align: right;
  -ms-grid-column: 2;
  -ms-grid-row: 1;
  grid-column-start: c2;
  grid-column-end: c3;
  grid-row-start: r-start;
  grid-row-end: r2;
}

.part2
{
  -ms-grid-column: 4;
  -ms-grid-row: 2;
  grid-column-start: c4;
  grid-column-end: c5;
  grid-row-start: r2;
  grid-row-end: r3;
}

.part3
{
  -ms-grid-column: 2;
  -ms-grid-row: 3;
  padding-right: 20px;
  text-align: right;
  grid-column-start: c2;
  grid-column-end: c3;
  grid-row-start: r3;
  grid-row-end: r4;
}

.part4
{
 -ms-grid-column: 4;
 -ms-grid-row: 4;
 grid-column-start: c4;
 grid-column-end: c5;
 grid-row-start: r4;
 grid-row-end: r5;
}

.part5
{
  -ms-grid-column: 2;
  -ms-grid-row: 5;
  padding-right: 20px;
  text-align: right;
  grid-column-start: c2;
  grid-column-end: c3;
  grid-row-start: r5;
  grid-row-end: r6;
}

.part6
{
  -ms-grid-column: 4;
  -ms-grid-row: 6;
  grid-column-start: c4;
  grid-column-end: c5;
  grid-row-start: r6;
  grid-row-end: r7;
}

.part7
{
  -ms-grid-column: 2;
  -ms-grid-row: 7;
  padding-right: 20px;
  text-align: right;
  grid-column-start: c2;
  grid-column-end: c3;
  grid-row-start: r7;
  grid-row-end: r-end;
}

.list_item1
{
  -ms-grid-column: 3;
  -ms-grid-row: 1;
  grid-column-start: c3;
  grid-column-end: c4;
  grid-row-start: r-start;
  grid-row-end: r2;
}

.list_item2
{
  -ms-grid-column: 3;
  -ms-grid-row: 2;
  grid-column-start: c3;
  grid-column-end: c4;
  grid-row-start: r2;
  grid-row-end: r3;
}

.list_item3
{
  -ms-grid-column: 3;
  -ms-grid-row: 3;
  grid-column-start: c3;
  grid-column-end: c4;
  grid-row-start: r3;
  grid-row-end: r4;
}

.list_item4
{
  -ms-grid-column: 3;
  -ms-grid-row: 4;
  grid-column-start: c3;
  grid-column-end: c4;
  grid-row-start: r4;
  grid-row-end: r5;
}

.list_item5
{
  -ms-grid-column: 3;
  -ms-grid-row: 5;
  grid-column-start: c3;
  grid-column-end: c4;
  grid-row-start: r5;
  grid-row-end: r6;
}

.list_item6
{
  -ms-grid-column: 3;
  -ms-grid-row: 6;
  grid-column-start: c3;
  grid-column-end: c4;
  grid-row-start: r6;
  grid-row-end: r7;
}

.list_item7
{
  -ms-grid-column: 3;
  -ms-grid-row: 7;
  grid-column-start: c3;
  grid-column-end: c4;
  grid-row-start: r7;
  grid-row-end: r-end;
}

.start-line
{
  margin-top: 25px;
  margin-left: 11px;
  display: block;
  width: 4px;
  background-color: #2492e8;
}

.mid-line
{
  display: block;
  width: 4px;
  background-color: #2492e8;
  margin-left: 11px;
}

.end-line
{
  display: block;
  width: 4px;
  height: 20px;
  margin-left: 11px;
  background-color: #2492e8;
}

.for-span {
  top: 10px;
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2492e8;
}

.for-b
{
  padding-bottom: 8px;
  display: block;
}

.vmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 4000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.ievmodal {
  display: none; /* Hidden by default */
  -ms-grid-columns: 100%;
  -ms-grid-rows: 80%;
  position: fixed; /* Stay in place */
  z-index: 4000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.txtarea
{
  resize: none;
  height: auto;
}

.phone
{
  font-size: 30px !important; 
  height: 40px;
  line-height: 45px !important;
}

.for-input
{
  display: block;
  width: 99%;
  border: 0;
  font-size: 18px;
  line-height: 27px;
  box-shadow:none;
}

.for-form-btn
{
  font-size: 20px;
  padding: 11px 38px;
  display: block;
  margin: 0 auto;
  width: 100%;
  border-radius: 50px;
  background-color: #16398e;
  line-height: 24px;
  border-color: #16398e;
  color: white;
  outline: none;
}

.for-form-btn:hover
{
  box-shadow: none;
  background-color: #143380;
  border-color: #143380;
  cursor: pointer;
}

.for-input:focus
{
   outline: none;
}

/* Modal Content/Box */
.vmodal-content {
  display: block;
  width: 35%;
  background-color: #fff;
  margin: 4% auto;
  border-radius: 10px;
}

.vmodal-header
{
  display: block;
  position: absolute;
  margin: 8px;
  padding: 12px 22px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.55px;
  width: 480px;
  height: 80px;
  line-height: 46px;
  background-color: white;
}

.me-label
{
  display: inline-block;
  font-weight: 100;
  font-size: 8px;
  color: #a5a6a9;
  letter-spacing: .6px;
  margin-bottom: 22px;
  text-transform: uppercase;
}

.for-form
{
  padding: 12px 35px;
}

.form-group
{
  position: relative;
  margin-bottom: 16px;
  border-bottom: 2px solid #a5a6a9;
  box-sizing: border-box;
  padding-bottom: 10px;
}

/* The Close Button */
.vclose {
  display: block;
  width: 40px;
  height: 40px;
  color: #6f8090;
  z-index: 2;
  margin: 8px;
  margin-left: auto;
  text-align: center;
  font-size: 68px;
  line-height: 40px;
  background-color: rgba(255,255,255,0.4);
  border-radius: 0px;
}

.vclose:hover,
.vclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 

.fail {
display: block;
color: #732134;
background-color: #f8d7da;
border-color: #f5c6cb;
line-height: 24px;
border-radius: .25rem;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
}

.succ {
display: block;
color: #217321;
background-color: #d8f8d8;
border-color: #c7f5c7;
line-height: 24px;
border-radius: .25rem;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
}


.page-mail-btn
{
  font-size: 20px;
  display: block;
  margin: 0 0 0 auto;
  width: 320px;
  height: 58px;
  border-radius: 50px;
  background-color: #16398e;
  line-height: 24px;
  border-color: #16398e;
  color: white;
}

.page-mail-btn:hover
{
  box-shadow: none;
  background-color: #143380;
  border-color: #143380;
  cursor: pointer;
}

@media screen and (max-width: 720px){
.vmodal-content {
  display: block;
  width: 90%;
  background-color: #fff;
  margin: 4% auto;
  border-radius: 10px;
}

.vmodal-header
{
  display: block;
  position: absolute;
  margin: 3px;
  padding: 4px 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.55px;
  width: 180px;
  height: 30px;
  line-height: 16px;
  background-color: white;
}

.me-label
{
  display: inline-block;
  font-weight: 100;
  font-size: 8px;
  color: #a5a6a9;
  letter-spacing: .6px;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.for-form
{
  padding: 4px 12px;
}

.form-group
{
  position: relative;
  margin-bottom: 6px;
  border-bottom: 1px solid #a5a6a9;
  box-sizing: border-box;
  padding-bottom: 3px;
}

/* The Close Button */
.vclose {
  display: block;
  width: 15px;
  height: 15px;
  color: #6f8090;
  z-index: 2;
  margin: 3px;
  margin-left: auto;
  text-align: center;
  font-size: 26px;
  line-height: 15px;
  background-color: rgba(255,255,255,0.4);
  border-radius: 0px;
}

}<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>