@charset "utf-8";
@font-face {
    font-family: 'myfont'; /*a name to be used later*/
    src: url('./font/Corbert-Regular.otf'); /*URL to font*/
}
@font-face {
    font-family: 'title'; /*a name to be used later*/
    src: url('./font/Clarity free.ttf'); /*URL to font*/
}
@font-face {
    font-family: 'title2'; /*a name to be used later*/
    src: url('./font/Logo.otf'); /*URL to font*/
}
body {
	margin: 0;
	font-family: 'myfont';
	background: #f8f6f1;
}
.navbar{
	position:fixed;
	display:block;
	left:0px;
	top:0px;
	right:0px;
	background: #f8f6f1;
	margin: 0;
	padding: 20px 30px;
	z-index:999;
	max-height:50px;
	hight:50px;
}
 
.logo{
	font-size: 14pt;
	font-weight: bold;
	text-decoration: none;
	color: #846c30;
}
span{
font-family:'myfont';
}
.container{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.slideshow{
  	height: 100%;
	margin-bottom:55%;
	}
.content{
	position:relative;
	z-index:0;
	display:block;
	left:0px;
	right:0px;
	max-width:100%;
	margin:0px;
	padding:0px;
	color:#666;
}
.konten-brown{
	background-color:#60574d;
	display:block;
	width:100%;
	max-width:100%;
	color:white;
	left:0px;
	right:0px;
	height: auto;
	padding-top:100px;
	padding-bottom:100px;
}
.konten{
	display:block;
	left:0px;
	right:0px;
	width:90%;
	max-width:90%;
	margin:auto;
}
.konten .hilight{
	color:#60574d;
	text-decoration:uppercase;
	font-weight:bold;
	font-size:130%;
}
.tombol{
	display: none;
	color: #333;
	font-size: 14pt;			
}
 
.tombol:hover{
	cursor: pointer;
}
 
 
.menu{
	margin: 0;
	display: flex;
	list-style: none;
	padding: 0;			
}
 
.menu li{
	padding-left: 0;
	margin-right: 10px;
}
 
.menu li a{
	padding:10px;
	color: #666;
	text-decoration: none;
	display: inline-block;
  	-moz-transition: all 500ms ease;
   	-o-transition: all 500ms ease;
   	-ms-transition: all 500ms ease;
    	transition: all 500ms ease;
}
.menu li a:hover{
	padding:10px;
	color: #333;
	text-decoration: none;
	display: inline-block;
  	-moz-transition: all 500ms ease;
   	-o-transition: all 500ms ease;
   	-ms-transition: all 500ms ease;
    	transition: all 500ms ease;
}
.gridme2{
    max-width:100%;
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: calc(50% - 20px) calc(50% - 20px);
	text-align:justify;
}
.gridme2 div{
	max-width:100%;
	padding:20px;
	width:calc(100% - 40px);
}
.gridme3{
    max-width:100%;
    display: grid;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: calc(33% - 20px) calc(33% - 20px) calc(33% - 20px);
	text-align:justify;
}
.gridme3 div{
	max-width:100%;
	padding:20px;
}

.gridme4{
    max-width:100%;
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-columns: auto auto auto auto;
	text-align:justify;
}
.gridme4 div{
	max-width:100%;
	padding:5px;
	text-align:left;
}
.servicegrid{
    max-width:60%;
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-columns: auto auto;
	text-align:left;
	margin:auto;
}
.servicegrid div{
	max-width:100%;
	padding:5px;
	text-align:left;
}

.gridme5{
    max-width:100%;
    display: grid;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    grid-template-columns: calc(20% - 15px) calc(20% - 15px) calc(20% - 15px) calc(20% - 15px) calc(20% - 15px);
	text-align:justify;
}
.gridme5 div{
	max-width:100%;
	padding:15px;
}

.lokasi{
font-weight:normal;
text-align:left;
}

.lokasi div:before{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: "\f276";
color:#f61013;
padding-left:-30px;
}

.blok{
background-color:rgba(255,255,255,0.3);
color:white;
display:block;
width:100%;
max-width:100%;
padding:10px;
}

.imageRight{
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
width:calc(50% - 20px);
margin:20px;
margin-top:50px;
float:left;
}
.imageLeft{
position:relative;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
width:calc(50% - 20px);
float:left;
}
.imageUp{
  display: inline-block;
  position: relative;
  width: calc(100% - 20px);
  background: red;
  box-sizing: border-box;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.imageUp:hover{
position:relative;
transform:scale(105%);
box-shadow:5px 5px 15px rgba(0,0,0,.8);
width:calc(100% - 20px);
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.divTop{
position:relative;
clip-path: polygon(0 0, 100% 0%, 100% 70%, 50% 100%, 0 70%);
width:calc(100% - 20px);
min-height:150px;
background-color:white;
font-size:normal;
color:#333;
padding: 10px;
padding-bottom:10px;
border:1px solid #f8f6f1;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
.divTop:hover{
font-size:105%;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}

.line-grey{
	display:block;
	margin-top:20px;
	margin-bottom:20px;
	height:1px;
 	background-image: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(150,150,150,.5) 20%,rgba(150,150,150,1) 50%,rgba(150,150,150,.5) 80%, rgba(255,255,255,0) 100%);
}

.spasi{
	display:block;
	content:' ';
	padding:20px;
}

h1,h2,h3,h4{
position:relative;
padding:0px;
margin:0px;
font-size:150%;
text-transform: capitalize;
padding-bottom:10px;
}
.title{
font-family: 'title';
font-weight:normal;
font-size:200%;
color:#60574d;
}
.title2{
font-family: 'title2';
font-weight:normal;
font-size:150%;
color:#60574d;
}
.title-normal{
font-family: 'myfont';
font-weight:bold;
font-size:110%;
display:block;
padding-bottom:10px;
}

a{
	color:#333;
	text-decoration:none;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
    	-o-transition: all 500ms ease;
    	-ms-transition: all 500ms ease;
    	transition: all 500ms ease;
}
a:hover{
	color:#333;
	text-decoration:underline;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
    	-o-transition: all 500ms ease;
    	-ms-transition: all 500ms ease;
    	transition: all 500ms ease;
}

#btn{
	position:relative;
	color:#666;
	cursor:pointer;
	padding:10px 20px;
	text-decoration:none;
	border-radius:5px;
	text-shadow:none;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
    	-o-transition: all 500ms ease;
    	-ms-transition: all 500ms ease;
    	transition: all 500ms ease;

}
#btn:before{
	content:' ';
	position:absolute;
	border:1px solid #000;
	width:100%;
	border-left:0px;
	border-right:0px;
	left:50%;
	right:0;
	top:0;
	bottom:0;
	padding:0px 10px;
	transform:translate(-50%,0%);
	z-index:3;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}
#btn:after{
	content:' ';
	position:absolute;
	border:1px solid #000;
	width:100%;
	border-top:0px;
	border-bottom:0px;
	left:0;
	right:0;
	top:50%;
	bottom:0;
	padding:30px 0px;
	transform:translate(0%,-50%);
	z-index:3;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}
