/*  Стиль КАП         
border: ;                        19
шрифт  стандартных тегов         33
шрифт  дополнительных нужд       60
центрирование блока текста   
меню сайта                       86
vijet
кнопки                          125
социальные кнопки
картинки портфолио              230
выравнивание картинок по центру
Градация цвета                  301

*/

        /*  Стиль шрифта и тела несложный*/
        /* ##########################  /* шрифт берем с гугле   ########################### */
        @import url('https://fonts.googleapis.com/css?family=Merriweather:400,700,700i&subset=cyrillic,cyrillic-ext');
          /* ##########################  /* body ########################### */
        body{
            margin-top:50px;    
            padding-top:25px;
            font-size: 14px;/* рамер шрифта 14 пикселей */
            font-family: 'Merriweather', serif;
            line-height: normal;
            margin:0 auto;
            padding:0;
            min-width: 320px; /* минимальная ширина 320 пикселей */
            height: auto; /* высота автоматическая */
            color: #7F1416;        
        }
        

        /* Размер шрифта  стандартных тегов  и выравнивание по центру*/   
        h1{
            font-size: 1.6rem;/* рамер шрифта 26 пикселей */
            text-align: center
            }  
        h2{
            font-size: 1.5rem;/* рамер шрифта 24 пикселей */
            text-align: center
            } 
        h3{
            font-size: 1.4rem;/* рамер шрифта 22 пикселей */
            text-align: center
            }  
        h4{
            font-size: 1.25rem;/* рамер шрифта 20 пикселей */
            text-align: center
            }     
        h5{
            font-size: 1.0rem;/* рамер шрифта 16 пикселей */
            text-align: center
            }  
        h6{
            font-size: 0.8rem;/* рамер шрифта 13 пикселей */
            text-align: center
            }       
        
        
/* Размер шрифта  дополнительных нужд   class       font-family: 'Merriweather'*/           
        .opisanie12 {
                font-size: 12px;/* рамер шрифта 12 пикселей */
                font-family: 'Merriweather', serif; 
         } 
        .opisanie14 {
                font-size: 14px;/* рамер шрифта 14 пикселей */
                font-family: 'Merriweather', serif; 
         }         
        .opisanie16 {
                font-size: 16px;/* рамер шрифта 16 пикселей */
                font-family: 'Merriweather', serif; 
         }
        .opisanie18 {
                font-size: 18px;/* рамер шрифта 18 пикселей */
                font-family: 'Merriweather', serif; 
         }         
        .opisanie20 {
                font-size: 20px;/* рамер шрифта 20 пикселей */
                font-family: 'Merriweather', serif; 
         }
        .opisanie22 {
                font-size: 22px;/* рамер шрифта 24 пикселей */
                font-family: 'Merriweather', serif; 
         }         
        .opisanie24 {
                font-size: 24px;/* рамер шрифта 24 пикселей */
                font-family: 'Merriweather', serif; 
         }
        .opisanie28 {
                font-size: 28px;/* рамер шрифта 28 пикселей */
                font-family: 'Merriweather', serif; 
         }
        .pcenter { text-align: center }
        
/*   ЦЕНТРИРОВАНИЕ БЛОКА   */
        P.blocktext {
            margin-left: auto;
            margin-right: auto;
            width: 6em
        }         
