@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'Ubuntu-Regular';
    src:url(../fonts/Ubuntu-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Ubuntu-Bold';
    src:url(../fonts/Ubuntu-Bold.ttf) format('truetype');
}


body,td,th {
	color: #FFF;
	font-family: 'Ubuntu-Regular';
}

.font18{ font-weight:100; color:#F9C; font-size:18px; } /*---- pink -----*/
.font18-white{ color:#FFF; font-size:16px;}
.font18-light{color:#FFDDDD; font-size:18px; } /*---- pink -----*/
.font18-1{ font-size:18px;}
.font16-black{font-size:16px; color:#333;}
.font14-black{font-size:14px; color:#333;}
.font12{ font-size:12px;}
.font11{ font-size:11px;}
.centre{ text-align:center; }
.black{ color:#333; }
.red{ color:#FF0000; }
.red1{ color:#B0290C; }
.green {color:#060;}
.blue { color:#06C;}
.light-blue { color:#81B3E5; }
.head-topic { color:#333; font-size:20px; }
.highlight { background-color: #d4232b; font-size:1.2em; font-weight:bold;}

a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
	color: #CCCCCC;
}
a:active {
	color: #FFFFFF;
	text-decoration: none;
}

.font14-black  a{color:#333;}
.font14-black  a:hover{color:#999;}

#more .jumbotron { padding:25px; }
/*---------------------------------------------------*/

.navbar-brand img{height:60%;}

.navbar-default {
	/*background-color:transparent; */
	background-color:#3b5998;
	border-color:#3b5998; 
	margin-bottom:0;
}

@media screen and (min-width:767px){
    .navbar-brand-centered {
		/*---------- Logo --------*/
        position: absolute;
        left: 10%;
        display: block;
        width: 100px;
        /*text-align: center;*/
        background-color: transparent;
       
    }
    .navbar>.container .navbar-brand-centered, 
    .navbar>.container-fluid .navbar-brand-centered {
        margin-left: -80px;
		margin-top:-40px;
    }

.navbar-nav{ 
	/*------------ menu -----------*/
	margin-left:280px;
}

.navbar-nav>li>a { 
	padding-top: 0px;
	padding-bottom: 0px; 
	font-family: 'Ubuntu-Regular';
	font-size: 18px;
}

.navbar-nav>li>a:hover  {
	text-decoration: none;
	color:#FFC;
}

.navbar-brand{top: 3px;}

.navbar-brand-centered{height:120px;}

.navbar-default {
	/*background-color:transparent; */
	background-color:#3b5998;
	border-color:#3b5998; 
	padding-top: 10px;  /*----- gruop of menu -----*/
}
}

@media (max-width: 801px) {
.navbar-default{padding-top:10;}
.navbar-brand{padding: 10px 10px;}
.navbar-brand-centered{height:100px;}
.navbar-toggle{bottom:-20px;}
}

.lead { font-size: 33px;margin-bottom:0px; }
.footer {
	padding-top:30px;
	padding-bottom:30px;
	background-color:#3b5998;
	font-size:18px;
	color:#FFF;
	text-align:center;
}

.btn-product{
	width: 100%;
}


.text-info{ 
	font-size:14px;
	color:#333;
	margin-left:10px;
	margin-right:10px; 
	margin-top:15px; 
	margin-bottom:15px;
}

.text-price{
	font-size:14px;
	color:#F00;
	margin-left:10px;
	margin-right:10px; 
	margin-top:15px; 
	margin-bottom:15px;
	font-weight:bold
}

.topic{ 
	background-color:#3b5998;
	padding: 12px;
	margin-left:-15px;
	margin-right:-15px;
}

.panel { margin-top: 3px; margin-bottom: 3px; padding-bottom:3px; height:auto;}

.icon-more {  float: right; margin-top:-5px;}


/*----------------- article ---------------*/
article
{
    padding-bottom: 20px;
}
.article-caption
{
position: absolute;
bottom: 16px;
max-width: 90%;
text-align: center;
background-color: rgba(200,200,200,0.5);

}

.article-img
{
width: 100%; 
max-height: 400px;
object-fit: cover;
}


@media screen and (max-width: 768px) { 
.article-title
{
font-size: 28px;
}
}

@media screen and (max-width: 500px) { 
.article-title
{
font-size: 20px;
}
}

.article-caption a
{
color: white;
}

/*----------------- end article ---------------*/

.jumbotron{
	
	color:#333;
}

.category{
	font-size:13px;
	margin:10px;
	color:#333;
}
.category a{
	font-size:13px;
	color:#333;
}
.category a:hover{
	font-size: 13px;
	color: #999;
	text-decoration: underline;	
}

.main-category{
	width:auto;
	/*background: #f9e2ed;*/
	background: #F8F8F8;
    border-radius: 2px;
    margin-bottom:15px;
	padding:5px;
	border:1px solid #f1f1f1;  
    box-shadow: 2px 2px 2px #f1f1f1;
    /*border:1px solid #ebe1e6;  
    box-shadow: 2px 2px 2px #ffeff7;*/ 
}
.main-category:hover{
	border:1px solid #ccc;  
    box-shadow: 2px 2px 2px #ccc;
}
.search-product
{
	margin:20px 5px 0px 5px;

}.breadcrumb{
	margin-top:20px;	
	border:1px solid #F2F2F2;
	font-size:12px;
	color:#000;
	/*background: #f8c9e0;
	border:1px solid #ebe1e6;  
    box-shadow: 2px 2px 2px #ffeff7;*/
}
.breadcrumb:hover{
	border:1px solid #ccc;  
    box-shadow: 2px 2px 2px #ccc;
}
.breadcrumb a{
	
	color:#666;
}
.breadcrumb a:hover{
	color: #999;
	text-decoration: underline;
}
.tab-pane{
	color:#333;
	margin:10px;	
}

/*---------------- Panel Table -------------------*/
.panel-table {
    display:table;
	margin-left:50px;
}
.panel-table > .panel-heading {
    display: table-header-group;
    background: transparent;
}
.panel-table > .panel-body {
    display: table-row-group;
}
.panel-table > .panel-body:before,
.panel-table > .panel-body:after {
    content:none;
}
.panel-table > .panel-footer {
    display: table-footer-group;
    background: transparent;
}
.panel-table > div > .tr {
    display: table-row;
}
.panel-table > div:last-child > .tr:last-child > .td {
    border-bottom: none;
}
.panel-table .td {
    display: table-cell;
    padding: 15px;
    border: 1px solid #ddd;
    border-top: none;
    border-left: none;
}
.panel-table .td:last-child {
    border-right: none;
}
.panel-table > .panel-heading > .tr > .td,
.panel-table > .panel-footer > .tr > .td {
    background-color: #f5f5f5;
}
.panel-table > .panel-heading > .tr > .td:first-child {
    border-radius: 4px 0 0 0;
}
.panel-table > .panel-heading > .tr > .td:last-child {
    border-radius: 0 4px 0 0;
}
.panel-table > .panel-footer > .tr > .td:first-child {
    border-radius: 0 0 0 4px;
}
.panel-table > .panel-footer > .tr > .td:last-child {
    border-radius: 0 0 4px 0;
}