@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Condensed:100,200,300,400,500,600,700,800,900');

body{
    color: #333;    
    background: #FFFFFF; 
    font-weight: 400;   
    font-family: 'Encode Sans Semi Condensed', sans-serif;
} 

.intro{
	margin-top: -5px;
	margin-bottom: -20px;
}

.border-content{
	border: solid 1px #ffffff;
}

.list-foto-spg{
	width: 100%; 
	overflow: hidden;
}

.no-margin{
	margin: 0px !important;
}

/* ================================= loker ==================================== */
.bg_loker{
	background: url('../../assets/images/content/bg_loker.jpg'); 
	background-size: contain;
}

.sidebar_left{
	background: url('../../assets/images/content/sidebar_loker.jpg');
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
			
.sidebar_right{
	background: url('../../assets/images/content/sidebar_loker.jpg');
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.center_loker{
	background: url('../../assets/images/content/sidebar_loker.jpg');
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.center_loker_detail{
	background-image: url('../../assets/images/content/sidebar_loker.jpg');
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.sidebar_loker{
	background-image: url('../../assets/images/content/sidebar_loker.jpg');
	background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* ====================================== spg ===================================== */
.bg_spg{
	background: url('../../assets/images/content/bg_spg.jpg'); 
	background-size: contain;
}
.spg_sidebar_left{
	background: url('../../assets/images/content/sidebar_left_spg.jpg');
	background-repeat: no-repeat;
}

.center_spg{
	background: url('../../assets/images/content/center_spg.jpg');
	background-repeat: no-repeat;
}

.center_spg_detail{
	background: url('../../assets/images/content/center_spg.jpg');
	background-repeat: no-repeat; 
	background-size: 845px;
}

/* ======================= header ============================================== */
.header-loker{
	padding: 30px 0;
   	background: url('../../assets/images/header/header_loker.jpg');
    color: #fff;
    text-align: center; 
    background-size: cover;
    background-repeat: no-repeat; 
    background-position:center;
    width: 100% !important; 
    height: auto !important;
}

.header-loker h1{
	margin: 0
}

.header-spg{
	padding: 30px 0;
   	background: url('../../assets/images/header/header_spg.jpg');
    color: #fff;
    text-align: center; 
    background-size: cover;
    background-repeat: no-repeat; 
    background-position:center;
    width: 100% !important; 
    height: auto !important;
}

.header-spg h1{
	margin: 0
}

/* ======================= media mex width ========================================= */ 
@media screen and (min-width:1821px){ 
	.slider {
		height: 630px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 630px !important;
	}
	.slider .slides li{
		height: 630px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 630px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:1820px){ 
	.slider {
		height: 600px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 600px !important;
	}
	.slider .slides li{
		height: 600px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 600px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:1730px){ 
	.slider {
		height: 580px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 580px !important;
	}
	.slider .slides li{
		height: 580px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 580px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:1680px){ 
	.slider {
		height: 560px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 560px !important;
	}
	.slider .slides li{
		height: 580px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 560px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:1620px){ 
	.slider {
		height: 530px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 530px !important;
	}
	.slider .slides li{
		height: 530px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 530px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:1520px){ 
	.slider {
		height: 500px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 500px !important;
	}
	.slider .slides li{
		height: 500px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 500px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:1440px){ 
	.slider {
		height: 480px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 480px !important;
	}
	.slider .slides li{
		height: 480px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 480px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:1280px){ 
	.slider {
		height: 420px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 420px !important;
	}
	.slider .slides li{
		height: 420px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 420px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:1024px){
	.slider {
		height: 350px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 350px !important;
	}
	.slider .slides li{
		height: 350px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 350px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:800px){
	.slider {
		height: 270px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 270px !important;
	}
	.slider .slides li{
		height: 270px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 270px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
    .apply-info{text-align: left;margin-top: 15px;}
    .container{width: 90%;}
    .list-spg img{
        max-height: 185px;
    }
    .btn-login{
        width:48%;
        margin-bottom: 15px;
    }
    
    .content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}

}

@media screen and (max-width:768px){
	.slider {
		height: 250px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 250px !important;
	}
	.slider .slides li{
		height: 250px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 250px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:640px){ 
	.slider {
		height: 350px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 350px !important;
	}
	.slider .slides li{
		height: 350px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 350px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
    .mmb15{margin-bottom: 30px}
    .list-spg img{
        max-height: 150px;
    }
    .slider .slides li .caption{
        top:40%;
    }
    
    .content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:480px){ 
	.slider {
		height: 265px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 265px !important;
	}
	.slider .slides li{
		height: 265px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 265px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.side-nav{
		width: 250px !important;
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
	
	.logo{
		float: left;
		margin-left: -10px !important;
		width: 110px; 
		height: auto !important;
		margin-left: 0px !important;
	}
	
    .parallax-container{height: 260px}
    .title-parallax{top:40px;}
    .list-spg img{
        max-height: 140px;
    }
    .list-loker-title{
        min-height: 30px;    
    }
    .btn-login{
        width:100%;
        margin-bottom: 15px;
    }
    .mmb15{
        margin-bottom: 30px
    }
}

@media screen and (max-width:415px){
	.slider {
		height: 245px !important;
		top: 0px;
	}
	.slider {
		height: 245px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 245px !important;
	}
	.slider .slides li{
		height: 245px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 245px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.side-nav{
		width: 250px !important;
	}
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
	
	.logo{
		float: left;
		margin-left: -10px !important;
		width: 110px; 
		height: auto !important;
		margin-top: 15px !important;
	}
}

@media screen and (max-width:388px){
	.logo{
		float: left;
		margin-left: -10px !important;
		width: 110px; 
		height: auto !important;
		margin-left: 0px !important;
	}
	.side-nav{
		width: 250px !important;
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:376px){ 
	.slider {
		height: 220px !important;
		top: 0px;
	}
	
	.slider {
		height: 220px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 220px !important;
	}
	.slider .slides li{
		height: 220px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 220px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.logo{
		float: left;
		width: 110px; 
		height: auto !important;
		margin-left: 0px !important; 
		margin-top: 15px !important;
	}
	.side-nav{
		width: 250px !important;
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
}

@media screen and (max-width:360px){
	.slider {
		height: 220px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 220px !important;
	}
	.slider .slides li{
		height: 220px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 220px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
	
	.side-nav{
		width: 250px !important;
	}
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	
    .parallax-container{height: 180px} 
    .title-parallax{top:40px;}
    .custom-navbar img{margin-top: 15px}
    .menumob{
       color:#333;
    }
    
    .logo{
		float: left;
		margin-top: 10px !important; 
		margin-left: -10px; 
		padding-top: 3px;
		width: 110px; 
		height: auto !important;
	}
	.kota-sm{
		height: 15px;
	}
}

@media screen and (max-width:330px){
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
	
	.logo{
		float: left;
		margin-left: -20px; 
		padding-top: 3px;
		width: 90px; 
		height: auto !important;
	}
}

@media screen and (max-width:320px){	
	.side-nav{
		width: 230px !important;
	}
	.slider {
		height: 185px !important;
		top: 0px;
	}
	.slider .slides {
	    background-color: transparent;
	    margin: 0;
	    height: 185px !important;
	}
	.slider .slides li{
		height: 185px !important;;
	    width: 100% !important;;
	}
	.slider .slides li img {
	    height: 185px !important;;
	    width: 100% !important;;
	    background-position: center;
	    background-size:100% auto !important;
	    background-repeat: no-repeat;
	}
	.slider .indicators .indicator-item{
		width: 9px !important;
		height: 9px !important;
	}
	
	.slider .indicators .indicator-item.active{
		width: 9px !important;
		height: 9px !important;
	    background: #45C6BE;
	}
	.slider .indicators{
	    bottom: 5px !important; 
	    z-index: 5
	}
	
	.content-banner {    
		position:relative; 
	}
	.content-banner img{
		width: 100%;
	    height: auto !important; 
	}
	
	.intro img{
		width: 100% !important;
		height: auto !important;
	}
	
    .parallax-container{height: 160px}  
    .title-parallax{top:30px;}
    .banner-core{
    	margin-top: -120px;
    }
    .list-spg img{
        max-height: 120px;
    }
    
    .logo{
		float: left; 
		margin-top: 12px !important;
		margin-left: -40px; 
		padding-top: 3px;
		width: 100px; 
		height: auto !important;
	}
	
	.kota-sm{
		height: 15px;
	}
    
    .fav-icon-loker{
		position: relative;
		background-color: #ffffff;
		border: solid 1px;
		width: 18px !important; 
		height: 18px !important;
	    border-radius: 50%;
	    margin-right: 10px; 
	    margin-top: 3px;
	    padding-left: 2px !important;
	}
    
    .fav-icon-list-loker{
		position: relative !important;
		background-color: #ffffff !important;
		border: solid 1px !important;
		width: 32px !important; 
		height: 32px !important;
	    border-radius: 50% !important;
	    padding-bottom: 5px !important;
	    padding-top: 5px !important; 
	    padding-right: 5px !important;
	    padding-left: 5px !important;
	}
	
	.title-sidebar-left{
		font-weight: 500;
		font-size: 16px !important;
		padding-left: 10px; 
		padding-top: 5px;
		color: #FFFFFF;
	}
	
	.title-sidebar-left-agent{
		font-weight: 500;
		font-size: 13px !important;
		padding-left: 10px; 
		padding-bottom: 0px !important;
		color: #FFFFFF;
		background-color: #374352;
	}
	
	.title-profile{
		font-weight: 500;
		font-size: 16px !important;
		padding-left: 10px; 
		padding-top: 5px;
		color: #FFFFFF;
	}
	
	.title-profile-agent{
		font-weight: 500;
		font-size: 13px !important;
		padding-left: 10px; 
		margin-top: 5px; 
		padding-bottom: 3px;
		color: #FFFFFF;
		background-color: #374352;
	}
		
}

@media screen and (max-width:319px){
	.logo{
		float: left;
		margin-left: -40px; 
		padding-top: 3px;
		width: 90px; 
		height: auto !important;
	}
}

@media screen and (max-width:308px){
	.logo{
		float: left;
		margin-left: -50px; 
		padding-top: 3px;
		width: 90px; 
		height: auto !important;
	}
}

/* ======================= media mex width ========================================= */

.container{width: 90%;}
p{font-family: 'Roboto', sans-serif; }
table,td{font-family: 'Encode Sans Semi Condensed', sans-serif; }
h1,h2,h3,h4,h5,h6,label,small,span{
    font-family: 'Encode Sans Semi Condensed', sans-serif;
}
h1{
    font-size: 32px;
}
h2{
    font-size: 24px;
}
h3{
    font-size: 19px;
}
h4{
    font-size: 18px;
}
h5{
    font-size: 17px;
}
h6{
    font-size: 16px;
}

.faq-jawaban{
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 50px; 
	padding-right: 50px;
}

.footer-sosmed{
	margin-left: 30px;
}

.mycarousel{
	margin-top: -100px;
}

.carousel .carousel-item {
	width: 100% !important;
	height: 100% !important;
}
 
.light{font-weight: 300}
.medium{font-weight: 500}
.bold{font-weight: 700}
a{color: #333;}
/*
.tabs .indicator{
    background:#29AEB1;
} 

*/
.mybtnseach{
    position: absolute;
    right: 0;
    top:0;
}
hr{
    border: 0; height: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.penilaian h3,.penilaian label{
    color:#fff!important
}
.brad5{
    border-radius: 5px;
} 
.list-loker img{
    height: 80px;    
}
.list-loker-title{
    min-height: 60px;    
}
.bd1{border: 1px solid #ddd}
.pointer{cursor: pointer;}
.apply{text-align:right}
.apply button{
    background:#3EA609;
    padding:0px 8px;
    border:1px solid currentColor;	
    color:#fff;
    font-size:14px;
}
.modulbox{  
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 15px;
    color: #26AEB0
    
} 
.infoagent small{
    line-height: 16px;
    color:#999;
    display: block;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} 
.info-share{
    border-bottom: 1px solid #ddd
}
.pointer{cursor: pointer;}
.dataposting img{  
    width: 100%;
    height: 100%;
}
.dataposting iframe{  
    width: 100%;
    min-height: 240px;
}
.timeline-post-user{
    background: #fff;
    border-radius: 5px;
    border:1px solid #ddd; 
    margin-bottom: 8px;
    padding: 15px;
}
.timeline-post-user .info{
    width: calc(100% - 55px);
    margin-left: 55px;
    margin-bottom: 15px!important; 
}
.timeline-post-user .pic{ 
    width: 45px!important;
    height: 45px!important;  
    position: absolute;
}  
.timeline-post-user textarea{
    width: calc(100% - 55px);
    margin-left: 55px;
    margin-bottom: 15px!important; 
}
.timeline-post-user .ql-toolbar.ql-snow{ 
    margin-left: 55px!important; 
}
.timeline-textarea{
    width: calc(100% - 55px);
    margin-left: 55px!important; 
    min-height: 100px;
    margin-bottom: 15px!important; 
}
.waktulalu{
    position: relative;
    left: -15px;
    top:-15px;
    background: #90DEDE;
    color:#fff;
    padding: 3px 15px;
    display: block; 
    width: calc(100% + 30px)
}
.namaloker h1{
    display: inline-block; 
    margin: 0 0 15px 0; 
    font-size: 28px;
    font-weight: bold
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
} 
td, th { 
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    /*background-color: #eee;*/
} 
.mdl-data-table td, .mdl-data-table th{
    text-align: left!important;
}
.picker__date-display{
    display: none
}
.tablebio td{
    vertical-align:top;
}
.bordergrey{
    border:1px solid #d5d5d5
}
.side-nav{
    z-index:9999!important;
} 
.card .card-content .card-title{
    line-height: normal
}
.content-loker img{
    width: 100%;
    height: auto;
}
.card-content i.detail{
    position: relative;
    top:-35px;
    right:0;
} 
.collection .collection-item.avatar{
    min-height: 40px
}
.card .card-content{
    padding:15px;
}
.card .card-title{
    font-size: 18px;
}
.btn-facebook{
    background: rgba(59,89,152,1)
}
.btn-facebook:hover{
    background: rgba(59,89,152,.8)
}
.fbcolor{background: #3b5998}
.twcolor{background: #55acee}
.igcolor{background: #125688}
.licolor{background: #007bb5}
.gpcolor{background: #d62d20}

.btn-login{
    width: 48%;
}
.btn-login a{
    color:#fff;
}
.bgku{
    height: 100%;
    width: 100%;
    top:0;
    left: 0;
    position: absolute;
    background: rgba(0,0,0,.8);
    z-index: 0;
} 
.profilspg{
    color:#eee; 
    position: relative;
    z-index: 2;
    top:0;
    left:0;
} 
.breadcrumb i, .breadcrumb [class^="mdi-"], .breadcrumb [class*="mdi-"], .breadcrumb i.material-icons{
    font-size: 18px;
}
.breadcrumb{
    font-size: 14px;
}
.modul-title h4{
    display: block; 
    padding-bottom: 10px;
    color:#333;  
    border-bottom: 1px solid #ddd;
}
#infosukses{
    background: #64D2D2;
    color:#fff;
    text-align: center;
    padding: 15px;
    border-radius: 15px;
    margin-bottom: 30px;
}
.lihat-semua{font-size: 12px;float: right;margin-top: 10px;}

.slider .indicators .indicator-item.active{
    background: #45C6BE
}
.slides{
	height: 630px;
}
.slides h1{margin: 0}
.slider .slides li .caption{
    top:50%;
    padding: 30px;
    background: rgba(0,0,0,.5);
} 
.slider .indicators{
    bottom: 15px;
    z-index: 5
}
.box-modul-title{
    background: #F6F7F9
}
.list-spg img{
    height: 170px;
}
.list-spg .card-title{
    background: rgba(0,0,0,.3);
    padding: 10px!important;
    width: 100%;
    height: 100%;
}
.infoloker{
    border-bottom: 1px solid #ddd
} 
.contentsection{
    padding: 60px 0
}  
footer.page-footer{ 
    font-family: 'Encode Sans Semi Condensed', sans-serif;
    background: #374352;
    color: #eee; 
    margin-top: 0!important;
}
footer.page-footer h5{font-weight: 500;color: #64D2D2} 
footer.page-footer a{color: #eee}  

.mb15{
    margin: 0 0 15px 0
}
.mb30{
    margin: 0 0 30px 0
}
.pad15{
    padding: 15px;
}
.pad30{
    padding: 30px !important;
}
.padlr15{
    padding: 0 15px;
}
.padtb15{
    padding: 15px 0;
}
.padtb30{
    padding: 30px 0;
}
.padtb60{
    padding: 60px 0;
}
.mt15{
    margin-top: 15px
}
.bgwhite{
    background: #fff;
}
.blue-text{
    color:#64D2D2!important
}  

.deltimeline{background: transparent;border:none}
/*NAVBAR*/   

.nav-notif-circle{
	color: #ffffff;
	background: #f00;
    border-radius: 50%; 
	padding-top: 3px;
	padding-bottom: 3px; 
	padding-left: 8px; 
	padding-right: 8px; 
	margin-top: -30px;
}

.logo{float: left;height: 40px;margin: 10px 30px 0 15px;}

.navpic img{
	height: 35px;
	width: 35px;
	margin-top: 10px;
}
nav{ 
    background: #fff;margin: 0!important;
    -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, padding 0.5s ease-in-out; 
} 
.custom-navbar li a{  
    font-family: 'Encode Sans Semi Condensed', sans-serif; 
    text-transform: uppercase;
    color:#333;
    font-weight: 500;
    border: none
} 
.custom-navbar li a i{   
    color:#333
}   
.home-search-box{
    width: 100%;
    background: #fafafa;
    padding: 15px;
}
.show-search{
	margin-top: 20px;
}
.btnSearch{
	margin-top: 10px; 
	margin-bottom: 10px;
}
.dataTables_length select{
    display: none;
}  
.bggradiend{background: #64D2D2;}
.bggradiend-agent{background: #374252;}

.parallax-container {  
    clear: both; 
    height:200px; 
    overflow: hidden;
    margin: 0;
} 
 
.title-parallax{
    position: absolute;
    z-index: 999;
    width: 600px;
    margin-left: -300px;
    left: 50%;
    top: 45px; 
    text-align: center; 
    color:#fff;
    font-weight: 400;
}
.title-parallax h1{    
    font-weight: 100;
    color:#fff;
    margin-bottom: 0
}
.title-parallax span{  
    color:#999;
    margin-bottom: 0;
    font-size: 12px
}
.nomargin{
    margin:0;
}
.blueloker{
    background: #64D2D2
}
.black-text{
    color:#384351
}
.blackloker{
    background: #384351
}
.btnfb a{
    color: #fff;
}
.relative{
    position: relative
}
.register-now-img{
	position: relative;
	bottom: -5px;
	z-index: 0
}

.register-now-spg-img{
	position: relative; 
	padding-left: 90px;
	bottom: -5px;
	z-index: 0
}

.register-now-spg-img-small{
	position: relative; 
	margin-left: -100px;
	bottom: -5px;
	z-index: 0
}

.register-now-agent-img{
	position: relative;
	bottom: -5px; 
	padding-left: 90px;
	z-index: 0
}

.register-now-agent-img-small{
	position: relative;
	bottom: -5px; 
	padding-left: 90px;
	z-index: 0
}

.infoleft{
    position: absolute;
    top:60px;
    right: 60px;
    max-width: 230px;
    text-align: right;
    font-size: 18px; 
    z-index: 2   
}
.inforight{
    position: absolute;
    top:60px;
    left: 40px;
    max-width: 230px;
    text-align: left;
    font-size: 18px; 
    z-index: 2   
}

.infoleft-small{
    position: absolute;
    top:10px;
    right: 20px;
    max-width: 100%;
    text-align: right;
    font-size: 11px; 
    z-index: 2   
}
.inforight-small{
    position: absolute;
    top:10px;
    left: 10px;
    max-width: 100%;
    text-align: left;
    font-size: 11px; 
    z-index: 2   
}

.btnSmall{
    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    padding-left: 16px;
    padding-right: 16px;
    vertical-align: middle;
}

.collection,
.collection .collection-item{
    border-color: #ddd
}
.bold{
    font-weight: bold
}  
.apply-info{text-align: right;}
.apply-info button{border: none!important}

#toast-container {
  	top: 5% !important;
}

.count-loker{
		font-size: 12px;
		float: right;
	}

.title-sidebar-left{
	font-weight: 500;
	font-size: 24px;
	padding-left: 10px; 
	padding-bottom: 3px;
	color: #FFFFFF;
}

.title-sidebar-left-agent{
	font-weight: 500;
	font-size: 24px;
	padding-left: 10px; 
	padding-bottom: 3px;
	color: #FFFFFF;
}
	
.all-loker{
	font-size: 12px;
	float: right; 
	padding-right: 10px;
	margin-top: 10px;
	color: #FFFFFF;
}
	
.title-profile{
	font-weight: 500;
	font-size: 24px;
	padding-left: 10px; 
	margin-top: 5px; 
	padding-bottom: 3px;
	color: #FFFFFF;
	background-color: #64D2D2;
}

.title-profile-agent{
	font-weight: 500;
	font-size: 24px;
	padding-left: 10px; 
	margin-top: 5px; 
	padding-bottom: 3px;
	color: #FFFFFF;
	background-color: #374352;
}

.fav-icon-profile{
	position: relative;
	background-color: #ffffff;
	border: solid 1px;
	width: 40px;; 
	height: 40px;
    border-radius: 50%;
    padding-top: 8px; 
}

.faved-icon-profile{
	position: relative;
	background-color: #ffffff;
	border: solid 1px ;
	width: 40px;; 
	height: 40px;
    border-radius: 50%;
    padding-top: 8px; 
}

.fav-icon-loker{
	position: relative;
	background-color: #ffffff;
	border: solid 1px;
	width: 35px;; 
	height: 35px;
    border-radius: 50%;
    margin-right: 10px; 
    margin-top: 2px;
    padding-left: 4px;
}

.fav-icon-list-loker{
	position: relative;
	background-color: #ffffff;
	border: solid 1px;
	width: 40px;; 
	height: 40px;
    border-radius: 50%;
    padding: 8px;
}


.fav-icon-list-spg{
	position: absolute; 
	background-color: #ffffff;
	border: solid 1px;
	width: 30px;; 
	height: 30px;
    border-radius: 50%;
    padding-top: 3px; 
    padding-left: 4px; 
    margin-top: -10px;
}

.floor-register-agent:hover .image-reg-agent {
  opacity: 0.6;
}

.floor-register-spg:hover .image-reg-spg {
  opacity: 0.6;
}

.btnLoker-small{
	width: 32px; 
	height: 32px; 
}

.iconLoker-small{
	font-size: 18px !important; 
	margin-top: -15px !important;
}

/* =========================== button ===================================== */
.btnDaftar{
	background: #1565c0;
}
.btnDaftar:hover{
	background: #bbdefb;
}

.btnLoker{
	background: #4dd0e1;
}
.btnLoker:hover{
	background: #b2ebf2;
}

/* ========================== tab inbox =================================== */
.tabs {
	height: auto;
	white-space: normal;
}
.tabs .tab{
	text-align: left !important; 
}
.tabs li.tab {
    color: #FFFFFF;
}
.tabs li.tab .active { 
	color: #000000;
    background-color: #e0e0e0;
}
.tabs li.tab a { 
	color: #000000;
}
.tabs li.tab a:hover{
	color: #000000;
	background-color: #e0e0e0;
}
.tab {
	color: #000000;
	display: block;
	width: 100%;
	border-bottom: 1px solid #f0f0f0;
}
.text-tab{
	margin-left: 20px; 
}
.text-tab-trash{
	margin-left: 15px; 
}
.tab-content {
	padding-bottom: 20px !important;
	height: auto;
	width: 100%;
	background: #fcfcfc;
	border: 1px solid #f0f0f0;
}
.indicator {
	display: none;
}

.icon-tab{
	width: 18px;
	height: auto; 
	float: left; 
	margin-top: 15px;
}

.icon-tab-trash{
	width: 24px;
	height: auto; 
	float: left; 
	margin-left: -3px;
	margin-top: 10px;
}

.inbox-btn-action{
	font-weight: 500;
	font-size: 16px;
	padding-left: 10px; 
	margin-top: 0px; 
	padding-bottom: 3px;
	color: #FFFFFF;
	background-color: #ffffff;
}
.inbox-btn-action-agent{
	font-weight: 500;
	font-size: 16px;
	padding-left: 10px; 
	margin-top: 0px; 
	padding-bottom: 3px;
	color: #FFFFFF;
	background-color: #374352;
}
.btnLoker-inbox{
	font-size: 13px; 
	background-color: #bdbdbd; 
	padding-top: 5px; 
	padding-bottom: 5px; 
	padding-left: 10px;
	padding-right: 10px;
	color: #616161; 
	font-weight: 400;
}
.btnLoker-inbox:hover{
	background-color: #374352; 
	color: #ffffff;
}

.btnLoker-disabled{
	margin-top: 5px;
	width: 18px;
	height: auto;
	border: solid 1px #9e9e9e; 
	background-color: #9e9e9e;
	padding: 3px;
	color: #fff; 
	position: relative;
}
.btnLoker-active{
	margin-top: 5px;
	width: 18px;
	height: auto;
	border: solid 1px #000000;
	padding: 3px;
	color: #fff; 
	position: relative;
}


/*================================ button icon =========================================== */
.icon-edit-photo{
	width: 32px;
	height: auto;
	border: solid 1px #000000;
	padding: 5px;
	margin-right: 10px; 
	color: #fff; 
	position: relative;
	float: right;
}

.icon-edit-profile{
	width: 32px;
	height: auto;
	border: solid 1px #9e9e9e;
	padding: 5px;
	margin-right: 10px; 
	color: #fff; 
	position: relative;
	float: right;
}

.icon-edit-profile:hover{
	width: 32px;
	height: auto;
	border: solid 1px #000000;
	padding: 5px;
	margin-right: 10px; 
	color: #fff; 
	position: relative;
	float: right;
}

.icon-back-profile{
	width: 36px;
	height: auto;
	border: solid 1px #9e9e9e;
	padding: 5px;
	margin-right: 10px; 
	color: #fff; 
	position: relative;
	float: right;
}

.icon-back-profile:hover{
	width: 36px;
	height: auto;
	border: solid 1px #000000;
	padding: 5px;
	margin-right: 10px; 
	color: #fff; 
	position: relative;
	float: right;
}

.icon-hapus-grid{
	width: 32px;
	height: auto;
	border: solid 1px #000000;
	padding: 5px;
	margin-top: 0px;
	margin-right: 0px; 
	color: #fff; 
	position: relative;
}

.icon-upload-grid{
	width: 38px;
	height: auto;
	border: solid 1px #000000;
	padding: 5px;
	margin-top: -15px;
	color: #fff; 
	position: relative;
}
.icon-hapus-pengalaman-kerja{ 
	margin-top: 5px;
	width: 18px;
	height: auto;
	border: solid 1px #9e9e9e;
	padding: 3px;
	color: #fff; 
	position: relative;
}

.icon-hapus-pengalaman-kerja-disable{
	margin-top: 5px;
	width: 18px;
	height: auto;
	border: solid 1px #9e9e9e; 
	background-color: #9e9e9e;
	padding: 3px;
	color: #fff; 
	position: relative;
}

.icon-hapus-pengalaman-kerja:hover{
	margin-top: 5px;
	width: 18px;
	height: auto;
	border: solid 1px #000000;
	padding: 3px;
	color: #fff; 
	position: relative;
}

.icon-tambah-pengalaman-kerja{
	margin-top: 5px;
	width: 18px;
	height: auto;
	border: solid 1px #9e9e9e;
	padding: 3px;
	color: #fff; 
	position: relative;
}

.icon-tambah-pengalaman-kerja:hover{
	margin-top: 5px;
	width: 18px;
	height: auto;
	border: solid 1px #000000;
	padding: 3px;
	color: #fff; 
	position: relative;
}

.icon-loker{
	width: 16px;
	height: auto; 
}

.reset-password{
	color: #1565c0;
}

.reset-password:hover{
	color: #424242;
}

/* =========================================== button share ============================================== */
.button-share{
	padding-right: 20px;
}

/* =========================================== informasi ================================================ */
.collection-active{
	background-color: #4dd0e1 !important;
	color: #ffffff !important;
}
.informasi a:hover{
	background-color: #4dd0e1 !important;
	color: #ffffff !important;
}

/* =========================================== share info ================================================ */
.share-form{
	font-size: 24px;
	padding: 5px;
	margin-left: 60px; 
}

/* ========================================== update share info ============================================== */
.edit-share-info{
    background: #fff;
    border-radius: 5px;
    border:1px solid #ddd; 
    margin-bottom: 8px;
    padding: 15px;
}
.edit-share-info .form{
	font-size: 24px;
}

/* =========================================== share mobile ================================================== */
.linecolor {
    background: #00B900 !important
}
.wacolor {
    background: #4dc247 !important
}
.post-content img {
    width: 100% !important;
    height: auto !important;
}

.post-content iframe {
    width: 100% !important
}

.imgcontentrelative {
    position: relative;
}

.imgcontentrelative .sosmedicon {
    opacity: 0;
}

.imgcontentrelative:hover .sosmedicon {
    opacity: 1;
    transition: opacity .3s ease-in;
}

.sharesosmedmobile {
    text-align: center;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .5);
    height: 50px;
    width: 100%;
    display: block;
    overflow: hidden;
    font-size: 14px;
}

.boxempatsosmed {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
}

.mobileshare {
    height: 30px;
    width: 100%;
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-size: 18px;
}

.sosmedimg {
    position: absolute;
    top: 5px;
    left: 5px;
}

.sosmedicon a {
    color: #fff;
    text-decoration: none
}

.sosmedicon {
    text-align: center;
    font-size: 12px;
    margin-bottom: 5px;
    line-height: 30px;
    height: 30px;
    width: 30px;
    display: block;
    cursor: pointer;
    border-radius: 5px;
    color: #fff;
    text-decoration: none
}