/**
* Responsive Style
* Team Development of http://blackstoneindonesia.com
* http://blackstoneindonesia.com
*/


/**
---->
Larger Screen
---->
**/
@media only screen and (max-width : 1440px) 
{
	.dropdown::after {
		top:-100%;
	}
}

/**
---->
iPHONE
---->
**/

/**
---->
iPAD
---->
**/


/** iPAD Landscape **/

footer .footer-area {z-index:55529;}

@media only screen and (max-width : 1152px) 
{
	header nav#menu_header, footer .footer-area {
		width:100%;
		left:0;
		
	}
	
	header nav#menu_header li {
  		margin-right: 0px;
   		font-size: 0.9em;
	}
	
	nav ul.search-form input {
		width:55px;
	}
	
	nav ul.search-form input.go {
		width:30%;
	}
	
	.main_menu .nav-column p, .main_menu li.nav-column p  {
		font-size:1.3em;
	}	
	.caption_home p.big-logo img {
    		width: 500px;
	}
	.caption_home h2 {
		font-size: 0.9em;
	}
	ul.trade_mark li img {
   		width: 45px;
	}
	ul.link_page {
   		width: 78%;
	}
	ul.social_link {
		width: 21%;
	}
	.left_arrow {
   		 left: -65px;
	}
	.latest_news a {
		font-size: 0.8em;
	}
}

@media only screen and (max-width : 848px) 
{#header-mobile {
		display:block;
		background: #4d4e53;
	    font-size:1.25em;
	    z-index:100000000000;
	    position: fixed;
	    top:0;
	    width:100%;
	    color:#fff;
	}
	#toggle_menu {
		background: white;
		width:100%;
		float:left;
		
	}
	
	
	#toggle_menu i{
		float:right;
		margin:10px 20px;
		
	}
	
	/* #toggle_menu:after {
		font-family:FontAwesome;
		font-size:2em;
		content:'\f0c9';
		float:right;
		margin:10px 20px;
		
	} */
	
	
	
	/*#toggle_menu > ul {display: none;}*/
	#toggle_menu > ul {display: block; width:100%; margin-top:0px;background:#0a5ca8;}
	#toggle_menu > ul > li {display: block; width:100%; border-bottom:1px solid #999; padding:5px 0 5px 10px; text-transform:uppercase; cursor:pointer;}
	#toggle_menu > ul > li > a { color:#fff; font-size:17px; display:block; width:100%;}
	#toggle_menu > ul > li > a:hover { color:white;}
	#toggle_menu > ul > li:hover {background-color:#ed1d24;}
	#toggle_menu > ul > li > ul {display: none;}
	#toggle_menu > ul > li:hover > ul {display: block;}
	#toggle_menu > ul > li > ul > li {display: block; font-size:14px; width:100%; border-top: white solid 1px; margin-top:5px; padding-top: 4px;}
	#toggle_menu > ul > li > ul > li > a {color: #fff; display:block; }
	#toggle_menu > ul > li > ul > li > a:hover {color: white}
	#toggle_menu > ul > li > ul > li:hover > a { padding-left:10px;}
	#toggle_menu > ul > li > ul > li > ul {display: none;}
	#toggle_menu > ul > li > ul > li:hover > ul {display: block;}
	#toggle_menu > ul > li > ul > li > ul > li {display: block; font-size:14px; width:100%; margin-top:5px; padding-top: 0px; text-transform:none; }
	#toggle_menu > ul > li > ul > li > ul > li > a {color: #fff; padding-left:10px; display:block}
	#toggle_menu > ul > li > ul > li > ul > li > a:hover{color: white;}
	#toggle_menu > ul > li > ul > li > ul > li:hover > a {padding-left:20px;}
	
		
	
	
	
	
/*	
	
	#toggle_menu:hover > ul {display:block; width:100%; margin-top:55px; } 	
	#toggle_menu > ul > li {width:100%; border-bottom: 1px solid #999; padding:5px 0 0px 10px; text-transform:uppercase; display:block;}
	#toggle_menu > ul > li > a {color:white; font-size:16px; display:block; cursor:pointer; width:100%;}	
	#toggle_menu > ul > li:hover {background-color:#ee0303; padding-left:20px; top:50px;}
	#toggle_menu > ul > li:hover > a {color:white; font-size:16px; display:block; cursor:pointer; width:100%; padding-left:10px; color:white; text-decoration:none;}
	#toggle_menu > ul > li > ul {display:none;}
	#toggle_menu > ul > li:hover > ul {display:block; padding:0; margin:0; width:100%;  margin-left:0px;}
	#toggle_menu > ul > li > ul li a {font-size:14px; padding-top:5px; margin-top:5px;}	
	#toggle_menu > ul > li > ul li:hover > ul {display: block; padding:0; margin:0; width:100%;  margin-left:0px;}	
	#toggle_menu > ul > li > ul li:hover > ul li a {font-size:14px; border-top: white solid 1px; padding-top:5px; margin-top:5px; padding-left:0px; text-transform:none;}	*/
	
	
	header nav#menu_header {
   		top: 6%;
   		display:none;
	}
	.caption_home p.big-logo img {
    		width: 400px;
	}
	.caption_home h2 {
		font-size: 1.54em;
	}
	ul.main_menu {
   		width: 78%;
	}
	header nav#menu_header li {
   		margin-right: 30px;
    	font-size: 1.5em;
	}
}

