/* Custom Stylesheet */
/**
 * Use this file to override Materialize files so you can update
 * the core Materialize files in the future
 *
 * Made By MaterializeCSS.com
 */

.icon-block {
  padding: 0 15px;
}
.icon-block .material-icons {
	font-size: inherit;
}
header {
	width: 100%;
	height: 440px !important;
	background-color: rgba(52,74,121,0.1);
}
div.mobile {
	width: 100%;
	height: 600px;
	background-color: rgba(52,74,121,0.1);
}
.carousel-slider {
  position: relative !important;
  max-width: 600px !important;
  height: 600px !important;
  margin: 0 auto;
}
@media only screen and (max-width:400px){
	div.mobile {
		height: 400px;
	}
	.carousel-slider {
		height: 400px !important;
	}
	.carousel-slider .carousel-item {
		height: 400px !important;
		position: absolute;
		top: 0;
		left: 0;
	}
}
.carousel-slider .indicators .indicator-item {
  background-color: #c62828;
}
.carousel-slider .indicators .indicator-item.active {
  background-color: #e3f2fd;
  border: 2px solid #c62828;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.carousel-slider .indicators {
	bottom: 0%;
	border-bottom: 1px solid #c62828;
	z-index: 100;
  /* text-align: left; */
}
.mobile-caption {
  color: #000;
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 70%;
  border-radius: 0px 10px 10px 50px;
  padding: 10px 10px 10px 10px;

}
.slider {
  position: relative !important;
  height: 440px !important;
  max-width: 1000px !important;
  margin: 0 auto;
}
.slider .slides {
	margin: 0 !important;
	width: 100%;
	height: 400px !important;
	background-color: rgb(255,255,255) !important;
	background-position: center center; 
  }
.slider .indicators .indicator-item {
  background-color: #c62828;
}
.slider .indicators .indicator-item.active {
  background-color: #e3f2fd;
  border: 2px solid #c62828;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.slider .indicators {
	bottom: 5px;
	z-index: 100;
  /* text-align: left; */
}
.slider .slides li .caption-top-left {
  color: #fff;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 40%;
  background-color:rgba(198,40,40,0.9);
  border-bottom-right-radius: 50px;
  padding: 0px 10px 0px 10px;
}
.slider .slides li .caption-bottom-right {
  color: #fff;
  position: absolute;
  bottom: 5%;
  right: 0%;
  width: 40%;
  background-color:rgba(52,74,121,0.4);
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  padding: 10px 10px 10px 10px;
}
.slider .slides li .caption-top-left p , .caption-bottom-right p {
  color: #e0e0e0;
}
.slider .slides li .caption-button {
  color: #fff;
  position: absolute;
  bottom: 5%;
  right: 15%;
  width: 40%;
  background-color:none;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  padding: 10px 10px 10px 10px;
}
.slider .slides li .caption-top-left p , .caption-button p {
  color: #fff;
}

.dropdown-content.untuk-navbar {
  background-color: rgb(160,50,51);
  margin: 0;
  display: none;
  min-width: 200px; /* Changed this to accomodate content width */
  max-height: auto;
  margin-top: 50px; /* Add this to keep dropdown in line with edge of navbar */
  margin-left: -45px; /* Add this to keep dropdown in line with edge of navbar */
  overflow: hidden; /* Changed this from overflow-y:auto; to overflow:hidden; */
  opacity: 0;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  will-change: width, height;
}
.card .card-image .card-title.on-image {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25%;
  line-height: 10px;
  padding: 0px 0px 0px 10px;
  background-color: rgba(52,74,121,0.7);
}
.card.red-shadow {
  border: 1px solid rgba(160,50,51,0.6);
  cursor: pointer;
}
.card.red-shadow:hover{
	box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
	}
