/*=====================================================================================================================================================*/
/*   Стилизация тела всех страниц                                                                                                                      */
/*=====================================================================================================================================================*/
body {
    background-image:url(/Images/Texture/groovepaper.png);
    box-sizing: border-box;
    text-align: center; 
}
/* For smartfone */
  body p  { font-size: 14px; }
  body h1 { font-size: 24px; }
  body h2 { font-size: 18px; }
  body h3 { font-size: 16px; }
/* For tablet */
@media screen and (min-width: 768px) {
  body p  { font-size: 15px; }
  body h1 { font-size: 28px; }
  body h2 { font-size: 22px; }
  body h3 { font-size: 17px; }
} 
/* For desktop */
@media screen and (min-width: 1200px) {
  body p  { font-size: 16px; }
  body h1 { font-size: 36px; }
  body h2 { font-size: 24px; }
  body h3 { font-size: 19px; } 
}

/*
 Extra small devices (phones, 600px and down) 
@media only screen and (max-width: 600px) {} 
 Small devices (portrait tablets and large phones, 600px and up) 
@media only screen and (min-width: 600px) {} 
 Medium devices (landscape tablets, 768px and up) 
@media only screen and (min-width: 768px) {} 
 Large devices (laptops/desktops, 992px and up) 
@media only screen and (min-width: 992px) {} 
 Extra large devices (large laptops and desktops, 1200px and up) 
@media only screen and (min-width: 1200px) {} 
*/

/* Отладка =====
body div,header,article,aside,footer {
    border: 1px solid red;
}

*/
.main p {
    font-style: italic;
    color:rgb(52, 129, 199); 
}
/*=====================================================================================================================================================*/
/*   Стилизация коллажа из логотипов на главной странице                                                                                                                      */
/*=====================================================================================================================================================*/
.div-collage {
    width:100%; 
    height: 900px;
    position: relative;
}
.img-collage {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%; 
    height: auto;
    cursor:pointer;
}
/*=====================================================================================================================================================*/
/*   Стилизация тела всех страниц                                                                                                                      */
/*=====================================================================================================================================================*/
/* Описание главного контейнера
В нашем случае имеется пять элементов  - header, main, aside1, aside2, footer
Элементы могут размещаться по горизонтали и могут переходить на следующую строку. Текст центрируется.
*/
.flex-container {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
/* Все элементы-дети контейнера могут расширяться до 1 и базовый размер у них 100% */
.flex-container > div,header,article,aside,footer {
    padding: 10px;
    flex: 1 1 100%;
}
/*=====================================================================================================================================================*/
/*   Стилизация заголовка (все страницы)                                                                                                           */
/*=====================================================================================================================================================*/
.header {
    width: auto;
    background-image: url(/Images/Texture/Panorama.jpg); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; 
    box-shadow: 10px 10px 5px grey;
}
.top_hd {
    height: 150px;
}
.bbblogo_div {
    float:left; 
    width: 7%;
    min-width: 80px;
}
.bbblogo_link {
    width:100%;
    text-decoration: none;
    align-items: center;
}
.bbblogo_fig {
     margin: 0px;
     padding: 0px;
}
.bbblogo_img {
    width:100%; 
    align-items: center;
    cursor:pointer;
}
.bbblogo_figcap {
     margin-top: -5px;
     font-size: 1.3vw;
     text-decoration: none;
}
.issuulogo {
    width: 5%; 
    float: right;
}
.header p {
    padding: 0px;
    margin: 1px;
    color:rgb(255, 255, 255); 
}
.header h1 {
    color:rgb(255, 255, 255); 
    text-shadow: 3px 2px #bfbfbf; 
    clear: left;
    padding: 0px;
    margin:  0px;
}
.header a {
    color:rgb(255, 255, 255); 
}
.regparm {
    display: -webkit-flex;
    display: flex;  
    flex-direction: column;
    width: auto;
    float:right; 
}
.regparm div { 
    height: auto;
    margin: 1px;
    padding: 0px;
}
.useravatar {
    width: 25px;
    height: 25px;
/* End sizing */      
    cursor: pointer;
    margin: 0px;
    padding: 0px;
}
.useravatarbd {
    width: 25px;
    height: 25px;
/* End sizing */
    display: inline-block; 
    margin: 0px;
    padding: 0px;
}
.usergreat {
    width: 160px;
/* End sizing */  
    display: inline-block;
    height: auto;
    margin: 0px;
    padding: 0px;
    text-align: center;
    line-height: 0.8;
    color: white;
}
.userexit {
    width: 25px;
    height: 25px;
/* End sizing */    
    margin: 0px;
    padding: 0px;
    cursor: pointer;
}
.userexitbd {
    width: 25px;
    height: 25px;
/* End sizing */    
    display: inline-block; 
    margin: 0px;
    padding: 0px;
}
#regpass {
     cursor: pointer;
     text-decoration: underline;
     font-family: "Times New Roman", Times, serif;
     font-style: normal;
}