/** iPAD Portrait **/
@media only screen and (max-width : 768px) 
{
	
	
	.slider .slide img {
		width: auto !important;
		height: 100% !important;
    }
    
  
	
	.about-us {
	    overflow-y: scroll;
	    -webkit-overflow-scrolling: touch;
	
	}
	
	
	
	
	
	ul.trade_mark {
    		width: 20%;
    		float: right;
    		text-align: right;
	}
	ul.trade_mark li img {
    		width: 40px;
	}
	ul.trade_mark li img.first_mark {
    		margin-top: -30px;
	}
	ul.link_page {
   		width: 73%;
	}
	ul.social_link {
		width: 27%;
	}
	.latest_news {
    		bottom: 65px;
	}
	.latest_news.open {
		height: 65px;
	}
	.title_latest_news {
   		 width: 12%;
		 padding: 18px 0px;
	}
	.title_latest_news h2 {
    		font-size: 110%;
	}
	.col_news {
		right: 0px;
		line-height: 1.2em;
		height: 63px;
		width: 36%;
		left: 100px;
		padding: 10px;
	}
	.latest_news a {
   		font-size: 0.65em;
	}
	.left_arrow {
   		left: 90px;
	
	}
	.right_arrow {
		top: 20px;
		right: -128px;
	}
	.left_arrow img, .right_arrow img {
		width: 12px;
	}
	.news_area {
		width: 75%;
		left: 20px;
		position: relative;
	}
	#logo_web img {
		width: 200px;
		height: 22px;
	}
	
	.footer-popup .row4.one {
		width: 25%;
		padding: 7px 30px;
		float: left;
	}
	
	
	li.photo-view {
		width:45%;
	}}
	
	
	
	@media only screen and (max-width : 768px)
{li.photo-view {
		width:100%;
	}}
	
	
	li.photo-view.boc{
		width:48%;
	} 
	
	
		@media only screen and (max-width : 768px)
{li.photo-view.boc{
		width:100%; margin-bottom:0px;
	} }
	
	.dropdown::after {
		top:-180%; display:none;
	}
}



@media only screen and (max-width : 568px) 
{
	header nav#menu_header, .caption_home, .latest_news, footer .footer_area  {
    		position: relative;
	}
	
	header nav#menu_header {
		left: 0%;
		padding-left: 0px;
		top: 12%;
		width: 100%;
		height: 135px;
		background: rgba(57,57,57,0.7);
		visibility: hidden;
	}
	#header_mobile {
		display: block;
		width: 100%;
		height: 60px;
		background: rgba(8,8,8, 0.2);
	}
	header nav#menu_header li {
		font-size: 1.5em;
	}
	#toggle_menu {
		width: 100%;
		top: 0px;
		position: fixed;
	}
	#logo_mobile {
		position: relative;
		left: 90px;
		top: -25px;
	}
	ul.trade_mark, #logo_web, .caption_home {
		display: none;
	}
	ul.main_menu {
   		 width: 51%;
		margin-left: 20px;
		padding-top: 10px;
	}
	header nav#menu_header li a.dark {
    		color: #ffffff;
    		font-size: 0.8em;
	}
	nav.menu_footer {
		width: 100%;
		right: 0;
		top: 0;
		padding: 10px 0;
	}
	nav.menu_footer li {
		margin-right: 10px;
	}
	nav.menu_footer li a {
		font-size: 80%;
	}
	ul.link_page {
		width: 68%;
		margin-top: 0px;
		text-align: left;
		margin-left: 15px;
	}
	ul.social_link {
		width: 25%;
		margin-top: 0px;
		margin-right: 7px;
	}
	ul.social_link li {
		margin-right: 3px;
	}
	ul.social_link li img {
		width: 20px !important;
		height: 20px !important;
	}
	.container_news {
		display: none;
	}
	.latest_news {
		width: 100%;
		bottom: 0px;
		height: auto;
		padding: 0 0 10px 0;
		border: none;
		background: rgba(57,57,57, 1);
		float: left;
	}
	.title_latest_news {
		width: 100%;
		padding: 0;
		left: 0;
		background: rgba(85, 85, 85, 1);
		padding: 5px 0;
	}
	.col_news {
		width: 100%;
		right: 0px;
		padding: 0px;
		margin-top: 0px;
		border: none;
		left: 0;
		font-size: 1.5em;
		line-height: 0.7em;
		margin-bottom: 10px;
		height: 40px;
		
	}
	.col_news h3 {
		margin-left: 15px;
		font-size: 92%;
		padding: 10px 0;
		position: relative;
		border-bottom: 1px solid #666666;
		width: 95%;
	}
	.left_arrow, .right_arrow {
		display: none;
	}
	.title_latest_news h2 {
		font-size: 1em;
		margin-left: 15px;
	}
	body .mc-cycle {
    		height: auto;
   		overflow: visible;
   		position: relative;
   		width: 100%;
	}
	.latest_news.open {
		height: auto;
	}
	.footer_area {
		float: left;
	}
	.news_area {
		width: 100%;
    	left: 0px;
	}
	.background_hover {
   		 z-index: 0;
	}
	
	.footer-popup .row4.one {
		width: 90%;
		padding: 7px 25px;
		float: left;
	}
	.row4.one img {
		width: 50%;
		display:block;
	}
	
	.footer-popup .row4.two {
		margin: 0 0 0 18px;
		line-height: 1.25em;
		width: 40%;
	}
	
	.footer-popup .row4.three {
		margin: 0px 0 0 0;
		line-height: 1em;
		width: 40%;
		float: right;
	}
	
	.footer-popup .row4.four {
		float: left;
		width: 80%;
		padding: 7px 18px;
		display: block;
		margin:10px;
	}
}