#btn:hover:after, #btn:hover:before{
	padding:30px 10px;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}


#btn-white{
	position:relative;
	color:#fff;
	cursor:pointer;
	padding:10px 20px;
	text-decoration:none;
	border-radius:5px;
	text-shadow:none;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}

#btn-white:before{
	content:' ';
	position:absolute;
	border:1px solid #fff;
	width:100%;
	border-left:0px;
	border-right:0px;
	left:50%;
	right:0;
	top:0;
	bottom:0;
	padding:0px 10px;
	transform:translate(-50%,0%);
	z-index:3;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}
#btn-white:after{
	content:' ';
	position:absolute;
	border:1px solid #fff;
	width:100%;
	border-top:0px;
	border-bottom:0px;
	left:0;
	right:0;
	top:50%;
	bottom:0;
	padding:30px 0px;
	transform:translate(0%,-50%);
	z-index:3;
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;
}
#btn-white:hover:after, #btn-white:hover:before{
	padding:30px 10px;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    transition: all 500ms ease;

}

.parallax{
	position:relative;
	left:0px;
	padding:0px;
	padding-top:30px;
	padding-bottom:30px;
	margin:0px;
	background: linear-gradient(rgba(0,0,0,0.5), rgba(255,255,255,0.1)), url(images/background.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;
	background-attachment:fixed;
	-webkit-filter: grayscale(70%);
	width:100%;
	height:100%;
	max-width:100%;
	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	-ms-transition: all 1s ease;
    	transition: all 1s ease;
	color:white;
}
.parallax:hover{
	background-size:105%;
	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

#chat{
    font-size:250%;
      color:#b6b0a9;
      margin:10px;
	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	-ms-transition: all 1s ease;
	transition: all 1s ease;
    
}
#chat:hover{
    font-size:255%;
    color:white;
	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	-ms-transition: all 1s ease;
	transition: all 1s ease;
    
}

