* {
	padding:0;
	margin:0;
	font-family: 'mainfont';
}
@font-face {
	font-family: mainfont;
	src:url(tahoma.ttf);
}
a {
	color: inherit;
	text-decoration: none;
}
/*.medsos {
	padding:10px 0;
	background-color: #009999;
}
.medsos ul li {
	display: inline-block;
	color: #fff;
	margin-right: 10px;
}*/
.container {
	width:80%;
	margin:0 auto;
}
.container:after {
	content:'';
	display: block;
	clear: both;
}

header {
	background-color: rgba(215,215,215,.8);
	width: 100%;
	/* animation magic */
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	z-index: 9999;
	top: 0;
	position: sticky;
}
header ul {
	float: left;
	width: 100%;
	margin-top: .4vh;
	/*display: flex;*/
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	list-style: none;
}
header a img{
	float: left;
	max-width: 24vw;
	/*max-height: 12.5vh;*/
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	/*line-height: 4.3vh;*/
	/* animation magic */
	display: flex;
  	justify-content: flex-start;
}
header ul.topnav li {
	float: right;
}
header ul.topnav li a {
	margin:2.27vw 1.5vw;
	font-size: 1.4vw;
	display: block;
	transition:.5s;
}
header ul.topnav li a:hover {
	color: #009999;
	transition:.5s;
}
.fontmenu {
	padding: 0 0;
}
.shrink {
  	max-width: 14.6vw;
}
header ul.topnav li a.shrink1 {
  	margin: 1.15vw 1.5vw;
  	font-size: 1.17vw;
}
.active {
	color: #009999;
	border-bottom : .5vh solid;
}

header ul.topnav1 {
	display: inline-block;
}
header ul.topnav1 li {
	display: inline-block;
	margin-top: 0;
}
header ul.topnav1 li a {
	margin:0 1.5vw;
	display: block;
	transition:.5s;
}
header ul.topnav1 li a:hover {
	color: #009999;
	transition:.5s;
}