/* Стиль меню сайта*/           
    .navbar {
        margin: 10px 0px 10px 0px;
        box-shadow: 0 3px 6px #563d7c;
        border-radius: 4px;    
     } 
    .navbar a {
        color: #fff;
     }          
    /*  выделение навбара   */
    .navbar a:hover{
        background-color:#b35900; 
        border-radius: 4px;  
        color: #fff;
        }         
    .page-header {
        color:#7F1416;
     }       
     .panel-primary{
        background: #d3d3d3;
        padding: 15px;
        border-radius: 5px;
     }
     
    #appSummary{
      text-align:center;
    }
    
        .vijet {
        background: #fff;
        box-shadow: 0 5px 15px #7F1416;
        border-radius: 4px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        margin: 20px 20px 20px 20px;
        height: auto;
        padding: 20px;
        }
        /* кнопка обычная */
        .btn-my { 
        background-color:#7F1416; /* фон белый */
        color:#FFFFFF;            /* текст мой */
        border-color:#7F1416;    /* граница моя */
        } 
        .btn-my:hover, .btn-vltn:focus {
        background-color:#FFFFFF;   /* текст мой */
        color:#7F1416;     /* текст мой */   
        } 
        /* кнопка инвертная */
        .btn-my-in { 
        background-color:#FFFFFF; /* фон белый */
        color:#7F1416;            /* текст мой */
        border-color:#7F1416;    /* граница моя */
        } 
        .btn-my-in:hover, .btn-vltn:focus {
        background-color:#7F1416;   /* текст мой */
        color: #FFFFFF;             /* текст белый */
        } 
         .footer{
            background-color:#7F1416;
            color: #fff;
            padding: 15px;
            border-radius: 5px;
         }
         .footer a{
            background-color:#7F1416;
            color: #fff;

         }
         
    /*  Стиль социальных кнопок   */         
        .social a{
            text-align:center;
            width:46px;
            height:46px;
            float:left;
            background:#fff;  /* цвет кнопок белый  */
            border:1px solid #ccc;
            box-shadow:0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
            border-radius:8px;
            margin:0 10px 10px 0;
            padding:6px;
            color:#999999; 
        }
        .youtube a:hover{
            background:#c4302b;color:#fff;
        }
        .twitter a:hover{
            background:#00acee;color:#fff;
        }
        .instagram a:hover{
            background:#3f729b;color:#fff;
        }
        .facebook a:hover{
            background:#3b5998;color:#fff;
        }
      .skype a:hover{
          background:#00aff0;color:#fff;
        }
        .mail a:hover{
            background:#f93;color:#fff;
        }        
        .vk a:hover{
            background:#5d84ae;color:#fff;
        }
        .odnoklassniki a:hover{
            background:#f93;color:#fff;
        }
        .telegram a:hover{
            background:#249bd7;color:#fff;
        }
        .whatsapp a:hover{
            background:#50b154;color:#fff;
        }
        .viber a:hover{
            background:#1087dd;color:#fff;
        }
        
        
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0; padding: 0;
}
.header {
  height: 25px;
  background: #111;
  color: #fff;
  text-align: center;
  font: 11px/25px Helvetica, Arial, sans-serif;
}

.header a {
  color: #eee;
}

.header a:hover {
  text-decoration: none;
}


/* Стиль картинок портфолио для увеличения при наведении мышки*/
.pic {
  height: 200px;
  width: 300px;
  overflow: hidden;
  margin: 20px;
  border: 10px solid white;
  -webkit-box-shadow: 5px 5px 5px #111;
  box-shadow: 5px 5px 5px #111;
  float: left;
}
.pic:hover {
  cursor: pointer;
}

/*GROW*/
.grow img {
  width: 300px;
  height: 200px;


  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.grow img:hover {
  width: 360px;
  height: 240px;
}
/* выравнивание катинок по центру*/
img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto 
    
}



/*   Стиль таблицы сортировки  по колонкам   */
.tsort {
	border-collapse:collapse
}
.tsort > thead > tr > th {
	border-bottom:2px solid #ddd;
	padding:7px 5px;
	cursor:hand;
	cursor:pointer;
}
.tsort > tbody > tr > td {
	border-bottom:1px solid #eee;
	padding:5px;
}
.tsort > thead > tr > th.sel {
	background:#eee;
}
.tsort > thead > tr > th.sel.asc {
	background:#ffb366;
	background-position:50% 100%;
}


.color90{
  background: #ffe6cc;
}
.color80{
  background: #ffcc99;
}
.color70{
  background: #ffb366;
}
.color60{
  background: #ff9933;
}
.color50{
  background: #ff8000;
}

  .fakeimg {
    height: 200px;
    background: #ffcc99;
  }
/* Размер шрифта  для кода   class       font-family: 'Courier New'*/           
        .pre12 {
                font-size: 12px;/* рамер шрифта 12 пикселей */
                font-family: 'Courier New', serif; 
         }  
        .pre16 {
                font-size: 16px;/* рамер шрифта 16 пикселей */
                font-family: 'Courier New', serif; 
         }      
        .pre20 {
                font-size: 20px;/* рамер шрифта 20 пикселей */
                font-family: 'Courier New', serif; 
         }


.container-kap {
  width: 100%;
  padding-right: 10rem;
  padding-left: 10rem;
  margin-right: 10rem;
  margin-left: 10rem;
}