#sosmed{
    font-size:150%;
      color:#b6b0a9;
	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	-ms-transition: all 1s ease;
	transition: all 1s ease;
    
}
#sosmed:hover{
    font-size:155%;
    color:white;
	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	-ms-transition: all 1s ease;
	transition: all 1s ease;
    
}

.logo-aboutus{
    width:300px;
    float:left;
    margin:10px;
}
@media screen and (max-width: 768px) {
	.menu {
		display: none;
	}
 
	.menu.aktif{
		display:inline-block;
		position: absolute;
		top: 90px;
		background: #f8f6f1;
		padding: 10px 20px;
		right: 0;
		left: 0;
	}
 
	.menu.aktif li a{
		padding: 10px;
		display: inline-block !important;
	}
 
	.tombol {
		display: block;
	}

.content{
    padding:0px;
    margin:0px;
    width:100%;
    max-width:100%;
    overflow:hidden;
}
.konten-brown{
    padding-right:10px;
    padding-top:50px;
    max-width:calc(100% - 10px);
    left:0;
}
.konten{
    padding:10px;
    max-width: calc(100% - 20px);
}
.gridme2{
    display: block;
	max-width:100%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
	padding:0px;
}
.gridme2 div{
	padding:10px;
	max-width:calc(100% - 20px);
	display:inline-block;
	width:100%;
	min-width:100%;
	text-align:center;
}
.gridme3{
    display: block;
	max-width:100%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
	padding:0px;
}
.gridme3 div{
	padding:10px;
	width:100%;
	height:auto;
	max-width:calc(100% - 20px);
	display:inline-block;
	text-align:center;
}


	.imageRight{
		clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
		width:40%;
		float:none;
		margin-left:0px;
		margin-right:0px;
		margin-top:10px;
		margin-bottom:10px;
	}
	.imageLeft{
		position:relative;
		clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
		width:40%;
		float:none;
		margin-left:10px;
		margin-right:10px;
		margin-top:10px;
		margin-bottom:10px;
	}
.gridme4{
    max-width:100%;
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-columns: auto auto;
	text-align:justify;
}
.gridme4 div{
	max-width:100%;
	padding:5px;
	text-align:left;
}

.servicegrid{
    max-width:100%;
    display: block;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-columns: auto;
	text-align:justify;
}
.servicegrid div{
	max-width:100%;
	padding:5px;
	text-align:left;
}

.parallax{
	background-size: auto 100%;
	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	-ms-transition: all 1s ease;
	transition: all 1s ease;

}
.parallax:hover{
	background-size: auto 110%;
	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	-ms-transition: all 1s ease;
	transition: all 1s ease;

}

.divTop{
padding-bottom:50px;
min-hight:200px;
height:200px;
}
.gridme3 > div{
position:relative;
margin-top:50px;
}
.slideshow{
  	height: 100%;
	margin-bottom:100%;
	}
.logo-aboutus{
    width:calc(100% - 20px);
    float:none;
    display:block;
    margin:10px;
}

}