* {
	font-family: 'Muli', sans-serif;
}

/*.navbar.initial {
	padding: 35px 0px;
	background: none;
}*/

.navbar {
	background: #0196FA;
	padding: 10px 0px;
	transition: all 0.5s ease;
}

.navbar a {
	color: #fff;
	font-weight: bold;
}

/* Make the image fully responsive */
.carousel-inner img {
	width: 200%;
	height: auto;
}

.poppins {
	font-family: 'Poppins';
}

.muli {
	font-family: 'Muli';
}

.responsive {
	width: 100%;
	height: auto;
}

.box {
	width: 600px;
	height: 100px;
	padding: 50px;
	border: 1px solid red;
	margin-top: 500px
	background-color: blue;
}

/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
/*//tampilan web*/
@media screen and (min-width: 601px) {
	div.dekstop {
		font-size: 30px;
		margin-top: 10px;
		margin-bottom: 30px;
	}
  .navbar.initial {
  padding: 35px 0px;
  background: none;
}
  .tentang{
    margin-top: 300px;
  }
  .carousel1{
    margin-top: 250px;
  }
  .landing {
    font-size: 48px;
    font-weight: 700px;
  }
  .landing1 {
    font-size: 24px;
    color: #fff;
  }
  /*.icon {
    height: 90px;
  }
  .quotes {
    height: 400px;
  }*/

}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
/*tampilan hp*/
@media screen and (max-width: 667px) {
	div.hp {
		font-size: 4vw;
		margin-top: 0px;
		line-height: 20px;
		margin-bottom: 30px;
	}
  .navbar.initial {
  padding: 5px 0px;
  background: none;
  /*background-color: #0196FA;*/
  }
  .tentangKami{
    margin-top: 30px;
    position: relative;
  }
  .navbar-brand {
    margin-left: 20px;
  }
  .img-responsive.logo {
    width: 100px;
  }
  .img-responsive.playStore {
    width: 130px;
  }
  .img-responsive.sosmed {
    width: 20px;
  }
  .img-responsive.telah-diliput {
    width: 230px;
  }
  .img-responsive.telah-diliput1 {
    width: 170px;
  }
  .img-responsive.telah-diliput2 {
    width: 90px;
  }
  .navbar-nav {
    text-align: center;
  }
  #navbarNav {
    background-color: #0196FA;
  }
  .tentang{
    font-size: 15px;
    margin-top: 100px;
    position: relative;
  }
  
  .aplikasi {
    font-size: 17px;
    position: relative;
    /*margin-top: 50px;*/
  }
  .carousel1 {
    margin-top: 70px;
    /*margin-left: 5px; */
  }
  .landing {
    font-size: 13px;
    margin-top: 5px;
    position: relative;
    /*line-height: 4.3em;*/
    /*letter-spacing: 7px;*/
  }
  
  .landing1 {
    font-size: 8px;
    margin-bottom: 30px;
    position: relative;

  }
  .landing2 {
    /*padding: 5px 10px;*/
    /*border-radius: 20px;*/
    /*box-shadow: 5px 5px 5px #333;*/
    margin-bottom: 20px;
    padding-bottom: 30px;
    font-size: 7px;
    font-weight: 8px;

    /*width: 50px;*/
  }
  .icon{
   height: 30%;
  }
  .nav-link.mobile{
    font-color: white;
  }
}


.logo2{
  margin-top: 34px;
  margin-left: -10px;
}


  


/*mapss */
.google-maps  {
position: relative;
padding-bottom: 65.25%;
/*padding-top: 30px;*/
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100%  !important;
}

/*======*/

.submit {
  border-radius: 0px;
}

.btn-coba {
	padding: 15px 20px;
	border-radius: 50px;
	box-shadow: 5px 5px 5px #333;
	font-weight: 600;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#21b9ff+0,0297fa+100 */
	background: rgb(33, 185, 255); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(33, 185, 255, 1) 0%, rgba(2, 151, 250, 1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(33, 185, 255, 1) 0%, rgba(2, 151, 250, 1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(33, 185, 255, 1) 0%, rgba(2, 151, 250, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#21b9ff', endColorstr='#0297fa', GradientType=0); /* IE6-9 */
}


.kurachat {
	color: white;
	bottom: 30px;
	right: 20px;
	background: linear-gradient(to bottom, #33cc33 50%, #33cc33 44%, #33cc33 99%);
	color: white;
	padding: 5px 15px;
	border: 0px;
	box-shadow: 2px 2px 2px grey;
	border-radius: 10%
	color: rgba(0, 0, 0, 0.6);
	position: fixed;
	z-index: 99999999;
	border-radius: 20px;
	padding: 10px;
}

/*.kurachat span{
	background:green;padding:3px 6px;border-radius:100%;color:white}*/
.kurachat
a {
	color: rgba(0, 0, 0, 0.6)
}

/*body {
  margin: 40px;
}*/

.wrapper {
	display: grid;
	grid-template-columns: 100px 100px 100px 100px;
	grid-gap: 50px;
	background-color: #fff;
	color: #444;
	/*align-content: center;*/

}

.box {
	background-color: #444;
	color: #fff;
	/*align-content: center;*/
	/*padding-left: 50px;*/
	border-radius: 5px;
	padding: 30px;
	font-size: 150%;
	width: 130px;
	height: 40px;
}




/*FORM KONTAK*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
*:focus {
	outline: none;
}

body {
	margin: 0;
	padding: 0;
	background: #DDD;
	font-size: 16px;
	color: #222;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}


h1 {
	margin: 0 0 20px 0;
	font-weight: 300;
	font-size: 28px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
	display: block;
	box-sizing: border-box;
	margin-bottom: 20px;
	padding: 4px;
	width: 220px;
	height: 32px;
	border: none;
	border-bottom: 1px solid #AAA;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 15px;
	transition: 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus {
	border-bottom: 2px solid #16a085;
	color: #16a085;
	transition: 0.2s ease;
}

input[type="submit"] {
	margin-top: 28px;
	width: 120px;
	height: 32px;
	background: #16a085;
	border: none;
	/*border-radius: 2px;*/
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	text-transform: uppercase;
	transition: 0.1s ease;
	cursor: pointer;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
	opacity: 0.8;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	transition: 0.1s ease;
}

input[type="submit"]:active {
	opacity: 1;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	transition: 0.1s ease;
}


button.social-signin {
	margin-bottom: 20px;
	width: 220px;
	height: 36px;
	border: none;
	border-radius: 2px;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	transition: 0.2s ease;
	cursor: pointer;
}

/*google*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/*mozila*/
/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

/*END FORM KONTAK*/

/* Slider */
.brands {
	width: 100%;
	padding-top: 90px;
	padding-bottom: 90px
}

.brands_slider_container {
	height: 130px;
	border: solid 1px #e8e8e8;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
	padding-left: 97px;
	padding-right: 97px
}

.brands_slider {
	height: 100%;
	margin-top: 50px
}

.brands_item {
	height: 100%
}

.brands_item img {
	max-width: 100%
}

.brands_nav {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	padding: 5px;
	cursor: pointer
}

.brands_nav i {
	color: #e5e5e5;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease
}

.brands_nav:hover i {
	color: #676767
}

.brands_prev {
	left: 40px
}

.brands_next {
	right: 40px
}