/*=====================================================================================================================================================*/
/*   Стилизация панелей каталогов и сайтов                                                                                                      */
/*=====================================================================================================================================================*/
.link-flex {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
    justify-content: center;
    align-items: flex-start;
}
.link-flex-bottom {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    text-align: center;
    justify-content: center;
    align-items: flex-end;
}
.link-flex > div {
    padding: 10px;
    flex: 1 1 1%; 
}
.link-title {
    width: 100%;
}
.link-title-text {
    color: rgb(52, 129, 199);
    text-shadow: 2px 1px #bfbfbf;
}
.link-main {
/*    padding: auto; */
    padding: 5px;
}
.link-link{
    text-decoration: none;
}
.link-link-cap{
   
    text-decoration: none;
    color:rgb(52, 129, 199);
/*     width: 70px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color:rgb(52, 129, 199);
    margin: 2px auto; */
}
.link-img-catalog {
    width: 100%; 
    box-shadow: 7px 7px 2px grey;
    height: auto;
    margin: 0px;
    padding: 0px;
}
.link-img-site {
    width: 100%;
    box-shadow: 7px 7px 2px grey;
    
    height: auto;
    margin: 0px;
    padding: 0px;
}
.link-langflag {
    width: 100%;
    height: 100%;
}
.link-img-bd-cat {
    width: 60px;
    height: auto;
    margin: 0px auto;
/*    padding: auto; */
    position: relative;
}
.link-img-bd-site {
    width: 70px;
    height: auto;
    margin: 0px auto;
/*     padding: auto; */
    position: relative;   
}
.link-flg-bd {
    height: 25px;
    width: auto;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.link-fig {
    
    text-align: center;
    margin: 0px;
    padding: 0px;
}
.link-figcap-cat {
    width: 60px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color:rgb(52, 129, 199);
    margin: 2px auto;
/*    border: 2px solid green; */
}
.link-figcap {
    width: 70px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color:rgb(52, 129, 199);
    margin: 2px auto;
/*  border: 2px solid green; */
}
/* For smartfone */

/* For tablet */
@media screen and (min-width: 768px) {
.link-figcap-cat {
    width: 80px;
    font-size: 14px;
}
.link-figcap {
    width: 90px;
    font-size: 14px;
}
.link-img-bd-cat {
    width: 80px;
}
.link-img-bd-site {
    width: 90px;
}
.link-flg-bd {
    width: 30px;
}
} 
/* For desktop */
@media screen and (min-width: 1200px) {
.link-figcap-cat {
    width: 100px;
    font-size: 16px;
}
.link-figcap {
    width: 110px;
    font-size: 16px;
}
.link-img-bd-cat {
    width: 100px;
}
.link-img-bd-site {
    width: 110px;
}
.link-flg-bd {
    width: 35px;
}
}



/*=====================================================================================================================================================*/
/*    Стилизация панели каталогов (все страницы)                                                                                            */
/*=====================================================================================================================================================*/   
/*
.item-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.catalog {
    width: 5.86vw; 
    height: 7.81vw; 
    box-shadow: 0.46vw 0.46vw 0.13vw grey;
    margin: 0px 0.33vw 0.85vw 0.33vw;
    padding: 0px;
}  
.catalog:hover {
    width: 6.51vw; 
    height: 8.36vw;
    margin : 0px;
    padding: 0px;
}
.firmname {
    font-style: italic;
    font-weight: bold;
    font-size: 1.04vw;
    color:rgb(52, 129, 199); 
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    width: auto;
    text-align: center;
   
}
.firmname-div {
    width: 100%;
}
*/
.buttondiv {
    width: auto;
    padding: 1.30vw;
}
/*=====================================================================================================================================================*/
/*   Стилизация панели сайтов (все страницы)                                                                                                      */
/*=====================================================================================================================================================*/
/*
.site {
    width: 6.51vw; 
    height: 5.21vw;
    box-shadow: 0.46vw 0.46vw 0.13vw grey;
    margin: 0px 0.33vw 0.52vw 0.33vw;
    padding: 0px;
}
.site:hover {
    width: 7.16vw; 
    height: 5.83vw; 
    margin: 0px;
}
*/
/*=====================================================================================================================================================*/
/*   Стилизация новостей (все страницы)                                                                                                      */
/*=====================================================================================================================================================*/
.newsdiv {
    width: auto;
    margin: 5px 5px 20px 5px;
    padding: 10px;
    border: 1px solid blue;
    background-color: rgb(250, 250, 250);
    box-shadow: 7px 7px 2px grey; 
}
.newstext {
    margin: 0px 5px 5px 5px;
    color:rgb(52, 129, 199);
    text-indent: 10px;
    text-align: justify;
    text-decoration: none;
}
.newslink {
    color:rgb(52, 129, 199);
    text-decoration: none;
}
.newslegend {
    color:rgb(52, 129, 199); 
    text-align: left;
    font-weight: bold;
    font-size: 1.0em;
}
.newsimg {
    float:left;
    width: 30px;
    height: 30px;
}
.newslike {
    cursor:  pointer;
}
/* For smartfone */
.newslegend { font-size: 12px; }   
/* For tablet */
@media screen and (min-width: 768px) {
.newslegend { font-size: 14px; }   
} 
/* For desktop */
@media screen and (min-width: 1200px) {
.newslegend { font-size: 16px; }   
}

/*=====================================================================================================================================================*/
/*   Стилизация главного меню (все страницы)                                                                                            */
/*=====================================================================================================================================================*/
.menu {
    margin: auto;
    margin-top: 1.0em;
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: flex-start;
    
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
   position: relative;
   display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 120px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
   background-color: #f1f1f1
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: rgb(26, 106, 178);   
}
/*=====================================================================================================================================================*/
/*   Стилизация главной панели контекста (все страницы)                                                                                          */
/*=====================================================================================================================================================*/
.main {
    width: 80%;
    min-width: 300px; 
    text-align:justify;
}


/*=====================================================================================================================================================*/
/*   Стилизация правой и левой главных панелей (все страницы)                                                                           */
/*=====================================================================================================================================================*/
.aside {
    width: 10%;
    min-width: 120px; 
    background-color: rgba(191, 191, 191, 0.2);
    margin-top: 0.5em;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    
}
.aside h3 {
    color: rgb(52, 129, 199);
    text-shadow: 2px 1px #bfbfbf;
}
/*
.aside1 {display: none;}
.aside2 {display: none;}
*/
/*=====================================================================================================================================================*/
/*   Стилизация главной раскладки (все страницы)                                                                                                       */
/*=====================================================================================================================================================*/
/*
@media all and (min-width: 645px) {
   .aside { flex: 1 auto; } 
}
*/
@media all and (min-width: 800px) {
    .aside { flex: 1 auto; } 
/*    .main    { flex: 5 0px; } */
    
    .main    { order: 1; }
    .wish    { order: 2; }
    .aside1  { order: 3; } 
    .aside2  { order: 4; }
    .scroll  { order: 5; }
    .footer  { order: 6; }


/*
    .aside1  { order: 2; } 
    .main    { order: 1; }
    .aside2  { order: 3; }
    .wish    { order: 4; }
    .scroll  { order: 5; }
    .footer  { order: 6; }
*/    
}
@media all and (min-width: 980px) {
    .main    { flex: 5 0px; }
    .aside1  { order: 1; } 
    .main    { order: 2; }
    .aside2  { order: 3; }
    .wish    { order: 4; }
    .scroll  { order: 5; }
    .footer  { order: 6; }
}
/*
@media all and (max-width: 1050px) {
   .aside {display: none;} 
}
*/
/*=====================================================================================================================================================*/
/*   Стилизация панели логотипов (все страницы)                                                                                                */
/*=====================================================================================================================================================*/
.wish {
     width: 100%;
/*     background-color: rgba(191, 191, 191, 0.2); */
}




/*=====================================================================================================================================================*/
/*   Стилизация панели логотипов (все страницы)                                                                                                */
/*=====================================================================================================================================================*/
.scroll {
     width: auto;
     background-color: rgba(191, 191, 191, 0.2);
}
.fmlogo {
    padding: 0px;
    margin: 10px;
}

.scroll h3 {
    color: rgb(52, 129, 199);
    text-shadow: 2px 1px #bfbfbf;
}
/*=====================================================================================================================================================*/
/*   Стилизация тела всех страниц                                                                                                                      */
/*=====================================================================================================================================================*/
.logoscont {
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row ;
    flex-flow: row ;
}
.logo-but-div {
    width: 5%;
    display: flex;
    align-items: center;
}
.logos {
    width: 90%;
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}
.logos a {
    margin: 5px;
    padding: 5px;
    flex: 1 1 5%;
} 
.logo-but-div input {  
    margin-top: auto;
    margin-bottom: auto;
}
/*=====================================================================================================================================================*/
/*   Стилизация логотипов на панели логотипов (все страницы)                                                                                 */
/*=====================================================================================================================================================*/
.firmslogo {
    width: 50px;
    height: 50px;
    padding: 0px;
    margin: 7px;
    box-shadow: 7px 7px 2px grey;   
}
.anniv {
    width: 25px; 
    height: 25px; 
    margin-left: -1.5em;
    margin-top: -4.0em;
}
@media all and (min-width: 1000px) {
    
.firmslogo {
    width: 70px;
    height: 70px;
    padding: 0px;
    margin: 10px;
    box-shadow: 7px 7px 2px grey;   
}    
.anniv {
    width: 35px; 
    height: 35px; 
    margin-left: -2.2em;
    margin-top: -4.0em;    
}
}
/*=====================================================================================================================================================*/
/*   Стилизация подвала (все страницы)                                                                                                                 */
/*=====================================================================================================================================================*/
.footer {
    width: auto;
    background-color: rgba(191, 191, 191, 0.6);
    color: rgb(253, 253, 253); 
    font-style: italic; 
    font-weight: bold;
}
/*==========   Стилизация кнопок меню в подвале (все страницы)      ==================================================================================*/
.footer ul {
    list-style-type: none;
    margin:  0;
    padding: 0;
    overflow: hidden;
}
.footer li {
    font-size: 13px;
    float: left;            
}
.footer li a {
    padding: 7px 10px;
    
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
}
.footer li a:hover {
    background-color: #111;
}
.footer b {font-size: 10px;}

.footer-counts-div {
    width: 100%;
    background-color: rgba(191, 191, 191, 0.6);
    display: -webkit-flex;
    display: flex;  
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: center;
}
.counts-div {
    margin: 5px;
    padding: 0px;
    
}

/* For destop and planshet */
@media all and (min-width: 1000px) {
.footer li {
    font-size: 16px; 
}
.footer li a {
    padding: 14px 16px;
}    
.footer b {font-size: 18px;}    
}
/*=====================================================================================================================================================*/
/*   Стилизация кнопки в подвале (все страницы)                                  */
/*=====================================================================================================================================================*/
.buttonup {
    display: inline;  
    float:   right; 
    cursor:  pointer;
}
.buttonup:hover {
    transform: translateY(-4px);
}
/*=====================================================================================================================================================*/
/*   Стилизация счетчиков                                            */
/*=====================================================================================================================================================*/
.rambl100 {
    border: 1px solid black;
}
/*=====================================================================================================================================================*/
/*    Стилизация главного меню (все страницы)   =======================================================================================================*/
/*=====================================================================================================================================================*/
.button {
  padding: 8px 13px;
  margin: 3px;    
  font-size: 10px;
  border-radius: 8px;
  box-shadow: 0 5px 2px #999;
/* End sizing */  
  display: inline-block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: rgb(52, 129, 199);
  border: none;
}
.button:hover {
  background-color: rgb(26, 106, 178);
}
.button:active {
  box-shadow: 0 3px 1px #666;
/* End sizing */   
  background-color: rgb(26, 106, 178);
  transform: translateY(4px);
}
/* For destop and planshet */
@media all and (min-width: 1100px) {
.button {
   padding: 15px 25px;
   margin: 5px;    
   font-size: 16px;
   border-radius: 15px;
   box-shadow: 0 9px 4px #999; 
}   
.button:active {
   box-shadow: 0 5px 2px #666; 
}
}
/*=====================================================================================================================================================*/
/*   Стилизация кнопок пейджинга (страница фирм)  =====================================================================================================*/
/*=====================================================================================================================================================*/
.center {
    margin: 10px 0px;
    text-align: center;
}
.pagination {
    display: inline-block;
    margin: 0px;
}
.pagination a {
    padding: 4px 10px;
    margin: 0 4px;
    border-radius: 5px;

    float: left;
    text-decoration: none;
    cursor: pointer;
    color: black;
    background-color: #eee;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
.pagination a.active {
    color: white;
    background-color: rgb(52, 129, 199);
    border: 1px solid rgb(52, 129, 199);
}
.pagination a:hover:not(.active) {
    background-color: #ddd;
    
}
/* For desktop */
@media screen and (min-width: 1100px) {
.center {
    margin: 20px 0px;
}
.pagination a {
    padding: 8px 16px;
    margin: 0 4px;
    border-radius: 10px;
}
}
/*=====================================================================================================================================================*/
/*  Стилизация кнопок Войти в заголовке и кнопок прокрутки aside и scroll ============================================================================ */
/*=====================================================================================================================================================*/
.button_reg {
  padding: 4px 8px;
  margin: 0px 2px;    
  font-size: 10px;
  border-radius: 5px;
/* End sizing */  
  display: inline-block;  
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: rgb(52, 129, 199);
  border: none;
}
.button_reg:hover {
  background-color: rgb(26, 106, 178);
}
.button_reg:active {
  background-color: rgb(26, 106, 178);
  transform: translateY(2px);
}
.button_reg:disabled {
  background-color: rgb(171, 201, 229);
  cursor:auto;
}
/* For desktop */
@media screen and (min-width: 1100px) {
.button_reg {
  padding: 8px 16px;
  margin: 0px 4px;    
  font-size: 13px;
  border-radius: 10px;
}
}
/*=====================================================================================================================================================*/
/*  Стилизация кнопок селекта                                                                                      */
/*=====================================================================================================================================================*/
.button3 {
  padding: 4px 8px;
  margin: 0px 2px;    
  font-size: 10px;
  border-radius: 10px;
  box-shadow: 0 5px 2px #999;
/* End sizing */  
  display: inline-block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: rgb(52, 129, 199);
  border: none;
}
.button3:hover {
  background-color: rgb(26, 106, 178);
}
.button3:active {
  box-shadow: 0 5px 2px #666; 
  
  background-color: rgb(26, 106, 178);
  transform: translateY(2px);
}
/* For desktop */
@media screen and (min-width: 1100px) {
.button3 {
  padding: 9px 15px;
  margin: 0px 3px;    
  font-size: 13px;
  border-radius: 15px;
  box-shadow: 0 9px 4px #999;
}
.button3:active {
  box-shadow: 0 5px 2px #666; 
}
}
/*=====================================================================================================================================================*/
/*   Стилизация текста сообщения (страница фирм)                                                                                           */
/*=====================================================================================================================================================*/
#msgparagraf {
    border: 3px double red;
    margin: 10px;
    text-indent: 0px;
    padding: 5px;
    background-color: #a9c4f5;
}
/*=====================================================================================================================================================*/
/*   Стилизация текста подсказки в панели условий отбора (страница фирм)                                                                 */
/*=====================================================================================================================================================*/
#hinttext {
    text-indent: 0px;
    color: rgb(52, 129, 199);
    margin: 0px 0px;   
}
/*=====================================================================================================================================================*/
/*   Стилизация сообщения о количестве отобранных фирм (страница фирм)                                                                     */
/*=====================================================================================================================================================*/
/*
#recnum_top {
    margin-top: -0.9em;
    margin-bottom: 1px;  
}
*/
.recnum {
    font-weight: bold;
    padding: 0px;
    margin: 0px;
    text-align: right;
}
.items-number {
    width: auto;
    padding: 5px;
    margin: 0px;
}
/*=====================================================================================================================================================*/
/*  Конец                                                                                                                                              */
/*=====================================================================================================================================================*/