﻿/********************************************************************/
/*********************************************************************/
/************************* only media queries ************************/
/*********************************************************************/
/**********************************************************************/

/**** w ≥ 960px ****/
@media only screen and (min-width : 960px) {
	.siteWidth {
		width: 960px;
		padding: 0;
		margin: 0 auto;
	}
	
	.menu_main ul  li {
		margin:0 24px;
	}
	
	#logo {
		width: 232px;
	}
	
	.left {
		width: 252px;
		float: left;
		padding-right: 20px;
	}
	
	.center {
		width: 685px;
		float: right;
	}
	
	.square {
		left: 63% !important;
		height: 0;
	}	
		
}

/*  w ≤ 959px */
@media only screen and (max-width : 959px) {
	.siteWidth {
		width: 98%;
		padding: 0;
		margin: 0 auto;
	}
	
	#logo {
		width: 28%;
	}
	
	.menu_main {
		width: 65%;
	}
	
	.menu_main ul  li {
		margin:0 3%;
	}
	
	#ribbon {
		display: none;
	}
	
	
	#bar p {
		text-align: center !important;
	}
	
	
	.center {
		width: 100%;
	}
	
	.left {
		width: 100%;
		margin-top: 90px;
	}
	
	.anak {
		text-align: center;
	}
	
	.square {
		left: 50% !important;
	}

	#footerLinks {
		margin: 0 auto; 
	}

	.mapouter {
		width: 100% !important;
	}

	.gmap_canvas {
		width: 100% !important;
	}
	
}

/* w ≥ 770 */
@media only screen  and (min-device-width : 770px) and (orientation : landscape), only screen  and (min-width : 770px) {/*and  (max-width : 755px)*/
	#menuBut,#menu_slide {
		display: none;
	}
	
}

/* w ≤ 769 */
@media only screen and  (max-width : 769px) {
	.menu_main ul li{
		display: none;
	}
	
	.logo {
		float: none !important;
		margin: 0 auto !important;
	}
	
	#logo {
		height: 68px;
		width: auto;
	}
	
	#menuBut {
		float: right;
		position: fixed;
		right: 2%;
		top: 23px;
		cursor: pointer;
		display: block;
		z-index: 102;
	}
	
}

/*------------end of media queries---------------*/