/*============================================================================*/
/* Page Footer
/*============================================================================*/
footer {                          /* body = 100vh и тянущийся контейнер feeder обеспечивают прилипание футера к нижнему краю экрана */
  padding-top:20px;
  background:rgb(73,109,131);     /* light-pale-blue */
  flex-shrink: 0;                 /* запись для Chrome и Opera https://css-live.ru/articles/uporyadochivanie-bagov-krossbrauzernosti-flexbox.html */
  z-index:3;                      /* поверх фиксированных фона и фильтра фона сайта */
  }
  
.frow {                 
                        /* align-items: flex-start; align-items: center; последний имеет смысл при задании высоты контейнера */
  display: flex;        /* элементы - контейнеры div внутри контейнера .box растягиваются по горизонтали   */
  flex-direction:row;   /* если для них задано свойство flex:1 */  
                        /* в данном шаблоне растягивание отдельных элементов заменено выравниванием промежутков между ними по горизонтали */  
  flex-wrap: wrap;      /* элементы - контейнеры fbox внутри контейнера .frow распределяются по горизонтали */
                        /* если места не хватает, элементы не сжимаются, а переходят в нижние ряды */
  justify-content: center;      /* основная (продольная) ось - группируем блоки в центре */  
  align-items: flex-start;      /* поперечная ось - блоки группируются  от верхнего края контейнера .frow */
  }

.frow .fbox {                 /* это значения для контейнеров при минимальной ширине экрана*/
  height: 200px;              /* width:300px; ширина каждого блока задается отдельно ждя каждого media-запроса */
  margin:4px 4px 8px 4px;     /* для отладки можно заменить на vmargin-bottom:10px   */
  border:none;                /* */ 
  background:transparent;     /* background: rgba(211,201,194,0.4); */
  }
  
.frow .fbox.cr {height:auto; margin:0;}        /* copywrite */
  
.fbox ul {margin:20px;}  

.fbox ul {    
    font-family:  'Open Sans',sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    text-transform:uppercase;
    color: rgba(255,255,255,0.9);    /* 0.4 -тусклый 0.8 - яркий */
    }
    
.fbox.cr ul {margin:10px;}                   /* copywrite */
    
/*.fbox ul li,*/ 
.fbox ul li a{
  font-family: 'Open Sans',sans-serif!important;
  font-size: 16px;
  font-weight: 300!important; 
  line-height: 2.0!important;
  text-transform:none; 
  color: rgba(255,255,255,0.5);    /* 0.4 -тусклый 0.8 - яркий */
  }
      
.fbox ul li a:hover {
  font-weight: 300!important; 
  cursor:pointer;
  color: rgba(255,255,255,1);    /* 0.4 -тусклый 0.8 - яркий */
 }
 
.fbox ul li a span {                 /* маленькая стредка в span появляется и выдвигается вправо при наведении курсора на пункт меню */
  display:inline-block;
  -o-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  opacity:0.1;
  }
.fbox ul li a:hover span {          /* маленькая стредка в span появляется и выдвигается вправо при наведении курсора на пункт меню */
  display:inline-block;
  -o-transform: translateX(6px);
  -ms-transform: translateX(6px);
  -moz-transform: translateX(6px);
  -webkit-transform: translateX(6px);
  transform: translateX(6px);
  opacity:1;
  } 
  
.social-icon {height:32px; width:32px; margin:0 5px;} 
.social-icon a img {width:100%;}  

/* для смартфонов */  
#fbox1 {                                       /* блок с копирайтом */
  width:90%;                                   /* на узком экране - это нижний широкий блок с центровкой текста*/
  -webkit-order: 1;
  order: 1;                                    /* этот нижний блок при расширении экрана станет самым левым (а не правым) */
  border-top:1px solid rgba(211,201,194,0.4);  /* для нижнего блока разделительная линия очерчена сверху */
  }

#fbox1 {text-align:center;}    
#fbox2, #fbox3 {                               /* все блоки выстроены в столбик */
  width:260px;
  }
   
#fbox2 ul, #fbox3 ul {margin-left:80px}        /* пункты меню и заголовле сдвинуты влево */

@media (min-width:599px) {{}                   /* для смартшетов и планшетов */
  #fbox2 {width:220px;}                        /* два узких блока над нижним широким */
  #fbox3 {width:250px;}            
  #fbox2 ul, #fbox3 ul {margin-left:60px}
  }
  
@media (min-width:939px) {{}                   /* для широких экранов ПК,  все три блока - в линию */
  #fbox1 {
  width:380px;
  -webkit-order: 0; 
  order: 0;                                    /* нижний блок с копирайтом становится левым */
  border:none;                                 /* удаляем верхнюю границу */
  border-right:0px solid rgba(211,201,194,0.4);/* добавляем правую границу */
  }            
  
  #fbox1 {text-align:left;}                    /* убираем центровку текста для блока с копирайтом */
  
}
/* end of file */