/*********************
Bootstrap CSS Modification
Style By @garrycoy
**********************/
#desktop	{display:block}
#mobile		{display:none;}
::-webkit-scrollbar { 
    display: none; 
}	

/*-------------------------------
Bootstrap Modification Style 
-------------------------------*/
.container	{margin-bottom:20px;}
.btn	{border-radius:0 !important;}
.panel	{border-radius:0 !important;}
.navbar-brand	{margin-top:-7.5px;}
.navbar-default	{background-color:#fff !important;}
.navbar-nav > li > a {padding-top: 25px !important; padding-bottom: 25px !important; font-size:16px !important;}
.dropdown-menu > li > a > small	{color:#aaa !important;}
.nav-pills	{}
.nav-pills > li	{border:1px #ddd solid !important; background-color:#fff !important;}
.nav-pills > li > a	{border-radius:0 !important; color:#666 !important;}
.nav-pills > li > a:hover	{color:#00b9ae !important; background-color:#fff !important;}
.nav-pills > li > a:focus {color:#00b9ae !important; background-color:#fff !important;}
.nav-pills > li.active > a	{background-color:#00b9ae !important; color:#fff !important;}
.nav-justified	{background-color:#fff !important; border:1px #ddd solid !important;}
.nav-justified > li	{border:none !important; border-right:1px #ddd solid !important;}
.nav-justified > li:last-child	{border-right:none !important;}
.nav-justified > li > a {min-height:80px !important;}
select	{background-color:#f0f0f0 !important;}
.progress-bar {-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0) !important;box-shadow: inset 0 0 0 rgba(0, 0, 0, 0) !important;}
.media-object	{object-fit: cover; width:50px; height:50px;}
.list-group	{margin-bottom:0 !important;}
.media {margin-top:0 !important; border-bottom:1px #ddd solid; padding-top:16px !important; padding-bottom:16px !important;}
.media:last-child	{border-bottom:none !important;}
.panel h6 a	{text-decoration:underline; font-size:11px;}
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus	{background-color:#eee; border-color:#ccc; font-weight:bold;}

/*-------------------------------
General Modification Style 
-------------------------------*/
BODY	{background-color:#eee; font-family: 'Roboto', sans-serif;}
.container a  {color:inherit !important; text-decoration:none;}
.container a:hover, a:focus {opacity: 0.75; text-decoration:none;}
.intro	{font-size:12px; padding-top:8px;}

.map	{position:relative; padding:25px 0;}
.map img	{margin:auto;}

.zoom-tools	{position:absolute; top:2.2%; right:2.2%;}

.red-button	{}

.panel-tools	{min-height:145px}

.nav-graph	{}

.media-body h5	{max-height:45px; overflow:hidden; font-size:14px;}

.headline		{}
.headline img	{object-fit: cover; width:100% !important; min-height:280px !important; max-height:280px !important;}
.headline h4	{min-height:38px; max-height:38px; overflow:hidden;}
.headline p		{max-height:60px; overflow:hidden;}
.headline .glyphicon 	{font-size:10px; color:#00b9ae;}
.headline .list-group-item	{max-height:45px; overflow:hidden; line-height:27px;}

.nspk	{background:url(../images/green-art.jpg) top center no-repeat; color:#fff !important;}

.category	{}
.category h3	{font-size:18px !important; line-height:24px;}
.category p	{max-height:65px; overflow:hidden; font-size:15px;}

.single		{}
.single img	{margin:auto; margin-bottom:20px;}
.single p	{font-size:15px;}

.video	{}
.video h3	{font-size:18px !important; line-height:24px;}
.video p	{max-height:65px; overflow:hidden; font-size:15px;}

.media-video	{object-fit: cover; width:132px; height:74px;}
.media-list		{object-fit: cover; width:120px; height:120px;}

.chat-box	{position:fixed; right:0; bottom:0; z-index:99999999999 !important;}

/*-------------------------------
Bootstrap.
Comment Box 
-------------------------------*/
.detailBox {
    width:100%;
    border:1px solid #bbb;
    margin:0;
	background-color:#f4f4f4 !important;
}
.titleBox {
    background-color:#fdfdfd;
    padding:10px;
}
.titleBox label{
  color:#444;
  margin:0;
  display:inline-block;
}

.commentBox {
    padding:10px;
    border-top:1px dotted #bbb;
}
.commentBox .form-group:first-child, .actionBox .form-group:first-child {
    width:80%;
}
.commentBox .form-group:nth-child(2), .actionBox .form-group:nth-child(2) {
    width:18%;
}
.actionBox .form-group * {
    width:100%;
}
.taskDescription {
    margin-top:10px 0;
}
.commentList {
    padding:0;
    list-style:none;
    max-height:200px;
    overflow:auto;
}
.commentList li {
    margin:0;
    margin-top:10px;
}
.commentList li > div {
    display:table-cell;
}
.commenterImage {
    width:30px;
    margin-right:5px;
    height:100%;
    float:left;
}
.commenterImage img {
    width:100%;
    border-radius:50%;
}
.commentText p {
    margin:0;
}
.sub-text {
    color:#aaa;
    font-family:verdana;
    font-size:11px;
}
.actionBox {
    border-top:1px dotted #bbb;
    padding:10px;
}

.fullhide{
	display:none;
}



/*-------------------------------
Media Query,
Screen Rsolution Adjustment . 
-------------------------------*/
@media screen and (min-width: 1280px) {	
#desktop	{display:block}
#mobile		{display:none;}
}

@media screen and (max-width: 1280px) {	
#desktop	{display:block}
#mobile		{display:none;}
}

@media screen and (min-width: 1024px) {	
#desktop	{display:block}
#mobile		{display:none;}
}

@media screen and (max-width: 1024px) {	
#desktop	{display:block}
#mobile		{display:none;}
}

@media screen and (max-width: 960px) {
#desktop	{display:block}
#mobile		{display:none;}
}

@media screen and (max-width: 768px) {
#desktop	{display:none;}
#mobile		{display:block;}
html, body	{max-width:768px !important; overflow-x:hidden;}
.navbar-brand img	{max-width:35px !important;}
.zoom-tools	{position:absolute; top:0; right:8%;}
.red-button	{width:100%; margin-bottom:15px;}
.nav-graph	{width:100%; margin-bottom:7.5px;}
}

@media screen and (max-width: 640px) {
#desktop	{display:none}
#mobile		{display:block;}
html, body	{max-width:640px !important; overflow-x:hidden;}
.navbar-brand img	{max-width:35px !important;}
.zoom-tools	{position:absolute; top:0; right:8%;}
.red-button	{width:100%; margin-bottom:15px;}
.nav-graph	{width:100%; margin-bottom:7.5px;}
}

@media screen and (max-width: 568px) {	
#desktop	{display:none}
#mobile		{display:block;}
html, body	{max-width:568px !important; overflow-x:hidden;}
.navbar-brand img	{max-width:35px !important;}
.zoom-tools	{position:absolute; top:0; right:8%;}
.red-button	{width:100%; margin-bottom:15px;}
.nav-graph	{width:100%; margin-bottom:7.5px;}
}

@media screen and (max-width: 480px) {
#desktop	{display:none}
#mobile		{display:block;}
html, body	{max-width:480px !important; overflow-x:hidden;}
.navbar-brand img	{max-width:35px !important;}
.zoom-tools	{position:absolute; top:0; right:8%;}
.red-button	{width:100%; margin-bottom:15px;}
.nav-graph	{width:100%; margin-bottom:7.5px;}
.category h3	{font-size:15px !important; line-height:18px;}
.category p	{display:none;}
.media-list		{object-fit: cover; width:75px; height:75px;}
}

@media screen and (max-width: 420px) {
#desktop	{display:none}
#mobile		{display:block;}
html, body	{max-width:420px !important; overflow-x:hidden;}
.navbar-brand img	{max-width:35px !important;}
.zoom-tools	{position:absolute; top:0; right:8%;}
.red-button	{width:100%; margin-bottom:15px;}
.nav-graph	{width:100%; margin-bottom:7.5px;}
.category h3	{font-size:15px !important; line-height:18px;}
.category p	{display:none;}
.media-list		{object-fit: cover; width:75px; height:75px;}
}

@media screen and (max-width: 360px) {
#desktop	{display:none}
#mobile		{display:block;}
html, body	{max-width:360px !important; overflow-x:hidden;}
.navbar-brand img	{max-width:35px !important;}
.zoom-tools	{position:absolute; top:0; right:8%;}
.red-button	{width:100%; margin-bottom:15px;}
.nav-graph	{width:100%; margin-bottom:7.5px;}
.category h3	{font-size:15px !important; line-height:18px;}
.category p	{display:none;}
.media-list		{object-fit: cover; width:75px; height:75px;}
.video h3	{font-size:14px !important; line-height:16px;}
}

@media screen and (max-width: 320px) {
#desktop	{display:none}
#mobile		{display:block;}
html, body	{max-width:320px !important; overflow-x:hidden;}
.navbar-brand img	{max-width:35px !important;}
.zoom-tools	{position:absolute; top:0; right:8%;}
.red-button	{width:100%; margin-bottom:15px;}
.nav-graph	{width:100%; margin-bottom:7.5px;}
.category h3	{font-size:15px !important; line-height:18px;}
.category p	{display:none;}
.media-list		{object-fit: cover; width:75px; height:75px;}
}