@font-face {
    font-family: "Roboto";
	src: url("../fonts/Roboto_Slab/static/RobotoSlab-Regular.ttf");
    /*font-weight: 400;
    font-style: normal; */
}

/*LAYOUT */
html {position: relative; min-height: 100%;}
body {
    /* Margin bottom by footer height */
    margin-bottom: 140px;
    font-size: 16px;
	/*font-family: 'Roboto Condensed', Verdana, 'Ubuntu', Geneva, sans-serif;*/
	font-family: 'Roboto', serif;
    /* efek fix header - maka body diturunkan*/
    margin-top:142px;
}
body.default{margin-top:142px;}
body.default .col-2{margin-top:0px;}

#dgs_establish{
background: #fff;
background-image: url(../img/bg/dgs-labs-equipment-solution.png), url(../img/bg/bg-grey2.jpg);
background-position: center center, center center;
background-repeat:no-repeat, repeat;
background-attachment: fixed;
padding:0;margin:0;height:810px
}
#id-flash_banner{margin:0;padding:0; margin-bottom:20px;}
footer {background: #ddd; color:#888; padding:30px 10px; position: absolute; bottom: 0; width: 100%;}

#area_default_side_right{background:#eee; padding:10px;}

.loader-small{width:20px;}

/*header area*/
.top-header {width: 100%; background: #fcfcfc; position: fixed; top: 0; z-index: 888;}
.top-header:after{
    content: " ";
    background-image: url(../img/shadow1.png);
    background-size: 100% 100%;
    width: 100%; height: 25px; bottom: -25px; position: absolute; left: 0; right: 0;
}
.top-header img.logo {width:250px; margin:2px; z-index:999;}
#navbar-collapse-1{margin-top:2px;}
/* end LAYOUT */

/* MY CLASS */
.tm-nowrap{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.anim-easing, .top-header img.logo, .navbar-default, .arrow-bottom-text, .flex-direction-nav a::before, .thumbnail
,li[class^="col"], div[class^="col"]
,.card-body, .card-header img, .card-avatar.circle-text h1
,.navbar-default .navbar-nav>li>a{
  transition: all .7s ease 0s;
  -webkit-transition: all .7s ease 0s;
  -moz-transition: all .7s ease 0s;
  -o-transition: all .7s ease 0s;
  -ms-transition: all .7s ease 0s;
}

.tm-sosmed{padding:5px; color:#222; text-align:center;}
.skew-up{
	/*-ms-transform: skewY(358deg);
    transform: skewY(358deg);
    */
    -ms-transform: skewY(-6deg);
    transform: skewY(-6deg);
	margin-top:-70px;
}
.skew-down{
	/*-ms-transform: skewY(2deg);
    transform: skewY(2deg);
    */
    -ms-transform: skewY(6deg);
    transform: skewY(6deg);
}

.tm-bg1{background:#ffffff;}
.tm-bg2{background:#4a4a4a;}
.tm-bg3{background:#FF9C00;}

.centered, .row.centered{
	display: flex;
	justify-content: center;
	flex-flow:row wrap;
}

/* CARD */
.card{clear: both; border: 1px solid #fff; background: #fff; padding:0 1px 0 0; margin-bottom:20px;}
.card, .card a{color: #ccc;}
.card a:hover{text-decoration: none;}
.card .card-header img {width: 100%; opacity:0.8; /*border-radius: 0 20% 0 0;*/}
.card .card-body{border-top: 1px solid #fff; padding:0px 20px 20px 20px; position: relative; background: #efdada; color:#444; }
.card .card-title{color:#333; font-size: 130%; z-index: 2;}
.card .card-avatar {background: #fff; color: #efdada; z-index: 1; display: table-cell; vertical-align: middle; text-align: center;}
.card .card-avatar.arrow-bottom-text {background: #efdada; color: #fff;}
.card .card-avatar.arrow-bottom-text + .card-title{margin-top:20px; }
.card .card-avatar.circle-text + .card-title {margin-top:-25px;}
.card .card-avatar.circle-text >*{font-size: 30px; margin:0; padding:0;}
.card .card-content{font-size: 90%;}
.card .card-label{position:absolute;z-index: 2; right:16px; font-size: 20px; background: #efdada; padding:3px 6px;}
.card:hover, .card:hover a{text-decoration: none; color: #eee;}
.card:hover .card-body{background: #c13f44; color:#eee;}
.card:hover .card-avatar{color: #c13f44;}
.card:hover .card-avatar.arrow-bottom-text, .card:hover .arrow-bottom-text{background: #c13f44;}
.card:hover .card-header img{opacity:1; border-radius: 0%;}
.card:hover .card-title{color:#fff;}
.circle-text {width: 60px; height: 60px; border-radius: 60px; text-align: center; position: relative; top: -33px; left:-10px; display:table;}
.arrow-bottom-text {
    position: absolute; width: 20px; height: 20px; background: #efdada;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    top: -11px; left: 46%;
    border-top:1px solid #fff; border-left:1px solid #fff;
}

/* CUSTOM ************************/
img{width:100%;}
.page-header{margin:5px 0;}

body.front .thumbnail{border-color:transparent; margin-bottom:2px;}
body.front .thumbnail.tm-box-shadow{box-shadow:0 0 0 0 transparent;}
body.front .thumbnail .caption{color:transparent;}

.thumbnail:hover, body.front .thumbnail:hover{border-color:#d80202;}
.thumbnail:hover .caption, body.front .thumbnail:hover .caption{color:#d80202; text-decoration:none;}

.breadcrumb{background: transparent;font-size:120%;margin-bottom:10px;padding-top:20px; border-bottom:1px solid #e4e4e4;}

.navbar-default {background-color: transparent; border-color: transparent;margin-bottom: 0;}
.navbar-default .navbar-nav>li>a {
	text-transform: uppercase;
    padding: 14px 15px; font-weight: bold; color: #fff; background:#d80202; border-left:1px solid #f96d6d
}

.navbar-toggle span {color: #d80202;}
.navbar-default .navbar-toggle {border-color:orange;}
.navbar-default .navbar-toggle {border:0;}
.navbar-default .navbar-toggle .icon-bar {background-color:#d80202;}
.navbar-default .navbar-nav>li>a:hover {color: #d80202;}

li a.active {color: #d80202 !important;}

/* CUSTOM PANEL */
.panel {flex:1 0 100%;}
.panel.panel-default.tm {border:0;}
.panel.panel-default.tm .panel-heading{
  background:#659AC7 url("../img/bg/stripe_black.pngX");
  color:#fff;
}
.panel.panel-default.tm .panel-heading h4{overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.panel .list-group-item:nth-child(1) {
	border-top:0; border-radius:0;
}

.list-group-item.tm{clear: both; padding-left: 0; padding-right: 0; border-left:0; border-right:0;}
.list-group-item.tm::after, .list-group-item.tm::before {content: ""; display: table; clear: both;}
#content-index .list-group-item.tm:nth-child(1) {
    background: #eee; border-size: 1px; padding: 20px;
}
li.list-group-item.tm:nth-child(odd) {background:#fdfdfd;}
.text-full{margin-top:10px; margin-bottom:10px;}
.list-group-item.tm img.list-img{
  float: left !important;
  margin-right: 15px; margin-bottom: 5px;
  max-width: 180px;
  vertical-align: text-top;
  clear: both;
}

blockquote.tm{
	font-family: verdana, Arial, Helvetica, sans-serif;
	font-family: "Times New Roman", Times, serif;
	font-size:200%; text-align: center;
	color: #3a3a3a; text-shadow:1px 1px 2px #aeaeae;
	/*background:#ffffb2; border:0px solid #cecece;*/ border-radius: 10px;
	width: 100%; padding:40px 30px; margin: 0;
    position: relative; margin-top:40px;margin-bottom:180px; /*margin-bottom:1200px; margin-top:40px;*/
	box-shadow: -1px 5px 10px -5px #aeaeae;
}
blockquote.tm:before {content: open-quote; color:#cecece; line-height:50px; text-shadow: 5px 4px 10px #555; font-size:600%;position:absolute; left:10px; top:20px;}
blockquote.tm:after {
	content: "";
    width: 0; height: 0;
    position: absolute;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid #cecece;
    bottom: -40px; margin-left:-40px;
}
blockquote.tm .bubble-source {color: #868686; font-style: italic; font-size: 195%; width:100%; text-align: center; position: absolute; left:0; bottom:-160px;}
/* end custom ************************/

/* MODULES */
#area__top {font-size:90%;float:right;xmargin-right:130px;}

#product_block_summary_per_brand img{height:25px;width:auto;}
#product-index .category-desc{font-family: serif, "Times New Roman", Times; opacity:0.8;}
#product-index .category-desc .cat-title{text-decoration: underline;font-size:180%;}
#product-index .category-desc .cat-desc{font-style:italic;}
#product-index .card-title{text-align:center;}
#product-index .card-content{display:none;}
#product-detail .tm-news-time{display:none;}

#related_lists_by_brand img{width:100px;}
#related_lists_by_tag img{width:100px;}
#related_lists_by_tag .panel-body .list-group{padding:15px;margin-top:-25px;}

.panel .list-group {padding:0;margin:0;}
.panel .panel-body{margin:0;padding:0;}

#id-content-page-index .tm-news-time, #page-index .tm-news-time{display:none;}
#page-index .list-group-item-text a:after{content: '\A';white-space: pre;}
#page-detail .created-by{display:none;}


/* PANEL SHADOW */
.tm-box-shadow, .panel.panel-default.tm, .card
{
	-moz-box-shadow:    0px 4px 10px 0px #c7c7c7;
	-webkit-box-shadow: 0px 4px 10px 0px #c7c7c7;
	box-shadow:         0px 4px 10px 0px #c7c7c7;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#c7c7c7')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#c7c7c7');
}
.tm-box-shadow:hover, .panel.panel-default.tm:hover, .card:hover, body.front .thumbnail.tm-box-shadow:hover
{
	-moz-box-shadow:    0px 4px 10px 0px #4c4c4c;
	-webkit-box-shadow: 0px 4px 10px 0px #4c4c4c;
	box-shadow:         0px 4px 10px 0px #4c4c4c;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#4c4c4c')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#4c4c4c');
}

/* NO BOX SHADOW */
.tm-box-noshadow{
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* NEWS LIST */
.tm-cat{margin-bottom: 20px;}
.tm-cat h2{display:inline;}
.tm-news-time{float:right; font-size: 80%; opacity: 0.8;}

/* SEARCH */
#id-content-search-index #search_result{margin-top:20px;}
#id-content-search-index #search_result h4.list-group-item-heading{font-size: 120%; background:#fcffe5; width:auto; display:inline;}
#id-content-search-index #search_result .list-group-item-text{font-size: 90%; font-style: italic;}
#id-content-search-index #search_result .tm-news-time{float:none; display: inline;}
#id-content-search-index #search_result .total_rows_container{background: #fcffe5; color:#888; display:inline; margin:0;}


/* section */
body.front section{padding:80px 0;}
body.front section.skew-up{padding:120px 0;}
body.front section.section-empty, section.section-empty{padding:0;margin:0;display:none;}

#section-product  .card-title{font-size:98%;margin:5px 0;text-align:center;}
#section-product  .card .card-body{padding:5px;}

#front-3coltop{color:#fff; text-align:center; font-size:110%;}
#front-3coltop .row{margin:0px;padding:0px;}
#front-3coltop div[class^="col"] {
	padding:70px 10px;
	margin:0px -10px;
}
#front-3coltop div[class^="col"].tm-box-shadow:hover{
	background: #D5DCE6;
	-moz-box-shadow: 0px 2px 30px 0px #efefef;
	-webkit-box-shadow: 0px 2px 30px 0px #efefef;
	box-shadow: 0px 4px 30px 0px #efefef;
}

#section-front-3coltop{padding:220px 0;}

/*#front-3coltop div[class^="col"]:hover {background: #F20A08; color:#fff; opacity:1; }*/
#front-3coltop .nav-product{background:#FE0000;}
#front-3coltop .nav-service{background:#0058A2;}
#front-3coltop .nav-contact{background:#FF9C00;}


#front-3coltop div[class^="col"], #front-3coltop div[class^="col"] a.tm{color:#fff;text-decoration:none;}
#front-3coltop div[class^="col"]:hover, #front-3coltop div[class^="col"]:hover a.tm{color:#555;}
#front-3coltop div[class^="col"] a.tm:hover{color:#0058A2;}

#menu-footer{text-align:center;padding:10px;}

#section-stickynews-slide{
  background: black url(../img/bg/stripe_black.png);
}
#section-stickynews-slide, #section-stickynews-slide section{padding:10px 0;}
#section-stickynews-slide .tm-news-time{float:none; color:#aaa;}

.flexvertical .flex-direction-nav a:before {
  font-family: "fontawesome";
  font-size: 30px;
  font-family: "fontawesome";
  display: inline-block;
  content: '\f077';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flexvertical .flex-direction-nav a.flex-next:before {
  font-family: "fontawesome";
  content: '\f078';
}
.flexvertical .flex-direction-nav .flex-next{
  margin: auto;
  bottom:-250px;
}
.flexvertical:hover .flex-direction-nav .flex-next{
  bottom:-247px;
}
.flexvertical .flex-direction-nav .flex-prev {
  margin: auto;
  bottom:-250px;
}
.flexvertical:hover .flex-direction-nav .flex-prev{
  bottom:-247px;
}
/* end of section */

.navbar .navbar-collapse.in { max-height:400px!important; overflow-y:scroll!important; overflow-x:hidden!important; }
.col-2{margin:0;}

/* XS*/
/* @media (max-width: 479px) {} */

/* xs 2 */
/* @media (min-width: 480px) and (max-width: 767px) { */
@media (max-width: 767px) {
    .top-header > div{margin:0; padding:0;}
	.top-header img.logo {width:95px;margin:2px;}
	#navbar-collapse-1{margin-top:0px;}
	.navbar-default .navbar-nav>li>a {font-size:12px; border-bottom:1px solid #f96d6d;}

	body{margin-top:58px;}
	body.default{margin-top:55px;}

	#front-3coltop{font-size:120%; padding:40px 0;}
	#front-3coltop div[class^="col"] {
		padding:40px 0px; margin:0px 20px;
	}

	#dgs_establish{
		background-position:top center, center center;
		height:330px;
	}

	body.front section{padding:20px 0;}
	#area__top {font-size:90%;float:none;margi:0;padding:0;}
	#area_default_side_right{padding:5px;}
	#section-front-3coltop{padding:20px 0;}
	body.front section.skew-up{padding:22px 0; margin:0;}
}

/* d */
@media (min-width: 768px) and (max-width: 992px) {
	.navbar-default .navbar-nav>li>a {font-size:12px;}
}