/*---------------------------------------------------------------------------------------------*/
/*    Квадрат для меню.    Но может стать прямоугольником.       */

.square {
  height: 30px;
   width: 60px;
background-color: rgb(221, 18, 18);
/*   height: fit-content;   */                           /*  скрывает - не отображает..   */ 
}








/*---------------------------------------------------------------------------------------------*/
/*  Задаёт шрифт и цвет шрифта во всём "body"  */
 body {
       font: 400 13px/18px 'Roboto', sans-serif;
      color: #222;
  }









/*---------------------------------------------------------------------------------------------*/
/*  Top menu      */

#navbar ul {
    display: none;
    background-color: #f90;     /*  #f90;    выпадающие меню  */   
    position: absolute;
    top: 100%;
  }
  
  #navbar li:hover ul { display: block; }
  
  #navbar, #navbar ul {
     margin: 0px;         /*  отступ (и слева и сверху)  меню    ( margin == надбавка, прибыль, моржа.)    */
    padding: 0px;         /*  расширение вверх и вниз   (padding == набивка, заполнение)      */
    list-style-type: none;
  }
  
  #navbar {
    height: 30px;
    background-color:  rgba(0, 118, 199, 1);       /*  #666;  */
    padding-left: 15px;     /* *** Левый отступ перед 1-й ячейкой горизонтального меню.   (было 25px) */
    min-width: 470px;       /* *** Минимальная ширина ячейки горизонтального меню. (было 470px) */
  }
  #navbar li {
    float: left;
    position: relative;
    height: 100%;
  }
  #navbar li a {
    display: block;
    padding: 6px;
    width: 100px;
    color: #fff;
    text-decoration: none;
    text-align: center;
  }
  #navbar ul li { float: none; }
  #navbar li:hover { background-color: #f90; }     /* #f90;  - цвет фона горизонтальных меню  */ 
  #navbar ul li:hover { background-color: rgb(110, 108, 108); }     /*  #666;  - чвет фона при наведении на выпадающее меню  */





  element.style {
   }
 


   .footer .block {
      text-align: center;
           color: #fff;
         padding: 10px 0;       /* padding = набивка - это отступ сверху */
          height: 50px;         /* height = высота   - это отступ снизу  (странно, но так!) */
       }




       .block {
        display: inline-block;
        width: 100%;
        max-width: 1200px;
        min-width: 960px;
        margin: auto;
        text-align: left;
        line-height: 18px;
    }
/*---------------------------------------------------------------------------------------------*/
    








/*---------------------------------------------------------------------------------------------*/
/*  footer = нижний колонтитул   */            /*  Стили для нижнего блока - подвала  */   

/*  Для всего нижнего блока  */
.footer {                                
         background: rgba(0, 118, 199, 1);   /* цвет фона как в ротек   rgba(0, 118, 199, 1);  */     /*было rgba(2, 4, 143, 0.5);*/
         text-align: center;                   /* выравнивание текста по центру */
              color: #fff;                   /* цвет текста */
            padding: 30px 0;                   /* padding = набивка - это отступ сверху */
             height: 50px;                     /* height = высота   - это отступ снизу  (странно, но так!) */
    text-decoration: none;                     /* none - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.   */
  }


/*  Для строки    a - абзаца.  */
.footer a {                              
              color: #fff;           /* задаёт белый цвет для синих ссылок типа: email: rotek@telecomsite.ru      #fff; */
    text-decoration: underline;        /*  underline - Устанавливает подчеркнутый текст (пример).   - касается томера телефона...    */ 
  }

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






/*  ---------------   Кусочки из сайта Telecomsite.ru   -------------     */
.block-wrap__blue {   
                   background-color: #0076c7;     /*  Подчёркивание синим   */
                   }

.footer .block {    
        text-align: center;      
             color: #fff;  
           padding: 30px 0;
            height: 50px;
    }

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





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


@media (max-width: 1199.98px) 
{  
    .footer {                                
        background: rgb(67, 143, 243);    /* цвет фона как в ротек   rgba(0, 118, 199, 1);  */     /*было rgba(2, 4, 143, 0.5);*/
        text-align: center;                /* выравнивание текста по центру */
             color: #fff;                /* цвет текста */
           padding: 30px 0;                /* padding = набивка - это отступ сверху */
            height: 50px;                  /* height = высота   - это отступ снизу  (странно, но так!) */
   text-decoration: none;                  /* none - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.   */
      }

}

@media (max-width: 991.98px) 
{  

    .footer {                                
        background: rgb(94, 168, 76);   /* цвет фона как в ротек   rgba(0, 118, 199, 1);  */     /*было rgba(2, 4, 143, 0.5);*/
        text-align: center;               /* выравнивание текста по центру */
             color: #fff;               /* цвет текста */
           padding: 30px 0;               /* padding = набивка - это отступ сверху */
            height: 50px;                 /* height = высота   - это отступ снизу  (странно, но так!) */
   text-decoration: none;                 /* none - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.   */
      }


}

@media (max-width: 767.98px) 
{  
    .footer {                                
        background: rgb(131, 136, 68);  /* цвет фона как в ротек   rgba(0, 118, 199, 1);  */     /*было rgba(2, 4, 143, 0.5);*/
        text-align: center;               /* выравнивание текста по центру */
             color: #fff;               /* цвет текста */
           padding: 30px 0;               /* padding = набивка - это отступ сверху */
            height: 50px;                 /* height = высота   - это отступ снизу  (странно, но так!) */
   text-decoration: none;                 /* none - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.   */
      }

}

@media (max-width: 575.98px) 
{  
    .footer {                                
        background: rgb(85, 182, 185);   /* цвет фона как в ротек   rgba(0, 118, 199, 1);  */     /*было rgba(2, 4, 143, 0.5);*/
        text-align: center;                /* выравнивание текста по центру */
             color: #fff;                /* цвет текста */
           padding: 30px 0;                /* padding = набивка - это отступ сверху */
            height: 50px;                  /* height = высота   - это отступ снизу  (странно, но так!) */
   text-decoration: none;                  /* none - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.   */
      }


}