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

        /*  Стиль шрифта и тела несложный*/
        /* ##########################  /* шрифт берем с гугле   ########################### */
        @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
            }       
        
        
/* Размер шрифта  дополнительных нужд          font-family: 'Merriweather'*/           
        .opisanie12 {
                font-size: 12px;/* рамер шрифта 12 пикселей */
                font-family: 'Merriweather', serif; 
         }  
        .opisanie16 {
                font-size: 16px;/* рамер шрифта 16 пикселей */
                font-family: 'Merriweather', serif; 
         }      
        .opisanie20 {
                font-size: 20px;/* рамер шрифта 20 пикселей */
                font-family: 'Merriweather', serif; 
         }
        .opisanie24 {
                font-size: 24px;/* рамер шрифта 24 пикселей */
                font-family: 'Merriweather', serif; 
         }


/* Размер шрифта  дополнительных нужд          font-family: 'Merriweather'*/           
        .opisanie12w {
                font-size: 12px;/* рамер шрифта 12 пикселей */
                font-family: 'Merriweather', serif; 
                color: 	#ffffff; 
         }  
        .opisanie16w {
                font-size: 16px;/* рамер шрифта 16 пикселей */
                font-family: 'Merriweather', serif; 
                color: 	#ffffff; 
         }      
        .opisanie20w {
                font-size: 20px;/* рамер шрифта 20 пикселей */
                font-family: 'Merriweather', serif; 
                color: 	#ffffff; 
         }
        .opisanie24w {
                font-size: 24px;/* рамер шрифта 24 пикселей */
                font-family: 'Merriweather', serif; 
                color: 	#ffffff; 
         }



        .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%;
}

/*   Стиль успешного сообщения   */
.success_message {
	color: #006600; 
	font-size: 2em;
}
.error_message {
	color: #cc0000; 
	font-size: 2em;
}