.dropdown-content li > a .text-drop {
  font-size: 10px;
  color: #26a69a;
  display: block;
  line-height: 22px;
  padding: 14px 16px;
}
.sosmed-icon {
	margin-bottom: 0px !important;
}
.text-footer {
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.page-loading {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.page-loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .page-loading {
    display: block;
}
/*bordered-box ala iz*/
.bordered-box {
	padding: 20px 20px 20px 55px;
	margin: 10px 0;
	border-radius: 3px;
}
.bordered-box.error{
	background: url(../img/icon/ic_highlight_off_black_36dp.png) no-repeat #f2dede 1% 25px;
	border:1px solid #ebccd1;
	border-left:5px solid #d9534f;
	color: #a94442;
	}
.bordered-box.success {
	background: url(../img/icon/ic_check_circle_black_36dp.png) no-repeat #dff0d8 1% 25px;
	border:1px solid  #d6e9c6;
	border-left:5px solid #5cb85c;
	color: #3c763d;
	}
.bordered-box.info {
	background: url(../img/icon/ic_info_outline_black_36dp.png) no-repeat #ecf6fb 1% 25px;
	border: 1px solid #addfee;
	border-left: 5px solid #5bc0de;
	color: black;
	}
.bordered-box.warning {
	background: url(../img/icon/ic_report_problem_black_36dp.png) no-repeat #fcf8e3 1% 25px;
	border:1px solid #faebcc;
	border-left:5px solid #f0ad4e;
	color: #8a6d3b;
}
/*end bordered-box ala iz*/

table > tbody > tr td, th{
	border-right: 1px solid rgb(192,192,192);
	padding: 10px 10px 10px 10px;
}
table > thead > tr th{
	border-top: 1px solid rgb(192,192,192);
}
table > tbody > tr td.sepuluh {
	width: 10px;
}
table > tbody > tr td.duapuluh {
	width: 20px;	
}
table > tbody > tr td.tigapuluh {
	width: 30px;	
}
table > tbody > tr td.empatpuluh {
	width: 40px;	
}
table > tbody > tr td.limapuluh {
	width: 50px;
}
table > tbody > tr td.tujuhpuluh {
	width: 70px;
}
table > tbody > tr td.seratus {
	width: 100px;
}
table > tbody > tr td.seratus-limapuluh {
	width: 150px;
}
table > tbody > tr td.duaratus {
	width: 200px;
}
table > tbody > tr td.tigaratus {
	width: 300px;
}
table > tbody > tr td.empatratus {
	width: 400px;
}
table > tbody > tr td.limaratus {
	width: 500px;
}
#product-box{
	border-left: 1px solid rgb(192,192,192);
	border-top: 1px solid rgb(192,192,192);
	border-bottom: 1px solid rgb(192,192,192);
	padding: 10px;
}
#untuk-harga{
	max-width: 700px;
}
#form-pemesan{
	max-width: 400px;
}
.card-panel.spesifikasi{
	max-width: 320px;
}
.arrow-style{
	background: url(../img/icon/ic_done_black_18dp.png) no-repeat;
	background-position: center left;	
	padding-left: 30px;
	line-height: 2;
}
div.paragraph{
	text-align: justify;
	word-wrap: normal;
	white-space: normal;
	margin-bottom: 20px ;
}
img.with-border-effect{
	border: solid 1px #e0e0e0;
	margin-top: 10px;
	-moz-box-shadow: 1px 1px 1px 0px #e0e0e0;
	-webkit-box-shadow: 1px 1px 1px 0px #e0e0e0;
	box-shadow: 1px 1px 1px 0px #e0e0e0;
	transition: box-shadow 0.9s;
	transition: -webkit-box-shadow 0.9s;
	transition: -moz-box-shadow 0.9s;	
}
img.with-border-effect:hover{
	-moz-box-shadow: 3px 3px 3px 0px #e0e0e0;
	-webkit-box-shadow: 3px 3px 3px 0px #e0e0e0;
	box-shadow: 3px 3px 3px 0px #e0e0e0;
}
.box-404{
	width: 100%;
	height: 100%;
	padding: 50px 0px 0px 0px;
}
.box-404-content{
	max-width: 600px;
	margin: 0 auto;
	padding: 20px 20px 20px 20px ;
	border: solid 1px #e0e0e0;
	border-radius: 5%;
}
.corousel-margin{
	margin-bottom: -100px;
}
.text1{
	font-size: 90px !important;
}
.text2{
	font-size: 80px !important;
}
.text3{
	font-size: 70px !important;
}
.text4{
	font-size: 60px !important;
}
.text5{
	font-size: 50px !important;
}
.text6{
	font-size: 40px !important;
}