.cover {
	background-image: url('../img/cover.jpg');
	background-size: cover;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.banner {
	padding: 3em 0;
	height: 50vw;
	background-color: #dde7ed;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.banner h2 {
	color: #666;
	z-index: 1;
	border:0px solid #fff;
	font-size: 2.2em;
}
section.about {
	padding:1em 0;
	margin: 0;
}
section {
	padding:1em 0;
}
section h3 {
	text-align: center;
	padding:1em 0;
	color: #009999;
}
section h5 {
	text-align: center;
	margin-top: 1.5em 0;
	color: #595959;
	font-size: 1.3em;
}
section h6 {
	text-align: center;
	padding:0px 0;
	color: #595959;
	font-size: 1.2em;
}

.about {
	padding-bottom: 0;
	background-color: #e6eef2;
}

.projects {
	padding-bottom: 5em;
	background-color: #dde7ed;
}

.contact {
	padding-bottom: 5em;
	padding-top: 3em;
	background-color: #dde7ed;
	min-height: 59.5vh;
}

.about p {
	color: #595959;
	word-spacing: .35em;
	line-height: 1.62em;
	margin-bottom: 1.4em;
	text-align: justify;
}

.projects p {
	color: #595959;
	word-spacing: .35em;
	line-height: 1.62em;
	margin-bottom: .7em;
	text-align: justify;
}

.projects table {
	color: #595959;
	word-spacing: .35em;
	line-height: 1.43em;
	margin-bottom: 0.7em;
	text-align: left;
}

.box {
	color: #009999;
	margin-bottom: 1.7em;
}
.box:after {
	content: '';
	display: block;
	clear: both;
}
.imgstruk {
	width:80%;
}
.imgwycs {
	width:50%;
}
.imgproj {
	width:90%;
}
.box .col-2 {
	width:40%;
	margin: 0 5%;
	padding:1.3em;
	box-sizing: border-box;
	text-align: center;
	float: left;
}
.box .contactus {
	width:50%;
	padding:1.5em;
	box-sizing: border-box;
	text-align: center;
	float: right;
}
.box .col-6 {
	width:16.66%;
	padding-right: 1.5em;
	padding-left: 1.5em;
	padding-bottom: 1.5em;
	box-sizing: border-box;
	text-align: center;
	float: left;
}


.btn {
	line-height: 1.7em;
	margin-bottom: 1000px;
	border: 1px solid;
	padding: .7em;
	color: #3b3b3b;
	text-align: justify;
}
.btn:hover {
	background-color: #009999;
	color: #ffffff;
}
.box .col-2 h4 {
	margin:1.3em 0;
}
.box .contactus h4 {
	margin:.6em 0;
	color: #595959;
}
.box .contactus p {
	color: #595959;
	line-height: 1.4em;
}
.box .col-6 p {
	margin: .8em 0;
	color: #595959;
	word-spacing: 0em;
	line-height: 1.2em;
	text-align: center;
}
.foto {
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.whyyouchooseus {
	background-color: #009999;
}
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
footer {
	padding:3vh 0;
	background-color: #333;
	color: #fff;
	text-align: center;
	font-size: smaller;	
}
.bg-loader {
	background-color: #eee;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bg-loader .loader {
	width:100px;
	height: 100px;
	border:3px solid #fff;
	border-radius: 50%;
	border-top-color: #009999;
	border-right-color: #009999;
	border-bottom-color: #009999;
	animation: puterin .8s linear infinite;
}
.label {
	background-color: #009999;
	color: #fff;
	padding: .4em 0;
	/*max-height: 2.41vh;   12.5 + 0.4 + 0.4 + 2 = 15.3  */

}
.label p {
	font-size: smaller;
}
.labelhome {
	background-color: #006666;
	padding: .4vh 0;
}


/*................................................................................................................*/

.slider{
  width: 90vw;
  height: 50.625vw;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
}

.slides{
  width: 500%;
  height: 500px;
  display: flex;
  text-align: center;
}

.slides input{
  display: none;
  text-align: center;
}

.slide{
  width: 20%;
  transition: 2s;
  text-align: center;
}

.slide img{
  width: 90vw;
  height: 50.625vw;
  text-align: center;
}
.slide iframe{
  width: 90vw;
  height: 50.625vw;
  text-align: center;
}

/*css for manual slide navigation*/

.navigation-manual{
  position: absolute;
  width: 90vw;
  margin-top: 5vw;
  display: flex;
  justify-content: center;
  text-align: center;
}

.manual-btn{
  border: .2vw solid #40D3DC;
  padding: .3vw;
  border-radius: 50%;
  cursor: pointer;
  transition: 1s;
}

.manual-btn:not(:last-child){
  margin-right: 40px;
}

.manual-btn:hover{
  background: #40D3DC;
}

#radio1:checked ~ .first{
  margin-left: 0;
}

#radio2:checked ~ .first{
  margin-left: -20%;
}

#radio3:checked ~ .first{
  margin-left: -40%;
}

#radio4:checked ~ .first{
  margin-left: -60%;
}

/*css for automatic navigation*/

.navigation-auto{
  position: absolute;
  display: flex;
  width: 90vw;
  justify-content: center;
  margin-top: 41.6vw;
}

.navigation-auto div{
  border: .2vw solid #40D3DC;
  padding: .3vw;
  border-radius: 50%;
  transition: 1s;	
}

.navigation-auto div:not(:last-child){
  margin-right: 40px;
}

#radio1:checked ~ .navigation-auto .auto-btn1{
  background: #40D3DC;
}

#radio2:checked ~ .navigation-auto .auto-btn2{
  background: #40D3DC;
}

#radio3:checked ~ .navigation-auto .auto-btn3{
  background: #40D3DC;
}

#radio4:checked ~ .navigation-auto .auto-btn4{
  background: #40D3DC;
}

/*................................................................................................................*/


@keyframes puterin {
	100% {
		transform: rotate(360deg);
	}
}

