.float-left {
	float: left;
}
.float-right {
	float: right;
}

.content_doc {
	width: 100%;
}

.inputbox-1 {
	border-radius: 8px;
	padding: 5px 10px;
	border: #DDD solid 1px;
	color: #999;
	width: 90%;
}
.textarea-1 {
	padding: 5px  10px;
	border: #DDD solid 1px;
	color: #999;
	width: 90%;
}




.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
  border: 1px solid gray;
  color: #00407B;
  background: #FFD0A0;
  padding: 6px 15px;
  border-radius: 6px;
  font-weight: bold;
}
.btn:hover {
	color: white;
	background: #FFB080;
	cursor: pointer;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.font-title {
	font-size: 18px;
	font-family: 'News Cycle';
	font-weight: bolder;
}






.div-slide-down {
	width: calc(100% - 25px);
	padding: 0px 10px 10px 15px;
	font-size: 13px;
}

.div-slide-down > p {
	font-family: 'Oswald';
	font-size: 18px;
	color: #00407B;
	padding-bottom: 5px;
	padding-left: 10px;
}

.div-slide-down > div {
	border-left: solid 10px orange;
	padding: 8px 10px 8px 10px;
	margin-bottom: 3px;
	outline: none;
	cursor: pointer;

	background: #00407B;
	color: white;

	font-family: 'Titilium Web';
}

.div-slide-down > div:hover , .div-slide-down > div:focus {
	border-left: solid 10px #4570A0;
	background: #EEE;
	color: black;
}

.div-slide-down > div > div {
	width: 0px;
	-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
}

.div-slide-down > div:focus > div {
	width: calc(100% - 20px);
	
	border: solid 1px #CCC;
	border-top: none;

	margin-top: 5px;
	padding: 5px;
}



.list-menu-content {
	margin-bottom: 5px;
}
.list-menu-content-sub {
	float: left;
	width: calc(100% / 4);
	text-align: center;
	padding: 10px 0px;

	cursor: pointer;
	position: relative;
	
	font-family: 'Copperplate Gothic Light','Copperplate Gothic', sans-serif;
	font-size: 13px;

	color: white;
	background: #00407B;
    background: -webkit-linear-gradient(#00407B, #4570A0, #00407B) !important;
    background: -o-linear-gradient(#00407B, #4570A0, #00407B) !important;
    background: -moz-linear-gradient(#00407B, #4570A0, #00407B) !important;
    background: linear-gradient(#00407B, #4570A0, #00407B) !important;
}
.list-menu-content-sub > div {
	position: absolute;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: orange;
}






.page-style {
	text-align: center;
}
.page-style img {
	vertical-align: middle;
	cursor: pointer;
}
.page-style a {
	text-decoration: none;
	color: #777;
}
.page-style .link-selected {
	color: black;
	font-weight: bold;
}

.table-text-center td {
	text-align: center !important;
}
.table-header {
	background: #E0F0FF !important;
}

@media only screen and (min-width: 1170px) {
	.doc_left {
		width: 50%;
	}
	.doc_left_after {
		width: 50%;
	}
	.doc_left_after_2 {
		width: 100%;
	}

	.div_img_triple {
		margin-left: 2%;
		width: 30%;
		position: relative;
	}

	.doc_menu {
		width: calc(30% - 1px);
	}
	.doc_content {
		width: 70%;
	}

	.dashboard_menu {
		width: calc(30% - 11px);
		padding-right: 10px;
	}
	.dashboard_content {
		width: calc(70% - 11px);
		padding-left: 10px;
	}

	.doc_menu_left, .doc_menu_left_after {
		width: 100%;
		padding-bottom: 20px;
	}


	.table-produk-top {
		width: calc(90% + 70px);
		padding: 20px calc(5% - 35px);
	}
	.table-produk {
		width: calc(100% / 4 - 6px);
		margin-left: 3px;
		margin-right: 3px;
		margin-bottom: 20px;
	}
	.table-produk-overide {
		width: calc(100% / 3 - 6px);
	}

	#img-zoom-org {
		height: 580px;
	}
	#img-zoom-org img:focus
	{
		width: 300%;
	}

	.img_csr {
		width: calc((100% / 3) - 10px);
		height: 160px;
		margin: 5px;
	}

	.title_produk_size {
		font-size: 25px;
	}

	.contactSosmed {
		margin-top: -60px;
	}
}

@media handheld, only screen and (max-width: 1169px) and (min-width: 790px) {
	.doc_left , .doc_left_after , .doc_left_after_2 , .doc_menu , .doc_content {
		width: 100%;
		padding-bottom: 20px;
	}
	.doc_menu div {
		padding-right: 20px;
	}
	.doc_menu_left, .doc_menu_left_after {
		width: calc(50% - 20px);
	}

	.div_img_triple {
		margin-left: 2%;
		width: 30%;
		position: relative;
	}

	

	.table-produk-top {
		width: calc(90% + 70px);
		padding: 20px calc(5% - 35px);
	}
	.table-produk {
		width: calc(100% / 4 - 6px);
		margin-left: 3px;
		margin-right: 3px;
		margin-bottom: 20px;
	}
	.table-produk-overide {
		width: calc(100% / 3 - 6px);
	}



	#img-zoom-org {
		height: 830px;
	}
	#img-zoom-org img:focus
	{
		width: 300%;
	}
	.p-menu {
		text-align: center;
	}

	.img_csr {
		width: 235px;
		height: 155px;
		margin: calc(0.7%);
	}


	.title_produk_size {
		font-size: 25px;
	}

	.contactSosmed {
		margin-top: -60px;
	}
}

@media handheld, only screen and (max-width: 789px) {
	.doc_left , .doc_left_after , .doc_left_after_2 , .doc_menu , .doc_content {
		width: 100%;
		padding-bottom: 20px;
	}
	.doc_menu div {
		padding-right: 20px;
	}

	

	.table-produk-top {
		width: calc(90%);
		padding: 20px calc(5%);
	}
	.table-produk {
		width: calc(100% - 6px);
		margin-left: 3px;
		margin-right: 3px;
		margin-bottom: 20px;
	}



	.div_img_triple {
		width: 100%;
		position: relative;
		height: 90px;
	}

	.doc_menu_left, .doc_menu_left_after {
		width: 100%;
		padding-bottom: 20px;
	}

	#img-zoom-org {
		height: 500px;
	}
	#img-zoom-org img:focus
	{
		width: 450%;
	}

	.list-menu-content-sub {
		width: 100% !important;
	}

	.p-menu {
		text-align: center;
	}

	.img_csr {
		width: 235px !important;
		height: 160px;
		margin: 5px;
	}


	.title_produk_size {
		font-size: 18px;
	}

	.contactSosmed {
		margin-top: 10px;
	}
}