@font-face {
    font-family: Roboto-Regular; /* ��������� ������ */
    /* src: url(fonts/ProximaNova-Regular/ProximaNova-Regular.eot); ��� IE5-8 */
    src: local(Roboto-Regular), url(fonts/Roboto/Roboto-Regular.ttf); /* ��� ��������� ��������� */
 }
 @font-face {
   font-family: Roboto-Light; /* ��������� ������ */
   /* src: url(fonts/ProximaNova-Regular/ProximaNova-Regular.eot); ��� IE5-8 */
   src: local(Roboto-Light), url(fonts/Roboto/Roboto-Light.ttf); /* ��� ��������� ��������� */
}
@font-face {
   font-family: Roboto-Thin; /* ��������� ������ */
   /* src: url(fonts/ProximaNova-Regular/ProximaNova-Regular.eot); ��� IE5-8 */
   src: local(Roboto-Thin), url(fonts/Roboto/Roboto-Thin.ttf); /* ��� ��������� ��������� */
}

*, *:after, *:before {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   /* transition: .5s ease-in-out; */
   /* ������� ��������� ��������� ��� ���� ��������� ��������*/
}
/* ul {
   list-style: none;
} */
a {
   text-decoration: none;
   outline: none;
   
}
h1, h2, h3, h4, h5, h6 {
   font-family: Roboto-Regular;
   font-weight: normal;
   /* letter-spacing: 1px; */
}
body {
   font-family: Roboto-Regular;
   font-size: 16px;
   line-height: 1;
   color: #333333;
   /* margin: 0;
   padding: 0; */

}
/* ������� ������� ������ ��� ���� �����������, ������ ������� ������ ��������� �������� ��������� */
header:after, .top-block::after, .container:after, footer:after, #subscribe:after {
   content: "";
   display: table;
   clear: both;
}
/* �����*/
header {
   width: 100%;
   background: white;
   box-shadow: 3px 3px 3px rgba(0, 0, 0, .15);
   padding: 0 0 1px 0;
   position: relative;
   z-index: 100;
}
.top-block{
   margin: 0 auto;
   width: 100%;
   height: 39px;
   display: flex;
   align-items: center;
   justify-content: right;
   background-color: #eeeeee;
}

.tel{
   display: flex;
   align-items: center;
   margin-right: 40px;
}
.tel p{
   color: #3C3D41;
   margin-left: 10px;
}
/* ���� */
.nav {
   margin: 0 auto;
   padding: 10px 0;
   height: auto;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.logo {
   display: flex;
   align-items: center;
   float: left;
   padding-left: 10px;
}

.brand{
   font-size: 18px
}
.brand a {
   text-decoration: none;
   color: inherit;
}

.menu {
   float: right;
   display: flex;
   /* position: absolute; */
   /* margin-top: 3px; */

   /* transform: translate(0, 100%);    */
}

.menu a {
   white-space: nowrap;
   color: #333333;
   text-align: left;
   margin-right: 30px;
   padding-top: 3px;
   padding-bottom: 3px;
   /* text-transform: uppercase; */
   letter-spacing: 1px;
   /* font-weight: 600; */
   /* display: block; */
   line-height: 40px;
}

.menu a:hover {
   border-bottom: 2px solid #fa0000;
   /* color: rgb(97, 165, 253) */
   /* text-shadow: rgb(255, 0, 0) 1px 1px 2px; */
   /* box-shadow: inset 1px 1px 2px 0px rgba(0,0,0,0.2);
   background-color: rgba(0, 0, 0, .05); */
}
.menu li:last-child {
   margin-right: 0;
}
.active{
   border-bottom: 2px solid #fa0000;
}
.submenu{
   display: none;
   background-color: #f0f0f0;
   box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .15), inset 0px -1px 1px rgba(0, 0, 0, .15);
   text-align: left;
}
.submenu a{
   border-bottom: 1px solid rgba(0, 0, 0, .1);
   /* background-color: #eeeeee;
   box-shadow: inset 0 -3px 3px -3px (rgba(0, 0, 0, .1)); */
}
.submenu a:last-child{
   border-bottom: 0px solid #868686;
}
.dropdown:hover .dropdown-content {display: block;}

/* ?????? */
.footer{
   font-family: Roboto-Light;
   padding: 0 20px 0 20px;
   height: auto;
   width: 100%;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: left;
   justify-content: space-between;
   /* flex-direction: row-reverse */
}
.write{
   display: flex;
   align-items: center; 
   margin: 3px 0; 
}
.write a{
   padding-right: 20px;
}

/* ����� ������ */
#searchform {
   margin: 2px 20px 2px 46px;
   display: inline-block;
   /* position: absolute; */
}
#searchform input {
   width: 170px;
   float: left;
   border: none;
   padding-left: 10px;
   height: 30px;
   overflow: hidden;
   outline: none;
   color: #9E9C9C;
   background-color: transparent;
   font-style: italic;
}
#searchform button {
   background: transparent;
   height: 30px;
   border: none;
   position: absolute;
   right: 10px;
   color: #EF5A42;
   cursor: pointer;
   font-size: 18px;
}
#searchform input:focus {
   outline: 1px solid #c4c4c4;
}