@media screen and (max-width: 768px){
	.container {
		width:90%;
	}
	.banner {
		height: 37vw;
	}
	.slider{
		width: 100vw;
		height: 56.25vw;
		border-radius: 0px;
	}
	.slide img{
		width: 100vw;
		height: 56.25vw;
	}
	.slide iframe{
		width: 100vw;
		height: 56.25vw;
	}
	.navigation-manual{
		margin-top: -86.5vw;
	}
	.manual-btn {
		border: .25vw  solid #40D3DC;
  		padding: .8vw;
	}
	.navigation-auto{
		margin-top: 47vw;
	}
	.navigation-auto div{
		border: .25vw  solid #40D3DC;
  		padding: .8vw;
	}
	.box {
		margin-bottom: 1em;
	}
	.box .col-2 {
		width:100%;
		float: none;
		margin: 0 0%;
		padding-top: 0;
		box-sizing: border-box;
		text-align: center;
		float: left;
		}
	.box .contactus {
		width:100%;
		display: grid;
		margin-bottom: 1.3em;

		padding:0em;
		box-sizing: border-box;
		text-align: center;
	}
	.box .col-6 {
		width:33.3%;
		float: left;
		padding-right: .5em;
		padding-left: .5em;
		padding-bottom: .7em;
	}
	.foto {
		width: 70%;
	}
	.navigation-manual {
		display: none;
	}
	section h3 {
		font-size: .95em;
		padding: .7em;
	}
	.label {
		padding: .25em 0;
	}
	.label p {
		font-size: .7em;
	}
	.about p {
		word-spacing: .2em;
		line-height: 1.55em;
		margin-bottom: 1em;
		font-size: .83em;
	}
	.btn {
		line-height: 1.7em;
		padding: .45em;
		font-size: .83em;
	}
	.imgstruk {
		width:90%;
	}
	.imgwycs {
		width:80%;
	}
	.whyyouchooseus {
		padding: 1.1em 0;
	}
	.box .col-6 p {
		margin: .2em 0;
		word-spacing: 0em;
		line-height: 1.2em;
		font-size: .68em;
	}
	.projects {
		padding-bottom: 1em;
	}
	.projects p {
		word-spacing: .17em;
		line-height: 1.55em;
		margin-bottom: .3em;
		font-size: .8em;
	}
	.projects table {
		word-spacing: .17em;
		line-height: 1.55em;
		margin-bottom: .3em;
		font-size: .8em;
	}
	.contact {
		padding-bottom: 1em;
		padding-top: 2em;
		min-height: 78vh;
	}
	.contactus h4 {
		font-size: 3.3vw;
	}
	.contactus p {
		line-height: 1.4em;
		font-size: 3.3vw;
	}
	section h5 {
		font-size: 3.8vw;
	}
	section h6 {
		font-size: 3.7vw;
	}

	header a img {
		float: left;
		margin: 1vw 0;
		max-width: 45vw;
	}
	header ul.topnav li a {
		margin:0 0;
		font-size: 8vw;
	}
	header ul.topnav li.icon {
	    float: right;
	    display: inline-block;
	    margin-top: .8vw;
  		}
  	ul.topnav li:not(:first-child) {
		display: none;
	}
	header ul.topnav1 {
		display: none;
	}
	header ul.topnav1 li a {
		width: 100%;
		margin:0 1vw;
		display: block;
		transition:.5s;
	}
	ul.topnav1 li {
		display: none;
	}
	header ul.topnav li a.shrink1 {
	  	font-size: 7vw;
	  	margin: 0 0;
	  	}
	.shrink {
	  	max-width: 34vw;
	}
	section.contact div.container div.box div:first-child {
		display: none;
	}
	footer {
		font-size: 2.5vw;
		padding: 2vh;
	}
}


	/* ------------------------------------------------------------------------------------*/
	/* ------------------------------------------------------------------------------------*/


	@media screen and (min-width: 769px) {
		section.contact div.container div.box div:last-child {
			display: none;
		}
		header ul.topnav li.icon {
			display: none;
		}
		header ul.topnav1 {
			display: none;
		}
	}

	/* Class dengan nama "responsive" akan ditambahkan oleh JavaScript saat user mengklik icon. Munculnya Class ini akan mendisplay isi list menu 
*/
	@media screen and (max-width:768px) {
		ul.topnav1.responsive {position: relative;}
		ul.topnav1.responsive{
			display: inline-block;
			text-align: center;
			margin: 0 0;
		}
		ul.topnav1.responsive li {
			display: inline-grid;
			text-align: center;
		}
		ul.topnav1.responsive li a {
			display: block;
			text-align: center;
			margin-left: 1.9vw;
			margin-right: 1.9vw;
			margin-bottom: 1vw;
			font-size: 3vw;
		}
		header ul.topnav.responsive0 a img {
			margin-bottom: 0;
			transition: all 0.4s ease-in-out;
			-webkit-transition: all 0.4s ease-in-out;
			-moz-transition: all 0.4s ease-in-out;
		}
		.active {
			color: #009999;
			border-bottom : none
		}
	}

	/* ------------------------------------------------------------------------------------*/
	/* ------------------------------------------------------------------------------------*/