* {
	padding:0;
	margin:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-box-sizing:border-box;
}
img {
	max-width: 100%;
	height: auto;
}
ul,ol {
	list-style-type: none;
}

body {
	background-color: #0273c7;
	font-family: 'cambria', sans-serif;
}

.color_1{color:#FA9E0D;}
.color_2{color:#FA9E0D;}
.color_3{color:#FA9E0D;}
.color_4{color:#FA9E0D;}
.color_5{color:#FA9E0D;}

.bg_1{background-color:#2c3e50;} /*gelap*/
.bg_2{background-color:#0273c7;} /*biru*/
.bg_3{background-color:#2c3e50;} /*gelap*/
.bg_4{background-color:#2c3e50;} /*gelap*/
.bg_5{background-color:#2c3e50;} /*gelap*/
.bg_6{background-color:#2c3e50;} /*gelap*/

.pb10{padding-bottom:10px}
.pb5{padding-bottom:5px}
.p10{padding:10px;}


.img_1 {width:250px;height:45px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -33px -165px;}
.img_2 {width:64px;height:64px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -11px -9px;margin-left:-12px;margin-top:-6px;}
.img_3 {width:64px;height:64px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -95px -10px;margin-left:-8px;margin-top:-6px;}
.img_4 {width:64px;height:64px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -170px -9px;margin-left:-12px;margin-top:-11px;}
.img_5 {width:64px;height:64px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -242px -9px;margin-left:-12px;margin-top:-11px;}
.img_6 {width:64px;height:64px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -6px -78px;margin-left:-12px;margin-top:-11px;}
.img_7 {width:64px;height:64px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -83px -83px;margin-left:-12px;margin-top:-11px;}
.img_8 {width:64px;height:64px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -164px -83px;margin-left:-12px;margin-top:-11px;}

.img_9{width:60px;height:60px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -245px -85px;margin:5px;display: -webkit-inline-box;}
.img_10{width:95px;height:60px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -16px -225px;margin:5px;display: -webkit-inline-box;}
.img_11{width:91px;height:60px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -14px -290px;margin:5px;display: -webkit-inline-box;}
.img_12{width:118px;height:60px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -11px -360px;margin:5px;display: -webkit-inline-box;}
.img_13{width:75px;height:60px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -125px -290px;margin:5px;display: -webkit-inline-box;}
.img_14{width:110px;height:60px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -130px -360px;margin:5px;display: -webkit-inline-box;}
.img_15{width:75px;height:60px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -130px -225px;margin:5px;display: -webkit-inline-box;}
.img_16{width:168px;height:60px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -125px -440px;margin:5px;display: -webkit-inline-box;}
.img_17{width:98px;height:60px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -14px -440px;margin:5px;display: -webkit-inline-box;}
.img_18{width:68px;height:60px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -245px -365px;margin:5px;display: -webkit-inline-box;}
.img_19{width:75px;height:105px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -220px -225px;margin:5px;display: -webkit-inline-box;}
.img_20{width:45px;height:45px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -10px -500px;margin:5px;display: -webkit-inline-box;}

.img_21{width:60px;height:60px;background-image: url(../img/why.svg);background-size:200px 260px;background-repeat: no-repeat;background-position: -5px -16px;margin:5px;display: -webkit-inline-box;}
.img_22{width:60px;height:60px;background-image: url(../img/why.svg);background-size:200px 260px;background-repeat: no-repeat;background-position: -70px -16px;margin:5px;display: -webkit-inline-box;}
.img_23{width:60px;height:60px;background-image: url(../img/why.svg);background-size:200px 260px;background-repeat: no-repeat;background-position: -137px -16px;margin:5px;display: -webkit-inline-box;}
.img_24{width:60px;height:60px;background-image: url(../img/why.svg);background-size:200px 260px;background-repeat: no-repeat;background-position: -5px -75px;margin:5px;display: -webkit-inline-box;}
.img_25{width:60px;height:60px;background-image: url(../img/why.svg);background-size:200px 260px;background-repeat: no-repeat;background-position: -70px -75px;margin:5px;display: -webkit-inline-box;}
.img_26{width:60px;height:60px;background-image: url(../img/why.svg);background-size:200px 260px;background-repeat: no-repeat;background-position: -137px -75px;margin:5px;display: -webkit-inline-box;}
.img_27{width:60px;height:60px;background-image: url(../img/why.svg);background-size:200px 260px;background-repeat: no-repeat;background-position: -5px -132px;margin:5px;display: -webkit-inline-box;}
.img_28{width:60px;height:60px;background-image: url(../img/why.svg);background-size:200px 260px;background-repeat: no-repeat;background-position: -70px -132px;margin:5px;display: -webkit-inline-box;}
.img_29{width:60px;height:60px;background-image: url(../img/why.svg);background-size:200px 260px;background-repeat: no-repeat;background-position: -137px -134px;margin:5px;display: -webkit-inline-box;}
.img_30{width:60px;height:60px;background-image: url(../img/why.svg);background-size:200px 260px;background-repeat: no-repeat;background-position: -5px -190px;margin:5px;display: -webkit-inline-box;}
.img_31{width:60px;height:60px;background-image: url(../img/why.svg);background-size:200px 260px;background-repeat: no-repeat;background-position: -73px -190px;margin:5px;display: -webkit-inline-box;}




.container {
	width:100%;
}

}
.container {
	margin:10px auto;
	position: relative;
	overflow: hidden;
}
.page-title {
	margin:17px auto;
	text-align: center;
	color:#fff;
	font-size: 17px;
}
.page-title h1 {
	font-size:40px;
	line-height: 1;
}
.page-title a{
	color:#ff7777;
	text-decoration: none;
}
.page-title a:hover{
	text-decoration: underline;
	color: #ff3333;
}
.circle-menu-box {
	width:600px;
	height: 600px;
	position: relative;
	margin:auto;
	animation: spin 15s linear infinite;
	-moz-animation: spin 15s linear infinite;
	-webkit-animation: spin 15s linear infinite;
	-o-animation: spin 15s linear infinite;
	-ms-animation: spin 15s linear infinite;
}

.circle-menu-box:hover{
	-webkit-animation-play-state:paused;
	animation-play-state:paused;	
}
.circle-menu-box:hover > a.menu-item {
	-webkit-animation-play-state:paused;
	animation-play-state:paused;
}

	.circle-menu-box a.menu-item {
		display: block;
		text-decoration: none;
		border-radius: 100%;
		margin:10px;
		text-align: center;
		width:100px;
		height:100px;
		background-color: #fff;
		opacity: 0.7;
		padding:15px;
		position: absolute;
		font-size: 45px;

		transition:all 0.5s;
		-moz-transition:all 0.5s;
		-webkit-transition:all 0.5s;
		-o-transition:all 0.5s;
		animation: tes 15s linear infinite;
		-moz-animation: tes 15s linear infinite;
		-webkit-animation: tes 15s linear infinite;
		-o-animation: tes 15s linear infinite;
		-ms-animation: tes 15s linear infinite;
	}

	.circle-menu-box a.menu-item:hover {
		transform:scale(2);
		-webkit-transform:scale(1.5);
		-moz-transform:scale(1.5);
		-o-transform:scale(1.5);
		color:#fff;
		/*background: #32CD32;*/

		border: 2px solid #ffffff;
		
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
}
	@keyframes tes {
		0% { transform: rotate(360deg); }
		100% { transform: rotate(0deg); }
	}
	
	.warna1 {
		color: #d22705;
		border: 2px solid #d22705;
	}
	
	.warna2 {
		color: #af2981;
		border: 2px solid #af2981;
	}
	
	.warna3 {
		color: #631c87;
		border: 2px solid #631c87;
	}
	
	.warna4 {
		color: #6746a6;
		border: 2px solid #6746a6;
	}
	
	.warna5 {
		color: #2953c5;
		border: 2px solid #2953c5;
	}
	
	.warna6 {
		color: #38838c;
		border: 2px solid #38838c;
	}
	
	.warna7 {
		color: #de4a03;
		border: 2px solid #de4a03;
	}
	
	.circle-menu-box a.warna1:hover {
		background: #d22705;
	}
	
	.circle-menu-box a.warna2:hover {
		background: #af2981;
	}
	
	.circle-menu-box a.warna3:hover {
		background: #631c87;
	}
	
	.circle-menu-box a.warna4:hover {
		background: #6746a6;
	}
	
	.circle-menu-box a.warna5:hover {
		background: #2953c5;
	}
	
	.circle-menu-box a.warna6:hover {
		background: #38838c;
	}
	
	.circle-menu-box a.warna7:hover {
		background: #de4a03;
	}
	
	.kotak {
	width:600px;
	height: 600px;
	position: relative;
	margin:auto;
	}
	
	.selector {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
}

	.bunder{
	  text-align: center;
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  padding: 40px;
	  border-radius: 50%;
	  border: 0;
	  background-color: #fff;
	  opacity: 0.4;
	  font-size: 25px;
	  transition: all .1s;
	  border: 3px dashed #0273c7;
	  -webkit-text-stroke: 2px #053275;
  -webkit-text-fill-color: #fff;
  -webkit-animation: fill 0.5s infinite alternate;
	}
	
	.bunder:hover{
		background-color: #000;
		border: 3px dashed #fff;
		-webkit-text-stroke: 2px #fff;
		-webkit-text-fill-color: #000;
		-webkit-animation: fill 0.5s infinite alternate;
	}
	
	@-webkit-keyframes fill {
  from { -webkit-text-fill-color: steelblue; }
  to { -webkit-text-fill-color: slategrey; }
}
	
	.produk{
			border-radius: 18%;
			border: 2px solid #ffffff;
			padding: 5px;
			position:relative;
		}
	
	.posisi{
		visibility: hidden; position: absolute; margin: 0 auto;
        top: 80px; left: 0px; width: 1300px; height: 570px; overflow: hidden;
	}

	.topnav {
	  overflow: hidden;
	}

	.topnav a {
	  float: right;
	  display: block;
	  color: #f2f2f2;
	  text-align: center;
	  padding: 14px 16px;
	  text-decoration: none;
	  font-size: 17px;
	}

	.topnav a:hover {
	  background-color: #ddd;
	  color: black;
	}

	.topnav .icon {
	  display: none;
	}
	.partner{background-color:#ffffff; padding:10px; width:100%; position:relative; margin-left:auto; margin-right:auto; left:0; right:0; text-align:center;}
	.footer-distributed{
		background-color: #053275;
		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
		box-sizing: border-box;
		width: 100%;
		text-align: left;
		font: 12px sans-serif;

		padding: 55px 50px;
		margin-top: 20px;
	}			

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: inline-block;
		vertical-align: top;
	}

	/* Footer left */

	.footer-distributed .footer-left{
		width: 11%;
	}

	/* The company logo */

	.footer-distributed h3{
		color:  #ffffff;
		font: normal 36px 'Cookie', cursive;
		margin: 0;
	}

	.footer-distributed h3 span{
		color:  #5383d3;
	}

	/* Footer links */

	.footer-distributed .footer-links{
		color:  #ffffff;
		margin: 20px 0 12px;
		padding: 0;
	}

	.footer-distributed .footer-links a{
		display:inline-block;
		line-height: 1.8;
		text-decoration: none;
		color:  inherit;
	}

	.footer-distributed .footer-company-name{
		color:  #8f9296;
		font-size: 14px;
		font-weight: normal;
		margin: 0;
	}

	/* Footer Center */

	.footer-distributed .footer-center{
		width: 45%;
	}

	.footer-distributed .footer-center i{
		background-color:  #33383b;
		color: #ffffff;
		font-size: 25px;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		text-align: center;
		line-height: 42px;
		margin: 10px 15px;
		vertical-align: middle;
	}

	.footer-distributed .footer-center i.fa-envelope{
		font-size: 17px;
		line-height: 38px;
	}

	.footer-distributed .footer-center p{
		display: inline-block;
		color: #ffffff;
		vertical-align: middle;
		margin:0;
	}

	.footer-distributed .footer-center p span{
		display:block;
		font-weight: normal;
		font-size:14px;
		line-height:2;
	}

	.footer-distributed .footer-center p a{
		color:  #5383d3;
		text-decoration: none;;
	}


	/* Footer Right */

	.footer-distributed .footer-right{
		max-width: 40%;
	}

	.footer-distributed .footer-company-about{
		line-height: 20px;
		color:  #92999f;
		font-size: 13px;
		font-weight: normal;
		margin: 0;
	}

	.footer-distributed .footer-company-about span{
		display: block;
		color:  #ffffff;
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.footer-distributed .footer-icons{
		margin-top: 25px;
	}
		
	.footer-distributed .footer-icons a{
		display: inline-block;
		width: 35px;
		height: 35px;
		cursor: pointer;
		background-color:  #33383b;
		border-radius: 2px;

		font-size: 20px;
		color: #ffffff;
		text-align: center;
		line-height: 35px;

		margin-right: 3px;
		margin-bottom: 5px;
	}
.footer_1 {max-width: 1200px;margin: auto;}

/* If you don't want the footer to be responsive, remove these media queries */


@media (max-width: 1360px) {
	.circle-menu-box {
	width:550px;
	height: 550px;
	}
	.kotak {
	width:550px;
	height: 550px;
	}

	.circle-menu-box a.menu-item {
		margin:10px;
		width:90px;
		height:90px;
		padding:14px;
		font-size: 40px;	
	}
	
	.selector {
  width: 180px;
  height: 180px;
  margin-top: -94px;
  margin-left: -92px;
	}

	.bunder{
		padding: 35px;
		font-size: 23px;
	}
	.produk{
		margin-top: 50px;
	}
}

@media (max-width: 1260px) {
	.circle-menu-box {
	width:500px;
	height: 500px;
}
	.kotak {
	width:500px;
	height: 500px;
	}

	.circle-menu-box a.menu-item {
		margin:10px;
		width:80px;
		height:80px;
		padding:11px;
		font-size: 36px;	
	}
	.selector {
  width: 160px;
  height: 160px;
  margin-top: -82px;
  margin-left: -80px;
	}

	.bunder{
		padding: 30px;
		font-size: 21px;
	}
	
	.produk{
		margin-top: 60px;
	}
}

@media (max-width: 1145px) {
	.circle-menu-box {
	width:450px;
	height: 450px;
}
	.kotak {
	width:450px;
	height: 450px;
	}

	.circle-menu-box a.menu-item {
		margin:10px;
		width:70px;
		height:70px;
		padding:9px;
		font-size: 32px;	
	}
	.selector {
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
	}

	.bunder{
		padding: 25px;
		font-size: 19px;
	}
	.produk{
		margin-top: 60px;
	}
}

@media (max-width: 1035px) {
	.circle-menu-box {
	width:400px;
	height: 400px;
}
	.kotak {
	width:400px;
	height: 400px;
	}

	.circle-menu-box a.menu-item {
		margin:10px;
		width:60px;
		height:60px;
		padding:7px;
		font-size: 28px;	
	}
		.selector {
  width: 120px;
  height: 120px;
  margin-top: -62px;
  margin-left: -60px;
	}

	.bunder{
		padding: 20px;
		font-size: 16px;
	}
	.produk{
		margin-top: 55px;
	}
}

@media (max-width: 920px) {
	.circle-menu-box {
	width:350px;
	height: 350px;
}
	.kotak {
	width:350px;
	height: 350px;
	}

	.circle-menu-box a.menu-item {
		margin:10px;
		width:50px;
		height:50px;
		padding:5px;
		font-size: 24px;	
	}
		.selector {
  width: 100px;
  height: 100px;
  margin-top: -53px;
  margin-left: -51px;
	}

	.bunder{
		padding: 15px;
		font-size: 13px;
	}
	.produk{
		margin-top: 50px;
	}
}

@media (max-width: 810px) {

.circle-menu-box {
	width:300px;
	height: 300px;
}
	.kotak {
	width:300px;
	height: 300px;
	}

	.circle-menu-box a.menu-item {
		margin:10px;
		width:40px;
		height:40px;
		padding:3px;
		font-size: 20px;	
	}
		.selector {
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -47px;
	}

	.bunder{
		padding: 15px;
		font-size: 13px;
	}
	.produk{
		margin-top: 50px;
	}
	
		.footer-distributed{
		font: bold 14px sans-serif;
	}

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: left;
	}

	.footer-distributed .footer-center i{
		margin-left: 0;
	}

	
}


@media only screen and (max-width:750px) and (min-width:0px){
.header-basic .header-limiter h1 {display:flex;float:left;}
.header-basic {
	padding: 0px;
}
.topnav a {display: none;}
.topnav a.icon {
    float: right;
    display: block;
}
.topnav.responsive a:first-child {margin-top:80px;}
.topnav.responsive {position: absolute;width:100%;z-index:100;background-color:#053275;height:100%;}
.topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
}
.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
}
.img_1{margin-top:20px;margin-left:10px;z-index:1000;}
.img_19 {width:250px;height:40px;background-image: url(../img/img_sprite.png);background-repeat: no-repeat;background-position: -33px -165px;}
.icon{margin-top:10px;}
.footer-distributed {padding:20px;}
.footer_1{width:100%;}
.footer-distributed .footer-left{max-width: 100%; text-align: center;}
.footer-distributed .footer-center{max-width: 100%;}
.footer-distributed .footer-right{max-width: 100%;}
}

@media (max-width: 700px) {
	.circle-menu-box {
	width:275px;
	height: 275px;
}
	.kotak {
	width:275px;
	height: 275px;
	}

	.circle-menu-box a.menu-item {
		margin:10px;
		width:35px;
		height:35px;
		padding:3px;
		font-size: 18px;	
	}
		.selector {
  width: 90px;
  height: 90px;
  margin-top: -45px;
  margin-left: -44px;
	}

	.bunder{
		padding: 13px;
		font-size: 12px;
	}
	.produk{
		margin-top: 30px;
	}
}

@media only screen and (max-width:620px) and (min-width:0px){
	.posisi{
		position: relative;
		top: 0px;
	}
}