/* ������ ������������ ����, ������������ ��� ������ 768px */
.nav-toggle {
   display: none;
   position: relative;
   float: right;
   width: 40px;
   height: 40px;
   margin: 0px 20px 0px 0px;
   background: transparent;
   cursor: pointer;
}
.nav-toggle span {
   display: block;
   position: absolute;
   top: 19px;
   left: 8px;
   right: 8px;
   height: 2px;
   background: rgb(114, 114, 114);
}
.nav-toggle span:before, .nav-toggle span:after {
   content: "";
   position: absolute;
   display: block;
   left: 0;
   width: 100%;
   height: 2px;
   background: rgb(114, 114, 114);
}
.nav-toggle span:before {
   top: -7px;
}
.nav-toggle span:after {
   bottom: -7px;
}
/* �����, ������� ����� �������� � �������� ���� ��� ������� �� ������ � ������� ������� ����*/
.menu.active {
   max-height: max-content;
   box-shadow: inset 0px 3px 3px rgba(0, 0, 0, .15), 0px 3px 3px rgba(0, 0, 0, .15);
   margin-top: 5px;
}
/* ???? */
.container {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   height: auto;
   width: 100%;
}
.containerRow{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: left;
   /* gap: 10px 10px; */
   margin: 0 auto;
   height: auto;
   width: 100%;
}


/* ����� ��������� */
.posts-list {
   margin: 40px 30px;
   float: none;
   display: flex;
   flex-direction: column;
   line-height: 1.5;
}
.post-text-left{
   text-align: left;
}
.post-text-center{
   text-align: center;
}

/* ���� ��� ������ */
.post {
   margin-bottom: 70px;
}
.post-content p {
   line-height: 1.5;
   padding-bottom: 1em;
}
.post-image {
   margin-bottom: 30px;
}

.post-title {
   margin-bottom: 12px;
   font-size: 26px;
   color: black;
   font-family: Roboto-Light;
   /* font-weight: 600; */
   letter-spacing: 1px;
   text-align: center;
}


/* ������ ��������� */
aside {
   width: 33%;
   float: right;
}
/* ���� ��� �������� */


.post-image-small {
   width: 30%;
   float: left;
   margin-right: 15px;
}


footer {
   padding: 30px 10px;
   /* background: #3C3D41; */
   background-color: black;
   color: white;
}
.footer-col {
   /* width: 33.3333333333%;
   float: left; */
}
.footer-col a {
   color: white;
}
.footer-col:last-child {
   /* text-align: right; */
}


@media (max-width: 768px) {
   /* ���������� ������ ��� ������������ ������� ��������� */
   .nav-toggle {
      display: block;
   }
   /* header {
      padding: 10px 0;
   } */
   /* �������� ������� ����, �������� ���������, ������������� ���, ������� �� ������ ����� ����� */
   .menu {
      display: block;
      max-height: 0;
      background: white;
      float: none;
      position: absolute;
      overflow: hidden;
      top: 117px;
      right: 0;
      left: 0;
      margin: 0;
      padding: 0;
      z-index: 3;


      /* border-bottom: 1px solid #EBEBE3; */
      margin-right: 0;
   }
   .menu a{
      padding-left: 10px;
      text-align: left;
      margin: 0;
   }
   /* ������ �������� ������ ��������, ����� ��� ������������� ���� ��� ������ */
   .menu div {

      border-bottom: 1px solid #EBEBE3;
      margin-right: 0;
   }
   .menu a:hover{
      border-bottom: 1px solid rgba(0, 0, 0, .1);
   }
   .active{
      border-bottom: none;

   }
   .submenu{
      display: flex;
      flex-direction: column;
   }
   .dropdown:hover .dropdown-content {visibility: hidden;}
   /* �������� ��������� ����� � ������ �������, ������������� �� ������ 100%*/
   /* .posts-list, aside {
      width: 100%;
      float: none;
   } */
   
   /* .container {
      flex-direction: row;
      justify-content: center;

   } */
   /* .posts-list {
      flex-direction: row;
      justify-content: center;
   } */
   .footer{
      flex-direction: column;
      align-items: flex-start;
   }
   /* .footer-col {
      float: none;
      margin-bottom: 20px;
      width: 100%;
      text-align: center;
   }
   .footer-col:last-child {
      text-align: center;
      margin-bottom: 0;
   } */
}

@media (max-width: 480px) {
   /* �������� ��������� ��� �������� � ����������� �� ������*/
   .header{
      position: fixed;
   }
   .top-block{
      /* margin: 0 auto;
      width: 100%; */
      display: none;
   }
   .nav{
      padding: 10px 0px;
      height: auto;
   }
   .logo {
      margin: 0;
   }
   /* .logo span {
      margin: 0 2px;
   } */
   /* ������������� ���� �� ������������� ������ ����� */
   .menu {
      top: 75px;
      
      
   }
   /* ������������� ����� ������ �� ������ ���� */
   #searchform {
      float: left;
      margin-left: 0;
   }
   .container {
      padding-top: 80px;
   }
   .containerRow{
      flex-direction: column;
      align-content: center;
   }
   
  
  
   
  
  
 
}
/*���������� ����*/
 .dropdown {
   position: relative;
   /* display: inline-block; */
 }
 
 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #ffffff;
   margin-top: -8px;
   min-width: 300px;
   margin-left: -20px;
   border-top: 2px solid #fa0000;
   border-radius: 0px 0px 7px 7px;
   /* border: 1px solid #c2c2c2; */

   box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }
 
 .dropdown-content a {
   color: black;
  
   /* padding: 5px 5px; */
   text-decoration: none;
   display: block;
   border-bottom: 1px solid #999;
   padding-left: 20px;
   padding-right: 20px;
   margin-right: 0px;
   min-width: 300px;
 }
 .dropdown-content a:last-child {
   border-bottom: 0px;
 }

 
 .dropdown-content a:hover {
   background-color: #ddd;
   border-bottom: 1px solid #999;
   }
 
 .dropdown:hover .dropdown-content {display: block;}