@charset "utf-8";
/* CSS Document */

@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: 'Didot';
	src: url('../font/Didot.eot');
	src: url('../font/Didot.eot?#iefix') format('embedded-opentype'),
		url('../font/Didot.woff') format('woff'),
		url('../font/Didot.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Titillium-Light';
	src: url('../font/Titillium-Light.eot');
	src: url('../font/Titillium-Light.eot?#iefix') format('embedded-opentype'),
		url('../font/Titillium-Light.woff') format('woff'),
		url('../font/Titillium-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Titillium-Regular';
	src: url('../font/Titillium-Regular.eot');
	src: url('../font/Titillium-Regular.eot?#iefix') format('embedded-opentype'),
		url('../font/Titillium-Regular.woff') format('woff'),
		url('../font/Titillium-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Titillium-Semibold';
	src: url('../font/Titillium-Semibold.eot');
	src: url('../font/Titillium-Semibold.eot?#iefix') format('embedded-opentype'),
		url('../font/Titillium-Semibold.woff') format('woff'),
		url('../font/Titillium-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

/* Webfont: Lato-Regular */@font-face {
    font-family: 'Latoreg';
    src: url('../fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Light */@font-face {
    font-family: 'Latolight';
    src: url('../fonts/Lato-Light.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Lato-Light.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/Lato-Light.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Lato-Light.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Semibold */@font-face {
    font-family: 'Latosemibold';
    src: url('../fonts/Lato-Semibold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Lato-Semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Lato-Semibold.woff2') format('woff2'), /* Modern Browsers */
         url('../fonts/Lato-Semibold.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Lato-Semibold.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@media screen and (max-width:1920px){
.custom1{
	color:#000000;
	text-align:center;
	font-family:'Latolight';
	font-weight:bold;
	background-color:transparent;
	width:100%;
	border:none;
	font-size:16px;
	position:relative;
}

.custom2{
	color:#fff;
	text-align:center;
	font-family:'Latolight';
	font-weight:bold;
	background-color:transparent;
	width:100%;
	border:none;
	font-size:16px;
	z-index:999;
}

.custom2.navbar-default .navbar-nav>li>a{
	color:#fff;
}

.menu{
	width: 100%;
	color:#000000;
	text-align:center;
	font-family:'Latolight';
	font-weight:bold;
	background-color:transparent;
	width:100%;
	margin-top:1%;
    font-size: 19px;
}

.menu ul{
	width:100%;
}

.menu li{
	float: none;
  	display: inline-block;
	line-height:auto;
	padding:0 0.8%;
	border-left: 1px solid black;
}

.menu .kosong{
	border:none;
	margin:0 2.8%;
}

.kosong{
	width:11%;
}

.kosong img{
	width:100%;
}

.menu a{
	color:#000000;
	text-align:center;
	font-family:'Latolight';
	font-weight:bold;
	background-color:transparent;
	
}

.menu .homie{
	border-left:none;
}

.menu .prod{
	border-right:1px solid black;
}

.menu li a{
	width:100%;
	padding-bottom:0;
	padding-top:0;
}


.down{
	text-align:justify;
	background-color:transparent;
	box-shadow:none;
	border:none;
	font-size:19px;
}

.down li{
	border:none;
	background-color:white;
}

.down li a:hover{
	background-color:#475766;
	color:white;
	border-top:5px solid #808000;
	border-left:none;
}

.dropdown-menu>li>a{
	padding-top:5px;
	padding-bottom:10px;
}

.dropdown-menu.srv li a{
	padding-left:0;
	padding-right:0;
}


.sto li{
	width:100%;
}

.produ li{
	width:100%;
}

.srv li{
	width:104%;
}

.gal li{
	width:90%;
}

.modal.kw{
	top:17%;
}

.kw.modal-backdrop.in{
	opacity:0.7;
}

.kw .close{
	color:white;
	opacity:1;
	right:5%;
	top:5%;
	position:absolute;
}

.kw .modal-title{
	font-family:'Didot';
	font-size:22px;
}

.kw .modal-content{
	max-width:700px;
	margin-left:auto;
	margin-right:auto;
	border-radius:0;
	background-color:transparent;
	box-shadow:none;
	border:none;
}

.kw .modal-header{
	border-bottom:none;
}

.line-modal{
	width:93%;
	margin-left:auto;
	margin-right:auto;
}

.line-modal hr{
}

.modal-body-bg{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
}

.modal-body-filter{
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	padding-top:75%;
}

.modal-body-text{
	position:absolute;
	top:34%;
	left:29%;
	font-family:'Latolight';
	max-width:300px;
	color:white;
}

.modal-body-text h1{
	font-size:63px;
}
}

@media screen and (max-width:1807px){
    .marleft{
        width: 15.5%;
    }
    .menu{
        font-size: 18px;
    }
    .down{
        font-size: 18px;
    }
}

@media screen and (max-width:1720px){
    .menu{
        font-size: 18px;
    }
    .down{
        font-size: 18px;
    }

}

@media screen and (max-width:1695px){
    .custom1{
        margin-left: 1.1%;
    }
    .menu{
	font-size:18px;
}
    
    .menu .kosong{
        margin: 0 2.9%;
    }
    
    .menu li{
        padding: 0 0.7%;
    }
    
    .kosong{
        width: 10.5%;
    }

.down{
	font-size:18px;
}
    
.sto li{
	width:95%;
}

.gal li{
	width:84%;
}
}

@media screen and (max-width:1666px){
    .menu .kosong{
        margin: 0 2.5%;
    }
}



@media screen and (max-width:1574px){
    .menu li{
        padding: 0 0.6%;
    }
}

@media screen and (max-width:1538px){
.menu{
	font-size:16px;
}

.down{
	font-size:16px;
}
    
.sto li{
	width:87%;
}

.produ li{
	width:95%;
}

.srv li{
	width:103%;
}

.gal li{
	width:77%;
}

}




@media screen and (max-width:1405px){
    .menu .kosong{
        margin: 0 2.4%;
    }
}

@media screen and (max-width:1395px){
.menu{
	font-size:15px;
}

.down{
	font-size:15px;
}

.sto li{
	width:83%;
}

.produ li{
	width:91%;
}

.srv li{
	width:103%;
}

.gal li{
	width:73%;
}
}

@media screen and (max-width:1366px){
.custom1{
	color:#000000;
	text-align:center;
	font-family:'Latolight';
	font-weight:bold;
	background-color:transparent;
	width:100%;
	border:none;
	font-size:16px;
	z-index:999;
}

.menu{
	width: 100%;
	color:#000000;
	text-align:center;
	font-family:'Latolight';
	font-weight:bold;
	background-color:transparent;
	width:100%;
	margin-top:1%;
}

.menu ul{
	width:100%;
}

.menu li{
	float: none;
  	display: inline-block;
	line-height:auto;
	padding:0 0.5%;
	border-left: 1px solid black;
}

.menu .kosong{
	border:none;
	margin:0 2.4%;
}

.kosong{
	width:10%;
}

.kosong img{
	width:100%;
}

.menu a{
	color:#000000;
	text-align:center;
	font-family:'Latolight';
	font-weight:bold;
	background-color:transparent;
	
}

.menu .homie{
	border-left:none;
}

.menu .prod{
	border-right:1px solid black;
}

.menu li a{
	width:100%;
	padding-bottom:0;
	padding-top:0;
}


.down{
	text-align:justify;
	background-color:transparent;
	box-shadow:none;
	border:none;
	font-size:14px;
}

.down li{
	border:none;
	background-color:white;
}

.down li a:hover{
	background-color:#475766;
	color:white;
	border-top:5px solid #808000;
	border-left:none;
}

.dropdown-menu>li>a{
	padding-top:3%;
	padding-bottom:5%;
}


.sto li{
	width:81%;
}

.produ li{
	width:89%;
}

.srv li{
	width:97%;
}

.gal li{
	width:72%;
}

.gal li a{
	padding-left:12%;
}

}

@media screen and (max-width:1365px){
   
}

@media screen and (max-width:1339px){

.menu{
	font-size:15px;
}
.down{
	font-size:15px;
}
}

@media screen and (max-width:1330px){
.gal li a{
	padding-left:15%;
}

}

@media screen and (max-width:1300px){

.menu{
	font-size:14px;
}
.down{
	font-size:14px;
}

.sto li{
	width:78%;
}

.produ li{
	width:86%;
}

.srv li{
	width:85%;
}

.gal li{
	width:69%;
}


}



@media screen and (max-width:1258px){
.menu{
	font-size:14px;
}
.down{
	font-size:14px;
}

}


@media screen and (max-width:1250px){


.menu li{
	padding:0 0.5%;
}
}

@media screen and (max-width:1232px){
.menu li{
	padding:0 0.4%;
}
}

@media screen and (max-width:1230px){
.sto li{
	width:77%;
}

.produ li{
	width:84%;
}

.srv li{
	width:84%;
}

.gal li{
	width:67%;
}
}

@media screen and (max-width:1198px){
.sto li{
	width:76%;
}

.produ li{
	width:83%;
}

.srv li{
	width:83%;
}

.gal li{
	width:66%;
}

}

@media screen and (max-width:1170px){

}

@media screen and (max-width:1110px){
.marleft{
	width:12%;
}
}

@media screen and (max-width:1060px){
    .marleft{
        width: 11%;
    }
}

@media screen and (max-width:1025px){
.menu{
	font-size:12px;
}

.down{
	font-size:12px;
}

.sto li{
	width:69%;
}

.produ li{
	width:75%;
}

.srv li{
	width:75%;
}

.gal li{
	width:61%;
}

.gal li a{
	padding-left:17%;
}

}

@media screen and (max-width:1010px){
.marleft{
	width:10%;
}

.menu{
	font-size:12px;
}

.down{
	font-size:12px;
}
}

@media screen and (max-width:991px){
.menu{
	font-size:12px;
}

.down{
	font-size:12px;
}
}

@media screen and (max-width:899px){
.marleft{
	width:8%;
}

}

@media screen and (max-width:881px){
.marleft{
	width:8%;
}

}

@media screen and (max-width:873px){
.menu{
	font-size:11px;
}
.sto li{
	width:66%;
}

.produ li{
	width:72%;
}

.srv li{
	width:72%;
}

.gal li{
	width:58%;
}
}

@media screen and (max-width:857px){
.marleft{
	width:6%;
}

}


@media screen and (max-width:818px){
.menu{
	font-size:11px;
}

.down{
	font-size:11px;
}
}



@media screen and (max-width:767px){
.nav-con{
	background-color:#f6f4f1;
}

.custom1{
	width:98%;
	background-color:transparent;
}

.navbar-nav{
	margin:0;
}

.navbar-default{
	background-color:transparent;
}

.navbar-collapse1{
	border:none;
}

.navbar-default .navbar-collapse1{
	border:none;
}

.kosong{
	display:none !important;
}

.menu{
	width:100%;
}

.menu a{
	text-align:right;
}

.menu li{
	border:none;
	width:100%;
	background-color:transparent;
	padding:2% 0;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
	background-color:transparent;
}

.navbar-nav .dropdown-menu{
	width:50%;
}

.down li{
	padding:0;
}


.down li:hover{
	background-color:transparent;
}

.down > li >a{
	font-family:'Latosemibold';
}

.down > li >a:hover{
	color:#transparent !important;
	color:#000 !important;
	border-top:none;
}


.prod{
	border-right:none !important;
}

.navbar-toggle{
	border-color:transparent;
	left:2%;
}

.menu_slide{
	background-color:black;
	opacity:0.7;
	width:100%;
	height:100%;
	z-index:2000;
	position:fixed;
	top:0;
	display:none;
}

.sled{
	background-color:black;
	left:2%;
	z-index:2000;
	border:1px solid white;
}

.sled .icon-bar{
	background-color:white;
}

.menu_slide li a{
	border-radius:0;
	color:white;
	padding:3%;
}

.menu_slide li a:hover{
	color:black;
}


.menu_slide a{
	color:white;
	font-family:'Latolight';
}

.kw{
	z-index:2500;
}

.follow{
	position:relative;
	float:none;
	margin:0;
	border-radius:0;
	border:none;
	color:white;
	background-color:black;
}

.dropdown-menu.follow a{
	padding:3% 5%;
}

.kw .modal-title{
	font-size:15px;
}

.line-modal{
	width:71%;
}

.modal-body-text{
	top:24%;
	left:13%;
}

.modal-body-text h1{
	font-size:42px;
}

}

/*
@media screen and (max-width:414px){
.custom1{
	margin-bottom:0;
}

.fr{
	padding-top:0;
}
}

@media screen and (max-width:375px){
.menu{
	font-size:10px;
}

.down{
	font-size:9px;
}
}

@media screen and (max-width:320px){
.menu{
	font-size:10px;
}

.down{
	font-size:9px;
}
}